For this updated version, I have reorganised the functions() and tried to keep the draw() as clean as possible. I have also added mousePressed(), so when mouse is pressed, a random colour will be filled in the rectangles.
To start from the logic from beginning, I have in total created 5 functions():
drawRect() : for drawing the first set of rectangles repetitively
drawRect2() : for drawing the second set of rectangles repetitively
moveRect(): to make the rectangles move
mousePressed(): to fill the colour of the rectangles when mouse is pressed
writing(): to write the text "ETERNITY" at the end
One main feature I used for this project is the recursion concept I saw from The Coding Tain challenge #77 by Daniel Shiffman when I were exploring calling functions. Basically, a recursive function is a function defined according to itself. It's a really convenient way to create patterns compare to using a for loop, so every time it draws a rectangle, it calls itself, which could result in an infinite loop. Thus in this case, my exit condition is when x position of the rectangle is smaller than 1, it stops drawing. And by multiplying 0.9 to the positions and the length of the width of the rectangle, I got the shrinking size working!
There are a lot of other things I learnt during the process, for example, the push() and pop() allows you to constrain certain arguments in a function. I have used it for drawing the second sets of rectangles, to constrain that the translate and rotate only applies to the rectangles but not anything else.
Here attached is the entire code for your reference: https://editor.p5js.org/yz7720/sketches/CDSXJPtOr
ความคิดเห็น