Screen Recording 2026-10-05 at 3.09.49 PM.mov
Screen Recording 2026-10-05 at 3.03.24 PM.mov
The Very Long W2 Code vs. the Current Version
This week, I worked on simplifying my W2 self-portrait project by using functions and loops to reduce repetitive code. I was able to cut the code down from 298 lines to 169 lines.
Back in W2, I manually wrote almost everything line by line, which took a really, really long time and resulted in a huge block of code. Now that I know how to use functions to group repeated instructions and loops to repeat patterns more efficiently, I realized that I could make the same project much simpler and more organized.
It honestly felt a little anticlimactic to realize that something I spent so much time manually coding in W2 could be simplified this much. But it was also really interesting to see how much cleaner and more efficient my code has become.
push() and pop() Still Matter
The Version Without push() and pop() That Caused the Result Shown on the Right
Screen Recording 2026-10-05 at 11.11.32 AM.mov
While working on this project, I ran into something that really surprised me. I understood that variables declared inside a user-defined function can have local scope, so I assumed that changes made inside the function would also stay inside that function.
In my original W2 code, I had many rectangles in the background, and I used push() and pop() repeatedly to prevent transformations from affecting other shapes. When I reorganized the code into user-defined functions, I thought I would no longer need push() and pop() because the rotation was happening inside a separate function.
However, when I removed them, I got a very unexpected and slightly terrifying result. I learned that transformations such as rotate() and translate() are not automatically reset when a function ends. A function creates a separate scope for certain variables, but it does not automatically isolate changes to the drawing state.
Therefore, when using transformations such as rotate(), I still need push() before the transformation and pop() afterward to make sure it only affects the shapes I want to transform.
I reorganized my self-portrait by dividing different parts of the drawing into user-defined functions, such as backTiles(), body(), hairFace(), lipsHeart(), and sunglasses(). Instead of keeping all of the drawing code inside draw(), I can now call each function separately, which makes the overall structure much easier to read and organize.
For the background, I created a reusable tiles() function instead of writing the full code for every square. The function takes five parameters: tx and ty control the position of each tile, while r, g, and b control its color. This allows me to reuse the same function many times while creating tiles with different positions and colors.
Inside tiles(), I used translate(tx, ty) to position each tile and rotate(angle) to rotate it. The angle variable is continuously updated in draw() with angle += 0.1, which creates the rotating animation.
Original Version (Left) vs. Current Version (Right)
