Animation with p5.js

For this assignment, I had to incorporate the following:

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

This sketch shows the sun and changes in the color of the sky as the sun sets. The yellow circle (the sun) is my object that is controlled by the mouse. The sun moves horizontally across the screen in sync with the mouse. The background in the sketch represents the sunset and changes over time. As the sun moves along the x axis it is setting, causing the sky to get darker (i.e) the background changes from blue to black. The background is also controlled by the mouse.

Stages of the sun and sky as the sun is setting:

Screen Shot 2015-09-14 at 5.29.32 PM





Screen Shot 2015-09-14 at 5.29.39 PM





Screen Shot 2015-09-14 at 5.29.43 PM

Here is my sunrise/sunset sketch.

I created a second sketch to showcase with use of the random variable and creating my own variables. When any key is pressed the background changes to black and the pattern repeats. The dimensions of the triangles are randomly generated. The sketch can be found here.


Leave a Reply

Your email address will not be published.