p5js week 10

Using classes seems hard, so let's do another simple one step by step. Here's what we want to do:

1. make a simple picture
2. put it in the draw method of a class
3. generalize the arguments of the items in the draw method, adding them as properties of those objects
4. use buildArray to produce the objects
5. use forEach to call the draw method on each of the objects

We'll do one together first, then you can do it again with your own simple drawing.

First, we start with some buttered toast.

Now we'll make a class and put this in the draw method so that we can draw it.

Notice that we have to call the constructor once using the “new” keyword with the class name to make an object to draw.

We'll change the position arguments to base them around 0. Then we'll add position properties. We'll use translate and resetMatrix to set the position and restet the matrix so that it's ready for the next thing we draw.

We'll add in a random rotation, like we did before.

Now let's use buildArray to make many of them, then use forEach to draw the objects from the array.

Let's go ahead and make the color of the toast more variable. We'll also make the butter and its position change each time.

Go ahead. Start with the easiest version of this ButteredToast class, then replace the draw method with your own code. Don't forget to rename the class to something appropriate.