Differences

This shows you the differences between two versions of the page.

--- p5js-week-10 [2022/04/01 00:51] – renick
+++ p5js-week-10 [2023/06/29 22:50] (current) – reina.chen
@@ Line 1: / Line 1: @@
 ====== p5js week 10 ======
-===== JavaScript =====
+{{:buttered-toast-1308351657802.jpg?600|}}
+It usually takes butter to make good toast. In our case, practice will be the butter for our toast.
+Before we practice, though, we want to spend a little time working on our wiki pages. Work with the teacher to make some improvements to your wiki page. After that, come back to this practice!
+Using classes seems hard, so let's do another simple one step by step. Here's what we want to do:
+  - make a simple picture
+  - put it in the draw method of a class
+  - generalize the arguments of the items in the draw method, adding them as properties of those objects
+  - use buildArray to produce the objects
+  - 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.
+===== make a simple picture =====
+First, we start with some buttered toast.
+<HTML>
+<iframe src="https://editor.p5js.org/renick/sketches/7lhJSR7bd" width=99% height=800></iframe>
+</HTML>
+===== put it in the draw method of a class =====
+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 <color black/yellow>"new"</color> keyword with the class name to make an object to draw.
+<HTML>
+<iframe src="https://editor.p5js.org/renick/sketches/0TvPmHzy7" width=99% height=800></iframe>
+</HTML>
+===== generalize the arguments of the items in the draw method, adding them as properties of those objects =====
+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.
+<HTML>
+<iframe src="https://editor.p5js.org/renick/sketches/kcQU2HH_I" width=99% height=800></iframe>
+</HTML>
+===== use buildArrayand forEach to make and draw them =====
+Now let's use buildArray to make many of them, then use forEach to draw the objects from the array.
+<HTML>
+<iframe src="https://editor.p5js.org/renick/sketches/Km6WAp_hn" width=99% height=800></iframe>
+</HTML>
+===== a few more changes =====
+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.
+<HTML>
+<iframe src="https://editor.p5js.org/renick/sketches/U_IZbfP8D" width=99% height=800></iframe>
+</HTML>
+===== now it's your turn... =====
+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. You'll need to change the name in the place where you call the constructor, too (hint: look for the new keyword).
+Remember, these are the instructions from last time. Can you make a drawing that does the following?
+  - draw an animal, plant, or a complicated shape from your imagination
+  - there should be many different versions of it, like different sizes and different colors
+  - make a class to draw it
+  - use buildArray to fill an array of objects from your class; try to make 100 or more!
+  - use filter to change your drawing in some way
+When you're done, be sure to put it on the wiki!
-  - if statement 1