Drawing in P5

Let there be line!
[js]
function setup() {
line(10, 10, 40, 60);
}
[/js]
Run, commands, syntax, parameters / arguments, typography, non alphanumeric characters, parenthesis vs. brackets, semicolon, coordinates…

 

Canvas
[js]
createCanvas(800, 600);
background (255, 255, 255);
[/js]
 

How do colors work?

2D Primitives
[js]
point(300, 300);
triangle(10, 20, 50, 200, 200, 100);
[/js]
Make it isosceles!
Make it rectangle!

Quadrilateral
[js]
quad(10, 10, 120, 20, 100, 150, 10, 100);
[/js]
Make a square!
Make a butterfly!

Rectangle
[js]rect(100, 100, 200, 100);[/js]
Make a square!
Center it!

Ellipse
[js]
ellipse(300, 200, 300, 200);
[/js]
How does it work? Check the Processing reference manual
Inscribe the circle in the canvas!

Comments
[js]
//why comments
/*
Because they make you code readable.
(O_o)
*/
[/js]
 

Attributes
[js]strokeWeight(4);[/js]

Camelback convention. keepItInMind.
Processing is case sensitive strokeWeight and strokeweight are not the same.

Pen state

[js]
createCanvas(500, 500);
background (255, 255, 255);
line(10, 10, 360, 50);
stroke(255, 0, 0);
line(10, 30, 360, 70);
[/js]
The state of your pen and your canvas remains the same until you change it.
If you don’t touch it, processing uses the default.

Colors
[js]
//try this
background (255, 255, 255);
//and then try this
//background (0, 0, 0);
[/js]
Red green blue 0-255.
Make it red!
Try the color picker!

[js]

strokeWeight(4);
stroke(255, 0, 0);
//noStroke();
fill(0, 255, 0);
//noFill()
triangle(10, 20, 50, 200, 200, 100);
[/js]
Ok, you are an artist now. Reproduce the Mondrian!

 

Transparency
[js]
createCanvas(500,500);
background (255, 255, 255);
smooth();
noStroke();
fill(255,0,0);
rect(100, 100, 100, 100);
fill(0,0,255,127); //255/2
rect(150, 150, 100, 100);
[/js]
Also known as alpha channel.

 

Drawing mode
Sometimes you want to draw a circle from the top left corner or a square from the center. Here’s how to do it:

[js]
createCanvas(500,500);
rectMode(CENTER);
rect(35, 35, 50, 50);
rectMode(CORNER);
fill(102);
rect(35, 35, 50, 50);
[/js]

[js]
createCanvas(500,500);
ellipseMode(CENTER);
ellipse(35, 35, 50, 50);
ellipseMode(CORNER);
fill(102);
ellipse(35, 35, 50, 50);
[/js]

 

Vertex
You can use this combo to draw any polygon specifying the vertexes.

[js]
createCanvas(500,500);
//remember to specify a noFill() if you don’t want a fill
beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);
//if you don’t specify CLOSE the outline will left open
[/js]

Curves
curveVertex is the easiest way to draw continuous curves. It works like vertex (begin, points, end).

[js]
noFill();
beginShape();
curveVertex(84, 91);
curveVertex(84, 91);
curveVertex(68, 19);
curveVertex(21, 17);
curveVertex(32, 100);
curveVertex(32, 100);
endShape();
[/js]

Arcs
[js]
createCanvas(500,500);
background (255, 255, 255);
smooth();
fill(142, 199, 242);
arc(150, 150, 300, 300, 0, PI/2);
[/js]

The beginning and the end are a little tricky.
Remember: 0 is center right, 2*PI is the full circle. PI half circle. PI/2 a quarter etc…

Or just use radians(angleindegrees); to convert:

[js]
arc(150, 150, 300, 300, radians(180), radians(360) );
[/js]

Draw a pacman!
Draw a smiley face!

p5js.org is the manual

Always check the examples

Always consult keep the reference open

Posted in