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获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 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
星际实力自我测试
2020/03/04 星际争霸
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
用Python进行TCP网络编程的教程
2015/04/29 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
简单了解Django模板的使用
2017/12/20 Python
python实现三维拟合的方法
2018/12/29 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python实现超级马里奥
2020/03/18 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
创建学习型党组织实施方案
2014/03/29 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
活动总结模板大全
2015/05/11 职场文书