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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
简单的渐变轮播插件
Jan 12 Javascript
js实现下一页页码效果
Mar 07 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
js实现开关灯效果
Mar 30 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
基于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 socke 向指定页面提交数据
2008/07/23 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
教大家使用Python SqlAlchemy
2016/02/12 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python将视频转换为全字符视频
2019/04/26 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
Python3获取cookie常用三种方案
2020/10/05 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
上班上网检讨书
2014/01/29 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
刑事上诉状范文
2015/05/22 职场文书
机关工会工作总结2015
2015/05/26 职场文书
中学音乐课教学反思
2016/02/18 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android