Author: Maryam Alremeithi

For my concept, the repeated shapes in the attached PDFs reminded me of wallpapers and patterned backgrounds. Given that it’s February, I decided to create a static heart wallpaper using a grid of mini hearts. When the hearts are pressed, the background turns red and the hearts begin to move.

I initially started by coding the static wallpaper, but quickly realized that if I wanted to incorporate animation, I needed to plan for it early on. I also added a mouse press function so that I could toggle between the still wallpaper and the moving hearts.

For the hearts, I made them using two ellipses and a triangle, and I used nested loops to place the hearts in a grid, which created the wallpaper effect.

To add animation, I created a variable that updates every frame to move the hearts together. When the hearts are moving, this value added to their positions, which shifts the grid. I also used a boolean variable with the if statements to control when the animation occurs.

if (moving) {
    heartshift += speed;
    if (heartshift > 15 || heartshift < -15) {
      speed *= -1;
    }
  }

I’m proud of this part of my code because it controls the movement of the hearts. When the variable (moving) is true, (heartshift) updates every frame, which make the hearts move. And by adding the conditional statement, the speed reverses when the movement reaches the limit(15), so the hearts go back and forth instead of only moving one direction.

Overall, I’m happy with the sketch, and I enjoyed experimenting with different variables to see how they affect the hearts. The most challenging part was combining the animation with the nested loops and learning how to incorporate them with the boolean variable and if statements all together. For future ideas, I would like to add more interactions, or make it more intricate.

Reflection Response

Casey’s talk made a great point about randomness vs. order and the idea of losing total control. Reflecting on my past work, especially my heart wallpaper sketch, everything is very structured and controlled. Casey’s talk made me realize that adding small random elements in my sketch, like changes in color or even the movement of the hearts, could make the sketch feel less rigid. I could have created a static wallpaper of mini hearts and then, when pressed, made the hearts move randomly, but I think it is challenging to balance the randomness of the movement, given how rigid the static grid is when the sketch is pressed again.

For my self-portrait, I decided to create a dancing flower instead of a literal portrait. I initially attempted to work on an actual self-portrait, but with the skills I have so far, it kept looking unrealistic, and my hair ended up looking like a mushroom (no, literally). Rather than forcing a mushroom-headed portrait, I chose to represent myself through a dancing flower. This allowed me to focus on practicing primitive shapes, simple animation, and overall composition.

The sketch shows a dancing flower in a simple grass field. The petals include four main petals and diagonal petals placed around the corners of the flower. I kept the background minimal, and focused mostly on the flower itself. I also tried to make the petals feel slightly more three-dimensional by changing their colors and shades, and I added a subtle border around the center of the flower to enhance that effect, but I don’t think it’s noticeable.

fill(245, 120, 160); //background petals color
 angleMode(DEGREES);
 rotate(45);
 ellipse(270 + Petals, -59 - Petals, 35, 55); //right base
 ellipse(270 - Petals, -59 - Petals, 35, 55); //right base
 ellipse(270 + Petals, -59 + Petals, 35, 55); //right top petals
 resetMatrix();
 rotate(145);
 ellipse(-60 + Petals, -225 - Petals, 35, 55); //left base
 ellipse(-60 - Petals, -225 - Petals, 35, 55); //left base
 ellipse(-60 + Petals, -220 + Petals, 35, 55); //left top petals

 

I’m proud of this section of my code because the most challenging part of the sketch was creating the diagonal petals. I learned that in p5.js, shapes are rotated by rotating the canvas itself rather than rotating individual ellipses. I figured out how to use angleMode(DEGREES) and rotate() by referencing this forum post: https://forum.code.org/t/ellipse-rotate-on-an-axis/35650 .

After that, I just experimented and adjusted the values manually to place each petal correctly. I also searched online to learn how to use resetMatrix(), since each group of petals needed a different rotation angle. Honestly, this part involved a lot of trial and error, but I got to understand how transformations work.

Embedded sketch:

I mainly used the concepts I learned in class, except for the diagonal petals, which I learned to do using the forum post I referenced earlier. I also google-searched how to reset the rotation so that I could adjust each group of petals seperately.

Overall, this assignment was a nice introduction to how p5.js works and how to use code to create and manipulate visual elements. While working on this assignment, I realized that there is more than one way to create something, and that sometimes the process involves a lot of trial and error. I’m excited to see what I come up with next in my sketches and how I (hopefully) continue to improve.