Page Comparison

What's p5.js?

p5.js is JavaScript (JS) library, which is used for creating graphic and interactive experiences for artists and developers. The code is written directly in JS, and it gets executed like any other JS file that is included on a website. It requires an empty HTML file that links to the p5.js library and your sketch file in the header. 

...

For the purpose of the course we are going to use Openprocessing.org. It's an online platform, where anyone can create and share visual-based, open source projects. The big advantage of open processing is that the users can like and comment other sketches, follow other users and create themed collections. 

...

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

Basic Sketch

Every p5.js programm consists of setup() and draw() function. Setup() runs when the program starts and it is used to set the initial environment properties. Draw() executes the code inside the block until the program is stopped or noLoop() is called.

function setup() {
  // setup stuff
}

function draw() {
  // draw stuff
}

Example 1 : Graphic output

This example shows how to draw graphics directly to an output window. 

Image Removed

function setup(){
	createCanvas(300,300); // define window size 
	stroke(255,255,255); // define line colour 
}

function draw() {
	background(0); // define background colour 
	line(100,10,100,150); // draw a line 
	line(150,10,150,200);
	line(200,10,200,250);
	fill(0,0,0); // define fill colour 
	strokeWeight(5); // line thickness 
	ellipse(100,150,50,50); // draw an ellipse
	ellipse(150,200,50,50); // draw an  ellipse
	noFill(); // turn of fill
	ellipse(200,250,50,50); // draw an  ellipse
}

Example 2 : Complex Forms

This example shows you how to change line attributes and how to draw more complex shapes.

Image Removed

function setup() {
	createCanvas(300,300); // define window size 
	stroke(255); // define line colour 
	strokeWeight(8); // line thickness
	strokeJoin(MITER); // this is the default
 	//strokeJoin(BEVEL);
 	//strokeJoin(ROUND);
	noFill();
}

function draw() {
	background(0); // define background colour 
	beginShape();
 	vertex(50,50);
 	vertex(200,50);
 	vertex(200,200);
 	vertex(50,200);
 	vertex(50,100);
 	vertex(150,100);
 	vertex(150,150);
	endShape();
}

Example 3 : Colors and Transparency

Colours are defined with 3 values, the so-called RGB values. The colour consists of three components (red + green + blue) and is determined by the additive color mixing. The value of a colour component can range from 0-255.

This range of numbers results from the fact that each color value represents an 8-bit value. Therefore, we also speak of true color with 24-bit (3 * 8-bit = RGB).

Forms can also be transparent, using the alpha channel. The colour is simply extended by a 4th parameter (RGBA). Smaller alpha value are more transparent than greater ones.

Image Removed

...

language

...

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:

Expand and modify the examples with new or combined drawing commands (Arc, Point, Triangle, etc.).