p5.js Collection (1): Cherry Blossoms

Work Link

https://codepen.io/SampleTape/full/Rxbrde/

Main methods

• rect()
• rotate()
• translate()

sketch

Sketch.png

Process decomposition

Initialization: Create a new drawing board

function setup(){ createCanvas(windowWidth, windowHeight); background(255);//Set background color }

1. Draw a rectangle

function setup(){ createCanvas(windowWidth, windowHeight); background(255); } function draw(){ rect(0,-40,160,80);//Draw a rectangle }

2. Draw a pink rectangle without a border

function setup(){ createCanvas(windowWidth, windowHeight); background(255); } function draw(){ noStroke();//no border fill(255, 20, 147);//Pink rect(0,-40,160,80);//Draw a rectangle }

3. Shift the axis to the center of the window

function setup(){ createCanvas(windowWidth, windowHeight); background(255); } function draw(){ translate(windowWidth / 2, windowHeight / 2);//Shift the axis to the center of the window noStroke();//no border fill(255, 20, 147);//Pink rect(0,-40,160,80);//Draw a rectangle }

4. Continue drawing a rectangle after rotating the coordinate axis with the origin as the center of the axis

function setup(){ createCanvas(windowWidth, windowHeight); background(255); } function draw(){ translate(windowWidth / 2, windowHeight / 2);//Shift the axis to the center of the window noStroke();//no border fill(255, 20, 147);//Pink rect(0,-40,160,80);//Draw a rectangle //Be careful: //The middle point on the left side of the rectangle should coincide with the origin of the coordinate axis //The y-parameter of the rectangle moves up half the height of the rectangle rotate(PI * 2 / 5);//Rotate axis 72 DEG rect(0,-40,160,80);//Draw the second rectangle rotate(PI * 2 / 5);//Rotate axis 72 DEG rect(0,-40,160,80);//Draw the third rectangle rotate(PI * 2 / 5);//Rotate axis 72 DEG rect(0,-40,160,80);//Draw the fourth rectangle rotate(PI * 2 / 5);//Rotate axis 72 DEG rect(0,-40,160,80);//Draw the fifth rectangle }

5. Simplify drawing 5 rectangles into a for loop (full code)

function setup(){ createCanvas(windowWidth, windowHeight); background(255); } function draw(){ translate(windowWidth / 2, windowHeight / 2);//Shift the axis to the center of the window noStroke();//no border fill(255, 20, 147);//Pink for(var i = 0; i < 5 ; i++){ rect(0,-40,160,80);//Draw a rectangle rotate(PI * 2 / 5);//Rotate axis 72 DEG } }

This code can be run in the online editor of p5.js
http://alpha.editor.p5js.org

p5.js Online Editor Interface.png

Add new comment

For adding a comment, please log in

Login or create account

0 comments