Announcement: The Points-Back Packet
For a limited time only, through the end of your lab/class session on Tuesday October 6th, we are offering you the chance to get some points back on your first exam.
To do this, complete the points-back-packet-1 linked here. You must complete all of the questions in the packet and submit them by the end of your October 6th session to get up to 50% of your lost points back on each exam.”
In other words, this take-home test is not timed. It’s open book, you can take it home, etc. But you are recommended to do it alone by hand first before you consult other references.
More about Arrays
Consider the following program, which draws a star. This star has 10 vertex points, each with 2 values, for a total of 20 data elements.
That’s a lot of variables! Providing this data to a program requires either creating 20 variables or using an array that can somehow store these 20 numbers. In the next example, we group these data elements together in two arrays: one for the x-coordinates and one for the y-coordinates. (Note that we also use the
CLOSE property in
endShape to fix the visual bug.)
That’s tidier, but we can do even better to abstract this code. Notice any patterns? How about the fact that we are counting our way through the array elements? This counting should be an immediate tip-off to use an iterative code structure, like a
for() loop, as shown below.
Now we can do all sorts of tricks. For example, on each frame, we can draw a star in which each point is computed from one of the stored coordinates, to which has been added a random number:
We can also progressively modify these arrays. Here, each point does a “random walk“:
Incidentally, with a little extra work, it’s possible to use the same data to render the star with curves instead of straight lines:
Arrays that Grow
Consider the following sketch. Each time the user clicks, another point is accreted into the background image:
But what if one wanted to have an animated scene? You can’t do that if you don’t refresh the background on every frame. Here’s the beginning of a solution: store the user’s mouse clicks in an array, and draw all of the points each frame:
Looks the same, right? Well, no. Now we can again do all sorts of tricks with the data we are progressively storing. For example, we can draw the points with some animation, and meanwhile change the color of the background:
We can perform computations on these arrays, in order to calculate new information about the collection of user-added points. For example, in the sketch below, we compute the “centroid” or geometric center of the collection by calculating the average X-coordinate and the average Y-coordinate. (The centroid is also known as the center of mass.)
Notice how the centroid is recalculated when the data is progressively modified on-the-fly:
It is possible both to add as well as remove points. The following “drawing program” sketch deletes the last point and inserts a new one, when the number of points exceeds a certain constant. Notice also how the arrays are cleared in
In the next sketch, points are continually added (and removed) when the mouse button is pressed:
It doesn’t take too much more to create some very stimulating experiences. In the next sketch, the distances between neighboring points are progressively exaggerated:
Watch Zach Lieberman discuss drawing with code at the 2015 Eyeo Festival (watch from 8:28 – 16:40):
- push() — adds a new element to an array (at the end)
- pop() — deletes the last element, and provides it to you
- shift() — deletes the first element and shifts the rest down
- unshift() — adds a new element to an array (at the beginning)
- reverse() — reverses the elements in an array
There’s lots more. We therefore also recommend you check out:
- W3Schools Array Reference
- p5.js Reference (see the section on Data)