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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
浅谈js中对象的使用
Aug 11 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
js实现上传图片到服务器
Apr 11 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
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
event.srcElement+表格应用
2006/08/29 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
销售心得体会
2014/01/02 职场文书
心理健康日活动总结
2014/05/08 职场文书
现场活动策划方案
2014/08/22 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
2016年十一促销广告语
2016/01/28 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers