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 相关文章推荐
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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
PHP实现文件安全下载
2006/10/09 PHP
php多文件上传下载示例分享
2014/02/20 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
php DES加密算法实例分析
2019/09/18 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
一行python实现树形结构的方法
2019/08/09 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
区三好学生主要事迹
2014/01/30 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
学习普通话的体会
2014/11/07 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
mysql查找连续出现n次以上的数字
2022/05/11 MySQL