Shapes Border, Stroke, & Fill Basic Geometry

Shapes Border, Stroke, & Fill Basic Geometry

fill(red,green,blue);
fill(red,green,blue); Anchor point
Anchor point
Sets the filling color for next shape to draw
Sets the filling color for next shape to draw
0-255.
0-255.
noFill();
noFill();
Disables filling for the next shape.
Disables filling for the next shape.
stroke(Red,Green,Blue);
stroke(Red,Green,Blue);
Sets the stroke/border color for next shape
Sets the stroke/border color for next shape
to draw 0-255.
to draw 0-255. ellipse(x,y, w,h);
ellipse(x,y, w,h); noStroke();
noStroke(); Draws an ellipse centered in positiion (x,y)
Draws an ellipse centered in positiion (x,y) Disables border for the next shape as well
Disables border for the next shape as well and with size “width”(w) and “height”(h).
and with size “width”(w) and “height”(h). as lines.
as lines.

Coordinate System
Coordinate System

rect(x, y, w, h);
rect(x, y, w, h);
Draws a rect anchored at the top left
Draws a rect anchored at the top left
corner, in position (x, y) and with a size
corner, in position (x, y) and with a size
“width” (w) and “height” (h).
“width” (w) and “height” (h).

line(x1, y1, x2, y2);

line(x1, y1, x2, y2);
Draws a line from (x1, y1) to (x2, y2)
Draws a line from (x1, y1) to (x2, y2)

Top left corner of each sketch is the (0,0)

Top left corner of each sketch is the (0,0)
point. That axis changes when we make
point. That axis changes when we make use of the translate() function.
use of the translate() function.
Other shapes
Other shapes
point(x1, y1);
Minimum measurement unit in a computer point(x1, y1); Minimum measurement unit in a computer
screen is a Pixel. triangle(x1, y1, x2, y2,
screen is a Pixel. triangle(x1, y1, x2, y2,
x3, y3);
x3, y3);
quad(x1, y1, x2, y2, x3,
quad(x1, y1, x2, y2, x3,
y3, x4, y4);
y3, x4, y4);