Page Comparison

deutsche Version

Installing Processing

Processing is a programming environment (Integrated development environment IDE) based on the programming language Java. Processing is Open Source and you can download it for free here. Solutions to common installation problems can be found here. 

The Processing IDE (Integrated development environment)

The Processing IDE interface consists of three main parts. First is the text editor, this is where we 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. 

p5.js based on the core principles of Processing, but there are some differences in the language syntax. 

Using p5.js

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. 

Alternative Editors

p5.js has its own web-based editor which compiles the code on the go and displays it directly in the browser.

Processing IDE, which has to be put in p5.js mode in order to compile the JS code. It consists of three main parts. 

1. The text editor, where you can write (or paste in)

...

1. the code.

...

2. Message area and

...

1. Console/

...

1. Errors window. The Message

...

1. area which displays the errors and is useful to see if you e.g., miss a semicolon. The Console/Errors window displays warnings, but can be also used to output text for debugging.
2. The final part is the Display window. This is where

...

1. you can see the results of our code after it is compiled, by pressing the Run button in the upper left corner. 

...

Image Removed

...

Image Added

The third option is to use one of the text editors e.g. Sublime, Atom, Visual Studio Code and run p5.js directly on your computer. For that you would need to download a complete p5.js library and run the code on a local server.

Examples

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. You can find further drawing functions Processing reference page ( link ). 

function setup(){
	createCanvas(300,300); // define window size 
 background(0	stroke(255,255,255); // define backgroundline colour 
 stroke(255,255,255	
}
function draw() {
	background(0); // define linebackground 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.

function setup() {
	createCanvas(300,300); // define window size 
 background(0); // define background colour 
	stroke(255); // define line colour 
 	strokeWeight(8); // line thickness
 	strokeJoin(MITER); // this is the default
 	//strokeJoin(BEVEL);
 	//strokeJoin(ROUND);
	noFill();
 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 : Colors and transparencyTransparency

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.

...

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.

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

function backgrounddraw(0); {
noStroke	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.).

...