Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
| p5js-week-05 [2023/06/26 00:24] – reina.chen | p5js-week-05 [2023/07/29 23:42] (current) – renick | ||
|---|---|---|---|
| Line 314: | Line 314: | ||
| That's also cool, right? Using buildArray and an arrow function, it became very easy to make someColors. | That's also cool, right? Using buildArray and an arrow function, it became very easy to make someColors. | ||
| + | |||
| + | < | ||
| + | <iframe src=" | ||
| + | </ | ||
| ====== p5js ====== | ====== p5js ====== | ||
| Line 351: | Line 355: | ||
| </ | </ | ||
| - | First, you call the beginShape function. Then you give a list of vertices (vertices is the plural of vertex). A vertex is a point, and we describe it with arguments for x position and y position. When you have described all of the points, you call the endShape function. You can use as many vertices as you want. These shapes have four, but you can have three, five, or as many as you want. | + | First, you call the beginShape function. Then you give a list of vertices (vertices is the plural of vertex). A vertex is a point, and we describe it with arguments for x position and y position. When you have described all of the points, you call the <color black/ |
| If you use CLOSE as the argument to endShape, p5js will automatically connect the last point to the first point and fill the shape according to the current state of fill; that means how it is filled depends on the last time you called the fill function, just like for rect or ellipse. If you don't use CLOSE, it **will not** connect the last point to the first point with a line. | If you use CLOSE as the argument to endShape, p5js will automatically connect the last point to the first point and fill the shape according to the current state of fill; that means how it is filled depends on the last time you called the fill function, just like for rect or ellipse. If you don't use CLOSE, it **will not** connect the last point to the first point with a line. | ||
| Line 367: | Line 371: | ||
| Notice how the scaleFactor argument can be used to make the shape bigger or smaller. In the function call, try changing scaleFactor from 1 to 2, and then to 5. Also try changing the other arguments and see what happens. | Notice how the scaleFactor argument can be used to make the shape bigger or smaller. In the function call, try changing scaleFactor from 1 to 2, and then to 5. Also try changing the other arguments and see what happens. | ||
| - | Instead of adding the moveX and moveY arguments to the positions of the vertices, we could have used translate. You might want to rewrite this using translate to see if you understand. | + | Instead of adding the moveX and moveY arguments to the positions of the vertices, we could have used <color black/ |
| Actually, there' | Actually, there' | ||
| Line 391: | Line 395: | ||
| Try to use these techniques to make a p5js drawing which has 100 or more pieces of Terrific Toast. | Try to use these techniques to make a p5js drawing which has 100 or more pieces of Terrific Toast. | ||
| - | ====== your NEW drawings ====== | + | ====== your NEW drawings |
| Let's start new drawings. Make a canvas that is 1800 wide and 900 tall. I want you to fill it with either: | Let's start new drawings. Make a canvas that is 1800 wide and 900 tall. I want you to fill it with either: | ||