Concept

I was inspired by the scratch pads that I loved drawing on as a child, the hidden gradient background is what influences the use of changing flashing colors. I also wanted to bring elements of childhood by using simple shapes such as stars and circles.

Reference

Highlighted code

//changing colors
background(paletteLerp([
  ['blue', 0.3],
  ['red', 0.6],
  ['yellow', 0.4]
], millis() / 1000 % 1));

I was determined to use the changing colors effect rather than a still color gradient, therefore I used the p5.js reference to learn how to use the paletteLerp() function to rapidly change colors. It was quite difficult to use at first however with lots of trial and error I eventually achieved the result I wanted.

 

How this was made

Starting off with the main element, the stars, I was able to use the for() loop tool successfully to join the circles in a certain way to create the stars pattern. I then moved on to learning how to use the paletteLerp() function to change the color of my background; I was also able to pick the duration of each color and the speed. For the finishing touch, I wanted to further challenge myself by adding smaller circles by combining the nested loop and click feature, this way I was able to add another layer of interactivity to my work. I referred to the p5.js reference to learn how to create the star shape and use the click response.

Reflection

Overall, I am proud of what I have achieved. I was able to play around with the nested loop to create shapes within shapes. In the future, I would like to also experiment with randomness, and how randomness can be used to create slight deviations which gives some sort of a shaking effect.

 

 

Reading Reflection

text