Drawing I

Canvas

First we need to create a canvas, an area we can draw upon. To do this we add the createCanvas command into our setup function. All sizes in p5js are always pixel sizes:

createCanvas(width:number, height:number); 
function setup() {
  createCanvas(400, 400);
}

If you finish a command, don't forget the semicolon.

Background

In the begining our canvas is blank. But we can give our full canvas a uniform fill color. By adding the background command to the draw function:

background(fill:color); 
function draw() {
  background(220);
}

Different to the createCanvas command, we can use a variety of inputs to define the color (see next section for a color overview).

Colors

In p5js we can define colors in a variety of different forms:

  1. Grayscale: one number from 255 (white) to 0 (black)
background(150);
  1. Red, Green & Blue (RGB): three numbers from 0 to 255
background(255, 0, 0);
  1. CSS Colors: name of the color
background('red');

Notice the single quotes around the word 'red'. Whenever we use text as a value (string) for a command, we need to set single (or double) quotes around it. Otherwise JavaScript will think red is also a command or variable.

  1. Hexadecimal RGB: hex text
background('#ff0000');
  1. RGB + Alpha (transparency): rgba as a text, alpha is between 0 and 1
background('rgba(255,0,0,0.5)');

JavaScript uses english numbers, therefore a point is used as a decimal separator.
German: 0,5 > English: 0.5

Those are the things we will use, but there are even more possibilites to define colors, see here.

Shapes

Or as the p5js reference calls them 2D primitives. All those shapes are created in a coordinate system. The origin (0/0) of that coordinate system is in the upper left corner of our canvas. Units as always in pixels.

Point

point(x:number, y:number); 
point(20, 20);

A point has no radius. To increase the size of a point, set a higher strokeWeight (see below).

Line

line(x1:number, y1:number, x2:number, y2:number); 
line(10, 10, 40, 40);

Ellipse

ellipse(x:number, y:number, width:number, height:number); 
ellipse(20, 20, 5, 10);

x and y describe the center of the ellipse and circle

Circle

circle(x:number, y:number, diameter:number); 
circle(20, 20, 5);

Rectangle

rect(x:number, y:number, width:number, height:number); 
rect(10, 10, 40, 20);

Square

square(x:number, y:number, size:number); 
square(10, 10, 40);

/lectures/2d/drawing/shapes/sketch.jsView on GitHub

Fills & Strokes

Code in any programming language is always interpreted from top to bottom. p5js has a default color setting: fill and strokes are black. We can change the fill and stroke at any time. Everything painted after the fill or stroke command (top to bottom) is painted in the new color.

fill(fill:color); 
fill(255, 0, 0);

stroke and fill take the same color parameters as the background command

stroke(stroke:color); 
stroke(255, 0, 0);

Besides colors we can also modify the stroke width of the shapes we draw:

strokeWeight(weight:number); 
strokeWeight(5);

https://...View on GitHub

Arcs

A bit more advanced shape is the arc:

arc(x:number, y:number, width:number, height:number, startAngle:number, endAngle:number, arcMode:OPEN, PIE, CHORD); 
arc(100, 100, 50, 50, 0, Math.PI, OPEN);

The startAngle and endAngle are provided in rad not degrees. 360 degrees are 2 * Math.PI. So an easy way to work with degrees, is to simply convert it:
Math.PI / 180 * YOUR_ANGLE.

/lectures/2d/drawing/arc/sketch.jsView on GitHub

Task: Abstract Art

Only use the commands we have learned so far, to create an abstract piece of art. For inspiration see the sketch below, or checkout the art section on the inspiration page.

Inspiration: Hilma af Klint

/lectures/2d/drawing/klint/sketch.jsView on GitHub

Back to top