Sample Code for p5.js to implement the Fibonacci spiral, p5.js

Sample Code for p5.js to implement the Fibonacci spiral, p5.js

This article mainly introduces the sample code for p5.js to implement the Fibonacci spiral, share it with you, and take notes for yourself.

The effect is as follows:

Main Method

1. Translate ()
2. Rotate ()
3. Arc ()

Fibonacci spiral

The Fibonacci spiral, also known as the "golden spiral", is a spiral curve drawn from the Fibonacci series. A 90-degree slice is drawn from the square with the number of vertices. The connected arc is the Fibonacci spiral.

Sketch

Process Decomposition

1. Define an empty Fibonacci array:

var Fibonacci = [];

Ii. Initialization

By default, the draw () function repeats the drawing infinitely. The frameRate () function can set the number of times that the drawing is repeated per second, just like the number of frames played per second by a movie.

Function setup () {createCanvas (wxwwidth, windowHeight); // create a canvas. The width and height of the canvas are the same as those of the browser. background (255 ); // set the background color to white frameRate (10); // set 10 frames per second}

3. Set the Fibonacci spiral style

Function draw (){... stroke (0); // The line color is black noFill (); // No fill color strokeWeight (5); // The line width is 5 translate (optional wwidth/2, windowHeight/2); // move the coordinate system to the center of the page ...}

4. Start to draw the Fibonacci spiral

Function draw (){... stroke (0); noFill (); strokeWeight (5); translate (optional wwidth/2, windowHeight/2 );... for (var I = 0; I <20; I ++) {// draw 20 90 degree arc var a = I <= 1? 1: Fibonacci [I-1] + Fibonacci [I-2]; // This is a conditional expression, if I is equal to 0 or 1, then a is equal to 1; otherwise, it is equal to the first two items of the Fibonacci series and the Fibonacci. push (a); // Add the new ainto the arc (, a * 2, a *, PI/2) of the Fibonacci series ); // draw the center at (0, 0) the following section describes the arc with a diameter of 2 * a and 90 degrees. ****************** is used to prepare for the next arc *********** */rotate (PI/2 ); // rotate the Coordinate System 90 degrees translate clockwise (-Fibonacci [I-1], 0); // move the length of the coordinate system along the X axis reversely }}

5. Let Fibonacci spiral

Function draw () {background (255); // set the background to white, and draw stroke (0); noFill (); strokeWeight (5) before "covering ); translate (required wwidth/2, required wheight/2); rotate (-PI/6 * frameCount); // 30 degrees of rotation per frame, frameCount indicates the number of currently played frames for (var I = 0; I <20; I ++) {var a = I <= 1? 1: Fibonacci [I-1] + Fibonacci [I-2]; Fibonacci. push (a); arc (, a * 2, a *, 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);}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.