p5.js实现斐波那契螺旋的示例代码


Posted in Javascript onMarch 22, 2018

本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,分享给大家,也给自己做个笔记

效果如下:

p5.js实现斐波那契螺旋的示例代码

主要方法

  1. translate()
  2. rotate()
  3. arc()

斐波那契螺旋

斐波那契螺旋线也称“黄金螺旋”,是根据斐波那契数列画出来的螺旋曲线,以斐波那契数为边的正方形中画一个90度的扇形,连起来的弧线就是斐波那契螺旋。

草图

p5.js实现斐波那契螺旋的示例代码

过程分解

一、定义一个空的斐波那契数组:

var Fibonacci = [];

二、初始化

默认情况下draw()函数会无限重复绘图, frameRate()函数可以设置每秒重复绘图的次数,就像电影每秒播放的帧数。

function setup(){
 createCanvas(windowWidth, windowHeight);//创建一块画板,画板的宽高与浏览器宽高相同
 background(255);//设置背景颜色为白色
 frameRate(10);//设置每秒10帧
}

三、设置斐波那契螺旋的样式

function draw(){
 ...
 stroke(0);//线条颜色为黑色
 noFill();//无填充色
 strokeWeight(5);//线条宽度为5
 translate(windowWidth/2, windowHeight/2);//将坐标系移动到页面中央
 ...
}

四、开始绘制斐波那契螺旋

function draw(){
 ...
 stroke(0);
 noFill();
 strokeWeight(5);
 translate(windowWidth/2, windowHeight/2);
 ...
 for( var i = 0; i < 20; i ++){//绘制20段90度弧线
  var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];
//这是条件表达式,如果i等于0或1,那么a等于1;否则等于斐波那契数列前两项的和
  Fibonacci.push(a);//将新得到的a加入斐波那契数列中
  arc(0,0,a * 2,a * 2,0,PI / 2);//绘制圆心在(0,0)直径为2*a度数为90度的弧形

  /**********以下是为下一段弧线做准备************/
  rotate(PI / 2);//将坐标系按顺时针旋转90度
  translate(-Fibonacci[i-1],0); //将坐标系沿着X轴反向移动上一项的长度
 } 
}

五、让斐波那契螺旋动起来

function draw(){
 background(255);//将背景设置成白色,“遮盖”之前的绘图
 stroke(0);
 noFill();
 strokeWeight(5);
 translate(windowWidth/2, windowHeight/2);
 rotate(-PI / 6 * frameCount);//每帧旋转30度,frameCount表示当前已播放帧数
 for( var i = 0; i < 20; i ++){
  var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];
  Fibonacci.push(a);
  arc(0,0,a * 2,a * 2,0,PI / 2);
  rotate(PI / 2);
  translate(-Fibonacci[i-1],0); 
 } 
}

完整代码

var Fibonacci = [];

function setup(){
 createCanvas(windowWidth, windowHeight);
 background(255);
 frameRate(10);
}

function draw(){
 background(255);
 stroke(0);
 noFill();
 strokeWeight(5);
 translate(windowWidth/2, windowHeight/2);
 rotate(-PI / 6 * frameCount);
 for( var i = 0; i < 20; i ++){
  var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];
  Fibonacci.push(a);
  arc(0,0,a * 2,a * 2,0,PI / 2);
  rotate(PI / 2);
  translate(-Fibonacci[i-1],0); 
 } 
}

function windowResized(){
 resizeCanvas(windowWidth, windowHeight);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
sails框架的学习指南
Dec 22 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
javascript实用方法总结
Feb 06 Javascript
js实现上传图片及时预览
May 07 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 #Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 #Javascript
基于vue-video-player自定义播放器的方法
Mar 21 #Javascript
基于iScroll实现内容滚动效果
Mar 21 #Javascript
JS中的回调函数实例浅析
Mar 21 #Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 #Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 #Javascript
You might like
destoon数据库表说明汇总
2014/07/15 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python translator使用实例
2008/09/06 Python
python 实现插入排序算法
2012/06/05 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
css3的transition属性详解
2014/12/15 HTML / CSS
Linux机考试题
2015/10/16 面试题
小班幼儿评语大全
2014/04/30 职场文书
社区维稳工作方案
2014/06/06 职场文书
活动总结新闻稿
2014/08/30 职场文书
七年级作文之下雨天
2019/12/23 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android