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 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 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函数
2011/05/31 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php cookie 详解使用实例
2016/11/03 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
vue实例的选项总结
2020/06/09 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
介绍Python中内置的itertools模块
2015/04/29 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python处理Excel文件实例代码
2017/06/20 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
《爱如茉莉》教后反思
2014/04/12 职场文书
答谢酒会主持词
2015/07/02 职场文书
旅行社计调工作总结
2015/08/12 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
详解python的异常捕获
2022/03/03 Python
关于vue-router-link选择样式设置
2022/04/30 Vue.js