This Week’s Keywords: #p5js #Conditionals #Colors #Transformations
I started by moving the code from setup() into draw() or into new functions, depending on where each part belonged. While I was moving things around, my portrait sometimes turned into unexpected shapes, and it took a while to get everything back to normal. (Honestly, I liked some of those accidents—they looked like modern art!)
I had not planned to put the background tiles in a separate function. But as I reorganized the code, it ended up making sense to create a new function and place it at the bottom. I also did not realize that one noStroke() could affect the code that followed it, so my background code had become much longer than it needed to be. I cleaned it up by removing some unnecessary lines.
I referred to this week’s Transformations video tutorials a lot. This made the background code long again, but I used push() and pop() for each tile so that the tiles would not affect one another and each one could rotate around its own center. I’m sure there is a shorter way to do this, since lines 118–296 repeat the same pattern!
I used the “Click” section on pages 68–71 of the textbook and the video on Booleans (3.4) as references. Just like last time, I spent a lot of time adjusting the positions of the circles that make up the lips. Is there really no way to just drag them into place? I also wanted to add a stroke around the outside of the heart, but the two circles and triangle each got their own outlines, so I left the stroke off.
