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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
js获取微信版本号的方法
May 12 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
详解Nuxt.js 实战集锦
Nov 19 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
把77A收信机改造成收音机
2021/03/02 无线电
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Python Queue模块详解
2014/11/30 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
Python的信号库Blinker用法详解
2020/12/31 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
先进工作者获奖感言
2014/02/08 职场文书
企业文化建设实施方案
2014/03/22 职场文书
新闻发布会策划方案
2014/06/12 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
补充协议书
2015/01/28 职场文书
华山导游词
2015/02/03 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
Java Spring读取和存储详细操作
2022/08/05 Java/Android