Class began with an online quiz that referenced the overview of p5.js from the end of Class 12, and the coding introduction from Class 13. Ten of you did the quiz during class, so we reviewed the answers after you completed it.
This slide demonstrates the use of the circle() object with solid colors via fill() and semi-transparent colors via the optional 4th parameter in fill()—
This slide gives an example of how you can create an illusion of a complex 3D object using 2D objects, in this case one quad() with two triangle() objects. Notice how each one has its own fill() color—
Within the Chrome browser, you can get a handy color picker to dynamically select any color and copy / paste the RGB values into stroke() or fill()—
The arc() object has 6 parameters, and for start and stop, you can use built-in variable names (colored pink below) that reference PI—
This is from page 24 of the book. Radians and degrees are two ways to measure an angle. Degrees move around the circle from 0 to 360, while radi- ans measure the angles in relation to pi, from 0 to approximately 6.28—
The code below shows how you need numbers within parenthesis with the use of radians()—
However it’s easier and more intuitive to use degrees, but you need to remember to include angleMode(DEGREES) within your setup() block—
Below is the same size arc simulating a Pac-Man (note the start and stop numbers for each “mouth”)—
You can make a more complex shape using the vertex() object, but you need to remember to include beginShape() before each of the vertex(x, y) points and endShape() at the end—
Here’s a simple way to create a grid that references the system variables for canvas width and canvas height, dividing the overall size by either 2 or 4 to get 4 rows and 4 columns—
In preparation for your 2D Assignment 6 sketch—
Your sketch needs to include at least 3 of the “2D Primitives” pictured below and at least 3 attributes that affect one or more of your shapes—
Leave a Reply