PFVA:001 – Intro & p5.js Basics

Inspiration

Golan Levin brings up a couple of important ideas that are related to the course. I also recommend you to go through some of the other great talks from the Resonate Festival video archive.

Another piece of inspiration for the beginning of the course comes from Bret Victor.

Today’s Artists

p5.js Basics

Previous years, I have taught this course using Processing, but decided now to switch this course to p5.js.

p5.js is a JavaScript library that brings many of the familiar Processing functions to JavaScript. Native JavaScript and various libraries allow you to do many of the things you would do in Processing, but using p5.js is a nice stepping stone to learning how to write JavaScript, since the structure will be familiar from Processing.

Why p5.js?

  • Runs on the browser so all operating systems are supported
  • A little bit softer landing to doing JavaScript, specifically for visual artists
  • p5.js was designed specifically for artists, designers and education

Before We Start

There are two very essential websites you need:

  • The p5.js Reference – Tells you what you can do with the Processing language and how you should do it
  • Google – Programming consists mainly of googling. (Unfortunately, Processing is such a generic term that you need to use some pro-googling skills to find useful  answers)

How To Setup p5j5?

There is no separate application (IDE) where you would write your code and that would also run the application like in Processing. You can use any text editor to write the code and then see the results in your browser. The ps.j5 team is working on an online editor, but it doesn’t always work so great.

Here are some online editor options:

  • p5js Web Editor – The official p5.js Web Editor.
  • OpenProcessing – OpenProcessing already setup to run p5j5. Probably the easiest place to start with. We also have our own OpenProcessing class for this course.
  • CodePen – CodePen is really popular with people working with JavaScript for sharing code. Fairly easy to setup for p5js.

Or if you are really serious about starting to write JavaScript code. Use one of the many free text editors designed for coders. Go through this tutorial on how to setup a text editor for p5.js on your own computer..

Drawing Simple Shapes

The p5.js Reference is going to be your best friend when working with Processing. It will tell you what you can do with the language and how you should do it. So let’s start with the very basics. We want to see and draw something, we will talk about the different concepts of programming when we run into them. Let’s just get something showing up on the screen.

p5.js always requires two functions to work. The setup() and draw(). We will go through them in more detail later

function setup() {
  
}

function draw() {
  
}

createCanvas() will allow you to change the size of the canvas you are working on. You need to define the width and height inside the parentheses. Try out some different sizes. The semicolon ‘;’ at the end of the line tells the program that it is the end of a specific instruction. Just like the period ‘.’ in English marks the end of a sentence.

function setup(){
   createCanvas(400,400);
}

Now we have a square window. Let’s try changing the background color to something else with the background() function

function setup(){
   createCanvas(400,400);
}

function draw(){
   background(255);
}

You can set the color of background() with the parameters inside the parentheses. If you use only one number, it will be the grayscale value (0=black, 255=white). If you use three numbers, they will be the RGB values (red, green, blue). See the reference for other possibilities. Ok, now we have a canvas to work on. We can even decide what the color is. Let’s start drawing something on it.

function setup() {
	createCanvas(400, 400);
}

function draw() {
	background(180, 60 ,120);
	// Draw a point to the middle of the canvas
	point(200, 200);
	// Draw a line. The numbers define the start and end point of the line
	line(150, 250, 250, 250);
}

If you want to change the color of the point() and line(), you need to define the stroke() color before drawing them. By the way, any line of text in the code that starts with // is a comment and gets ignored by the program. Comments are there for you to remind yourself what you are doing or to explain to others what the code does.

You can also draw some simple geometric shapes such as ellipse(), rect(), triangle() and others. You define the fill color of the shapes with the fill() function.

function setup() {
	createCanvas(400, 400);
	background(100);
}

function draw() {
	background(134, 82, 132);
	// Change the color of the stroke
	stroke(92, 31, 89);
	// Draw a line. The numbers define the start and end points of the line
	line(150, 300, 250, 300);

	// Define the fill color
	fill(160, 119, 158);
	// Draw a triangle. You need to define the three points.
	triangle(200, 250, 150, 150, 250, 150);
	// Change the fill color
	fill(112, 53, 110);
	// Draw a couple of ellipses
	ellipse(120, 100, 70, 70);
	ellipse(280, 100, 70, 70);
}

1st Assignment

This is one of the mandatory assignments that you need to complete to pass this class.

Experiment with the various shapes and drawing possibilities and try to create some sort of illustration using only these basics shapes. The reference will be very helpful, especially the 2D Primitives and Color sections. You can draw anything you want (self portrait, some kind of character or animal, something more abstract).

After you are done, do the following: