What's p5.js?

...

In order to understand the examples and to write your own programs, you will be using references, i.e. artefacts that describe a programming language.

...

Every p5.js program consists of setup() and draw() function. Setup() runs when the program starts and it's used to set the initial environment properties, such as the size of the canvas in the browser window. Draw() executes the code inside the block until the program is stopped or noLoop() is called. We will learn more about how functions work in the p5.js Writing our own Functions.

function setup() {
  createCanvas(300,300);
  // setup stuff
}

function draw() {
  // draw stuff
}

...

function setup() {
	createCanvas(300,300);
	noStroke();
}

function draw() {
	background(0);
	fill(210,200,200);
	ellipse(125,150,50,50);
	stroke(150,10,10);
	fill(100,100,90,200);
	beginShape();
 	vertex(50,50);
 	vertex(125,150);
 	vertex(200,50);
 	vertex(200,200);
 	vertex(50,200);
 	vertex(50,50);
	endShape();
}

Exercise 1:

Experiment with the examples by adding or combined new drawing commands (Arc, Point, Triangle, etc.). Look through the references page to find more.