Week 3 - Drawing in 2D Week 3 @ Material Week_3. pdf Lesson 2.1 - Drawing Functions RGB Colors: V Introduction: There are 16, 777, 216 RGB color combinations. RGB 255, 0, 0 255, 255, 0 255, 255, 255 R 255, 0, 255 0, 255, 0 0, 0, 255 G B 255, 255, 0 - 0, 0, 0 We can have 0 - 255 values for a channel of RGB which contains 8 bits of information. Color Functions : In P5.js, it is possible to change the shape's color via: . background ( r , g , b , [alpha]) · fill(r, g, b, [alpha]) · noFill() · stroke(r, g, b, [alpha] ) Week 3 - Drawing in 2D 1
· noStroke () · strokeweight () 7 Program Flow: Program execution in P5.js is rendering frames in a repetitive manner : P5.JS PROGRAM FLOW setup() draw() Within the specific function, the commands are executed per line. Shapes : In P5.js, it is possible to create different geometric and complex shapes via: v 2D Primitives : · rect(x, y, width, height) · ellipse(x, y, width, height) · Line (x1, y1, x2, y2) · point (x, y) . triangle (x1, y1, x2, y2, x3, y3) Week 3 - Drawing in 2D 2
Vertex : //The vertex function connects multiple points with a line beginShape(//POINTS/LINES/TRIANGLES_STRIP_FAN/QUAD_STRIP/TESS); vertex(x, y) vertex(x, y) vertex(x, y) endShape(//CLOSE) Lesson 2.2 - The Console and Debugging Console and Debugging: Console: A powerful tool that allows us to see what is going on in your program under the hood Week 3 - Drawing in 2D 3