Example 0: https://editor.p5js.org/skyesoulsearching/sketches/DNcFNKp2r

Example 1: https://editor.p5js.org/skyesoulsearching/sketches/MTeLGNh-Q

The color keeps changing because the fill function, which sets colors used to fill shapes, was set to random.

According to the Reference (https://p5js.org/reference/)

“The setup() function is called once when the program starts. It's used to define initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts. There can only be one setup() function for each program and it shouldn't be called again after its initial execution.”

“Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called.”

Example 2: https://editor.p5js.org/skyesoulsearching/sketches/NhRvKMz1t

I think the circle that moves leaves a trail of past circles because each data point/circle was plotted (sort of like how y=mx+b plots a linear slope). I don't know how to remove the trail. I changed the speed of the circle by changing 1 of the equation "x=x+1" to a larger number. The bigger the number, the higher the speed.

Example 4: https://editor.p5js.org/skyesoulsearching/sketches/61l-rDrA3

I looked at this example (https://editor.p5js.org/[email protected]/sketches/7sFXdJwxA) from p5.js, but I wasn’t sure how to implement that into our example. I have difficulty with making a 2D grid.

Skyline:

https://editor.p5js.org/skyesoulsearching/sketches/CVkYxd2Xo