p5.js实现斐波那契螺旋的示例代码

本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码，分享给大家，也给自己做个笔记

效果如下：

主要方法

  1. translate()
  2. rotate()
  3. arc()

斐波那契螺旋

斐波那契螺旋线也称“黄金螺旋”，是根据斐波那契数列画出来的螺旋曲线，以斐波那契数为边的正方形中画一个90度的扇形，连起来的弧线就是斐波那契螺旋。

草图

过程分解

一、定义一个空的斐波那契数组：

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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 用p5.js制作烟花特效的示例代码
  • p5.js入门教程之图片加载
  • p5.js入门教程之键盘交互
  • p5.js入门教程之鼠标交互的示例
  • p5.js入门教程之平滑过渡(Easing)
  • p5.js入门教程之小球动画示例代码
  • p5.js入门教程和基本形状绘制
赞 (0)

相关推荐

  • p5.js入门教程之鼠标交互的示例

    本文介绍了p5.js入门教程之鼠标交互的示例,分享给大家,具体如下: 一.鼠标交互常用关键词 p5.js提供了许多鼠标操作用的关键词与函数,常用的有: mouseIsPressed:关键词,若鼠标按下则为true,反之为false mouseButton:关键词,用来判断鼠标按下的是哪个键 案例如下: function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed

  • 用p5.js制作烟花特效的示例代码

    用p5.js制作烟花特效的示例代码

    前言 之前看过一篇文章,使用processing制作烟花特效.效果如下 fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的模拟器上. 不过好在也有对应的web扩展语言,有processing.js和p5.js. processing.js在github上已经好几年没有人维护了,一些processing的特性支持不了.为此踩了不少坑, 本文就集中讲解如何用p5.js写烟花特效. 代码讲解 proces

  • p5.js入门教程之键盘交互

    一.键盘交互相关关键词与函数 keyIsPressed: 关键词,按下按键时为true,反之为false keyCode: 关键词,用于判断按下哪个按键 keyPressed():函数,按键按下时触发一次 keyReleased():函数,按键松开时触发一次 keyIsDown():函数,按下指定按键时返回true,反之为false 以下是一个较综合的案例,用wsad与zxcv控制小球移动: var x=200; var y=200; var speed=2; function setup()

  • p5.js入门教程和基本形状绘制

    一.什么是p5.js 最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js. 主讲老师就是开发者之一--还是挺激动的. p5.js是一个为艺术家.设计师而开发的Javascript库,可以看作是Processing的Web版本.如果有Processing学习经验的话,p5.js上手会非常快. 至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者. 我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫. 二

  • p5.js入门教程之图片加载

    一.preload()函数与图片上传 preload()函数是一个特殊的函数,它同setup()类似,只在程序开始时运行一次,但顺序在setup()之前. 一般我们会将媒体文件(图片.声音)加载的语句放在preload()中,因为preload()有一个特性就是不加载完毕,程序就不会开始,保证了程序运行时不会出错. 在加载图片之前,我们需要先将图片文件上传. 方法是: ①点击编辑器左上角的小三角展开文件目录. ②点击文件目录右上角小三角,展开菜单后Add File. ③可以直接将图片文件拖到框里

  • p5.js入门教程之小球动画示例代码

    一.运动的小球 本节将用p5.js做一个在屏幕上运动的小球. 思路是用变量记录小球的位置,然后在draw()函数里对其做出改变,由于draw()函数会不断地运行(频率为FPS,默认60帧/秒),所以小球便产生了运动. 代码如下: var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是关键词,分别是Canvas的宽和高 x+=2; ellipse

  • p5.js入门教程之平滑过渡(Easing)

    一.跟随鼠标移动的小球 使用mouseX,mouseY可以创建一个跟随鼠标移动的小球. function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20); } 二.让小球更加平滑的移动--使用Easing 一般制作精良的UI界面都会用到平滑移动这一效果,也就是利用了名为"Easing"的方法. 实现思路是另外设置变量以进行位置的过渡,代

  • p5.js实现斐波那契螺旋的示例代码

    p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,分享给大家,也给自己做个笔记 效果如下: 主要方法 translate() rotate() arc() 斐波那契螺旋 斐波那契螺旋线也称"黄金螺旋",是根据斐波那契数列画出来的螺旋曲线,以斐波那契数为边的正方形中画一个90度的扇形,连起来的弧线就是斐波那契螺旋. 草图 过程分解 一.定义一个空的斐波那契数组: var Fibonacci = []; 二.初始化 默认情况下draw()函数会无限重复绘图, frameRate()函

  • JS实现斐波那契数列的五种方式(小结)

    下面是五种实现斐波那契数列的方法 循环 function fibonacci(n){ var res1 = 1; var res2 = 1; var sum = res2; for(var i = 1;i < n;i ++){ sum = res1 + res2; res1 = res2; res2 = sum; } return sum; } 普通递归 function fibonacci (n) { if ( n <= 1 ) {return 1}; return fibonacci(n

  • Python/R语言分别实现斐波那契数列的示例详解

    Python/R语言分别实现斐波那契数列的示例详解

    目录 前言 1.年龄计算 1.1 图解问题 1.2 代码解决 1.3 实验小结 2.斐波那契数列 2.1 图解问题 2.2 代码实现 2.3 实验小结 总结 前言 此专栏为python与R语言对比学习的文章:以通俗易懂的小实验,带领大家深入浅出的理解两种语言的基本语法,并用以实际场景!感谢大家的关注,希望对大家有所帮助. “博观而约取,厚积而薄发!”谨以此言,望诸君共勉 本文将前两个小实验整理拼凑再了一起 :分别是“年龄计算”.“斐波那契数列”.具体的项目介绍见下文. 1.年龄计算 有 5 个人

  • C++求斐波那契数的实例代码

    C++求斐波那契数的实例代码

    题目内容:斐波那契数定义为:f(0)=0,f(1)=1,f(n)=f(n-1)+f(n-2)(n>1且n为整数) 如果写出菲氏数列,则应该是: 0 1 1 2 3 5 8 13 21 34 -- 如果求其第6项,则应为8. 求第n项菲氏数. 输入描述:输入数据含有不多于50个的正整数n(0<=n<=46). 输出描述:对于每个n,计算其第n项菲氏数,每个结果应单独占一行. 题目分析:先把第0项到第46项的斐波那契数求出来,放在一个数组中,然后,直接查表即可,这样就不会超时. 参考代码:

  • JS计算斐波拉切代码实例

    JS计算斐波拉切代码实例

    这篇文章主要介绍了js计算斐波拉切,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 function feibo(a){ if(!a || a <= 0){ throw new Error("参数错误,必须大于0"); }else if(a == 1){ return 1; }else if(a == 2){ return 2; }else{ return feibo(a-1) + feibo(a-2); } } console.

  • JavaScript输出斐波那契数列的实现方法

    题目 有这么一道题目需要我们来解答: 试输出斐波那契数列的前10项,即 1.1.2.3.5.8.13.21.34.55. 分析 有些人看到题目中出现了"斐波那契数列"这个概念后,可能脑袋就蒙圈了,其实大可不必! 对于这道题,可以不用理会这个陌生概念,我们只需要关心后面它给出的数字规律即可. 我们可以看到,规律总结起来就一句话:从第三位开始,后面每项的值等于前两项之和,用式子表示的话就是:an = an-1 + an-2(n ≥ 2) . 根据题目要求,其实就是要我们做两件事: 生成每一

  • 递归形式与非递归形式的斐波那契数列的用法分析

    复制代码 代码如下: <SPAN style="FONT-SIZE: 32px">采用递归形式和非递归形式实现斐波那契数列</SPAN> 复制代码 代码如下: #include "stdafx.h"#include <iostream>using namespace std;//递归形式的斐波那契数列int fibonacciRecursion(int n){ if (n == 1 || n ==2) {  return 1; }

  • 递归之斐波那契数列java的3种方法

    本文实例为大家分享了java递归之斐波那契数列的具体代码,供大家参考,具体内容如下 第一种.普通写法 public class Demo { public static void main(String[] args) { int num1 = 1; int num2 = 1; int num3 = 0; System.out.println(num1); System.out.println(num2); for (int i = 1; i < 10; i++) { num3 = num1 +

  • java编程经典案例之基于斐波那契数列解决兔子问题实例

    java编程经典案例之基于斐波那契数列解决兔子问题实例

    本文实例讲述了java基于斐波那契数列解决兔子问题.分享给大家供大家参考,具体如下: 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? package com.java.recursion; /** * @描述 三种方法实现斐波那契数列 * @项目名称 Java_DataStruct * @包名 com.java.recursion * @类名 Fibonacci * @author chenli

  • python实现斐波那契递归函数的方法

    本文以一个简单的实例讲述了python实现斐波那契数列数列递归函数的方法,代码精简易懂.分享给大家供大家参考之用. 主要函数代码如下: def fab(n): if n==1: return 1 if n==0: return 0 else: result=int(fab(n-1))+int(fab(n-2)) return result 测试代码如下: for i in range(10): print fab(i) 希望本文所述对大家Python程序设计的学习有所帮助.

随机推荐