p5.js uses the draw() function to make a golden spiral

This time I will show you how to use the draw() function to make a golden spiral in p5.js. What are the precautions for using the draw() function in p5.js to make a golden spiral? Here is a practical case, let’s take a look.

The effect is as follows:

Main method

1. ##translate()

2. rotate()

3. arc()

##Fibonacci Spiral

The Fibonacci spiral is also called the "golden spiral". It is a spiral curve drawn based on the Fibonacci number sequence. Draw a 90-degree fan shape in a square with Fibonacci numbers as sides. The connected arcs are Fibonacci spiral.

Sketch

Process Decomposition

1. Define an empty Fibonacci array ：

var Fibonacci = [];

2. Initialization

By default, the draw() function will repeat drawing infinitely, and the frameRate() function can set the number of repeated drawings per second. , like the number of frames per second a movie plays.

function setup(){
 createCanvas(windowWidth, windowHeight);//创建一块画板，画板的宽高与浏览器宽高相同
 background(255);//设置背景颜色为白色
 frameRate(10);//设置每秒10帧
}

3. Set the style of the Fibonacci spiral

function draw(){
 ...
 stroke(0);//线条颜色为黑色
 noFill();//无填充色
 strokeWeight(5);//线条宽度为5
 translate(windowWidth/2, windowHeight/2);//将坐标系移动到页面中央
 ...
}

4. Start drawing the Fibonacci spiral

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轴反向移动上一项的长度
 } 
}

5. Let the Fibonacci spiral move

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

Complete code

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

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use Angular component interaction

Detailed explanation of the mutual communication function of controllers in Angularjs

The above is the detailed content of p5.js uses the draw() function to make a golden spiral. For more information, please follow other related articles on the PHP Chinese website!