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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.