Author: Nouf_Abbasi

I tried creating flower objects. To do that I would need to to arrange a few circles around a radius and to do that I followed the instructions here, I also tried to change the transparency of the petals for each instance and used this function
self.squareColor = color(clr);
self.squareColor.setAlpha(flwr_opacity)


I thought that it might be interesting to try to create flowers with rectangles that are rotated around its origin, but I realized that I would need to translate the shape to make sure that it stayed in place. I used 2 rectangles to create the “flowers” and then used the rotation code to make the “flower rotate. when I created more “flowers” I experiment with values in the rotation script but wasn’t able to make the other ones rotate in place. (update, after the class about translation I know why this is happening, push and pop would probably help here) for some reason, the shapes moved in circles rather than rotate around themselves like I wanted, however, it looked interesting and kind of resembled a roller coaster.

I ended up only having 1 on the screen but continuously increase the size. and once it reaches a certain size a new color starts to expand.

but I wanted the previous colors to continue expanding when new colors are added so I experiment with loops.
this kind of worked but constantly rebuilt all the elements in the array which made it slow. But it reminded me of clouds or cotton candy.

I also wanted to explore cases where it would be useful to create instances of an object multiple times and decided to create an interaction where when the user clicks the canvas a water drop is created and the canvas fills up with water.

some of the challenges I faces in included:
I wanted to create a water drop class that would have the properties of a single drop (speed, direction …) and a water class that created instances of the drop object. However, I had trouble displayed the water drop as it fill (it would instantly appeared at the bottom. I assume that this might have to do with the fact that the water function was called in the draw(which keeps updating) and the drop.display was called in the water class in a method that didn’t update for every y change.
I also wanted to inverse the background and water colors once the canvas filled up (so that the screen can be filled up with drops of a different color) but had trouble with that.

For this project, we were meant to experiment with using for and while loops.
I really liked the dots that the professor created in class using nested for loops

So I experimented with using for loops to layer shapes with different colors under the dots.


This reminded me of lego pieces, but I though it might be interesting for the colors of the shapes to be different based on their position on the canvas. I decided to change the shapes to mountains (triangles) and let shapes at the back to be lighter and the ones at the front to be darker to add depth.


The triangles overlapped each other in a way that I didn’t intend, so I decided to add a rectangle that stretched till the end of the page under them to mimic the ground so it would look more like a landscape.
This took a bit of time since I wasn’t sure which values would align the rectangles to the bottom of the triangle.


This is how it looked once I got that step done:


At this point, they didn’t look like how I wanted the mountains to look like but I felt like they might look more like houses. So I changed the color of the base and decided that they do look better as houses so I continued with that.

I changed the colors of the bases again to a color that matched the housetops and then decided to also let the color of the bases change based on their position.
I also started experimenting with the repeating dots and the numbers in the 4 loop and realized that adding a value that continuously increments to the x and y position skewed them creating a diagonal line of circles that is shorted at some parts and longer at others. I made the dots really small and that resulted in rain like lines.

  fill("#ddd7ff")
  stroke("#ddd7ff")

  for (let row = 10; row < 400; row+= 20)
    {
    for (let col = 10; col < 400; col+= 20)
      {
      ellipse(row+b, col+b, 0, 0);
      }
      b++;
    }

This is the final result:

link: p5js project

challenges and improvements:

I think it would’ve been interesting to add rain that continuously poured but I didn’t manage to figure out how to do that. I think would also be interesting to experiment with different colors, where if the person generated a village at night the colors would be darker vs if generated in the morning they would be lighter. Maybe there is a get time function that I could use for that.
I’d also like to experiment with creating patterns using lines, I think that this might be interesting.

I started by experimenting with the shapes and trying out what I could do with them. I went along with what I thought looked good and came up with this:

I then looked at the previous self-portraits done by students in this course and in the p5js website. I made a list of things I found cool and wanted to incorporate or explore. This is my list:

• try automating something
• add a thing that interacts with mouse movements
• try an interesting style
• pick visually pleasing colors
• Rounded edges

I first tried to see if I can generate hair within a certain range automatically. I used a for loop that creates arcs and used the random function to generate numbers within a certain X and Y range, I also used the random number to pick an index from a list of colors so that the hair is in different colors. I tried a few strips of hair to see what changing different things would do.

In class when we were playing with moving ellipses I used that for loop and while experimenting with generating many circles at random places this happened and thought it looked similar to worn-out old pictures where the corners have changed color/faded like this:


I didn’t like the way the hair looked so I didn’t end up using that, and started sketching characters in different styles and noted things I liked about each one. I picked a color palette that felt vintage and faded.

I implemented the sketch in p5js and experimented with hair/no hair and decided without hair (I might try to implement a similar one with hair, but I didn’t like it here).

I wanted to add some animation/mouse interaction so I thought I might let it close its eyes if the mouse passes over them, but after adding the background (the for loop generated ellipses) the mode felt eerie so I decided to let it open its eyes when the mouse passes over its eyes, the background darkens, and the mouth opens.

reflection:
I really enjoyed working on this project and exploring p5js.
I think it would be interesting to explore allowing the user to alter the character (add hair? change eye size? color?)
it would also be interesting to experiment with other styles.