Generative Typography

Basics of JavaScript and p5.js

Students will leave the session with a grasp of programming syntax, coding fundamentals and the ability to create sketches.

Class Agenda

Morning Sketching 8:30 - 9am
Read & Discussion 9 - 10am
BREAK 30min
Code Lecture 10:30 - 11:30am
BREAK 30min
Workshop 12 - 2pm

Morning Sketch

Create a sketch using one of the Design Tools on the homepage.

Weekly Assignment

Create a letterform using p5.js shapes. The design doesn't need to resemble a latin letterform. Your letterform should be abstracted into a function that accepts the parameters x, y, and size. Similar to the shape functions built into p5.js.

Readings

Discussion Questions

Further Resources

Code Lecture

What is a computer program?

A program is a precise list of instructions for a computer to follow. Programming languages are the way that we communicate these instructions to computers in a way that is clear and precise. Computers look at a programming language and turn the instructions into commands. Every programming language has a specific way of writing it's commands called a syntax. Syntax are rules similar to grammar that help a computer understand your program. Another way of looking at them is as keywords and characters. In this class our programs will be written using the JavaScript programming language.

JavaScript

JavaScript is the language of the web. It was invented in the 1990s and comes installed in almost every web browser. In most cases JavaScript is written in a separate file and loaded onto a webpage to make it interactive. If a webpage were a sentence then HTML is the noun and information, CSS is the adjective that change how the content looks, and JavaScript is the verb that makes the page interactive.

Comments

Let's start learning some JavaScript by looking at comments. Comments make it easier to maintain and understand a program. Comments are not run by the computer so they are purely for annotation and note-taking purposes. They act as a guide for people who have never seen your code before or even ourselves when we return to code that we've written in the past. In order to write a comment you add the characters // and anything after the characters will be ignored.

// This is a note that will not run

Comments also allow us to quickly test different parts of the code. Since comments are ignored by the computer you can temporarily remove portions of your code while you are debugging and building out programs. In the context of a simple p5.js program:

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

function draw() {
  // The background will not be drawn
  // background(220);
  circle(200, 200, 100);
}

Strings and Numbers

In programming numbers, text and other kinds of data are represented as a type. There are many different types in JavaScript, each with their own rules and use cases, but for now let's focus on Strings and Numbers. As their names suggest, a String represents text and a Number represents a number. To create a Number you only have to type the number but to create a String you need to place the sequence of characters within " quotes.

// This creates a string value
"hello world"

// This creates a number value
2

Console

The console command is a way of outputting messages from out programs. In the context of editor.p5js.org the console is located below our code and displays the messages as the program runs. The console command is built into the JavaScript language. In most contexts you will use the console.log() function to output messages. We will cover what functions are down below, for now our aim is to cover what this command does. The syntax for using it is:

console.log(message);

Let's see what it would look like if we used string and number values as the message.

// Using a string value
console.log("hello world");

// Using a number value
console.log(9);

Arithmetic Operators

Operators allow us to manipulate our values as we program. Using arithmetic operators we can program basic Math problems. Here is a list of arithmetic operators:

Operation JavaScript operator
addition +
subtraction -
multiplication *
division /

You can use them in our programs to manipulate our number values:

console.log(1 + 1);
// outputs 2

console.log(2 * 2);
// outputs 4

Variables

Variables allow us to store and reuse values throughout our sketches. There are a few ways to declare a variable in JavaScript but in our course we will focus on using the var keyword. To create a variable you write:

var name_of_variable = value;

Replace name_of_variable with a name of your choosing and value with what you want to be stored in the variable. The = in the middle is another type of operator called assignment. It assigns a value to the newly created variable. The following creates a variable named greeting and assigns our message to it.

var greeting = "hello world";

We can use them throughout our program like this:

var greeting = "hello world";

console.log(greeting);

In the example, we tell the console to output what is stored inside of the variable greeting. Variables can also be changed/updated over the course of our program.

var number = 1;

// Let's change our number
number = 2;

console.log(number);

With variables we don't have to manually keep track of values as we program. A few things to remember about variables

If you are wondering why we use variables. It is because when writing long programs variables make the code easier to write and read. Propose you need to update your code and change a value later. Instead of having to update the code in multiple places, you only have to do it in one. It is for that reason that you should be thoughtful about how you name your variables. In some tutorials you will see the variable names i or x and while these can be familiar to the author, it is hard for the reader to understand their meaning at first glance. The question of "What is a good variable name?" is subjective to the author but I think we should always strive to be as clear as possible when picking a name. Note: this tutorial uses the keyword let when discussing variables. Its basically the same as var.

Functions

So you might remember that console.log() is a thing called a function. Functions allow us to reuse commands and programming logic similar to how a variable allows us to reuse a specific value. So far we've been working with the built-in console.log function but let's create our own. The syntax for creating a function looks like this:

function name_of_function() {
  // Logic to run
}

The same rules apply for naming functions as do for naming variables. Keeping in line with our tutorial let's create a function that takes our console.log greeting logic and makes it reusable.

function greeting() {
  console.log("hello mello");
}

greeting();

Functions are always followed by a pair of parentheses (); Functions can accept more logic in the form of parameters. A parameter allows us to make our logic more dynamic and complex. Let's create a function that takes a number and doubles it.

function multiplyByTwo(number) {
  console.log(number * 2);
}

multiplyByTwo(1);
multiplyByTwo(2);
multiplyByTwo(3);
multiplyByTwo(5);

As we call the function with different parameters the value that is output changes. Functions can take multiple parameters and the order of the parameters that you use matters as they are directly mapped to how the function recognizes them. To quote Allison Parrish:

Every function uses its parameters in a slightly different way, and part of learning a function is learning what its parameters mean.

- Allison Parrish

p5.js

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else. It’s based on Processing, a creative coding environment originally developed by Ben Fry and Casey Reas. Using the web editor we can write p5.js programs without having to download any files. Now that we have a solid understanding of some JavaScript let's refresh the web editor and look at the structure of a p5.js sketch.

// Setup function
function setup() {
  // Creates the canvas that holds the sketch
  createCanvas(400, 400);
}

// Draw function
function draw() {
  // Draws a grey background
  background(220);
}

setup() is a function that is called once when the program starts. This function is used to set up the initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts. Within setup(), the createCanvas() function creates the canvas for our sketch and sets it's height and width. In the sketch above the canvas has a width and height of 400 pixels.

draw() is called directly after setup() and continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. Note if noLoop() is called in setup(), draw() will still be executed once before stopping. draw() is called automatically and should never be called explicitly. Within draw() the background() function sets the color used for the background of the p5.js canvas. If you look at the documentation, you can set the value of the background in a number of different ways.

One thing to note is that the web editor allows us to use p5.js functions without having to explicitly call the p5.js library. The web editor automatically understands the context of the programs we are writing when evaluating our code. In practice this means we can write background() and not p5.background() as you might in another context.

Coordinate system

The p5.js Canvas is a grid system of (x, y) coordinates. Similar to the graph paper used in school, it starts at (0, 0) in the top-left corner and expands to (width, height) in the bottom-right corner. In the example above the bottom-right corner is located at (400, 400) because that is the width and height of our canvas. When we work with points in our programs we will be using this coordinate system. For example using the p5 line() function we can draw a line from (0, 0) to (400, 400) using the positions of those points as parameters.

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

function draw() {
  background(220);

  // use p5.js line function - line(x1, y1, x2, y2)
  line(0, 0, 400, 400);
}

Exploring p5.js functionality

At p5js.org/reference you can find the documentation for the p5.js library. It is a guide to explore all of the different functions that exist within the library. With this guide you can understand how to use each function by learning about what is does and the correct parameters to use. Let’s look at the documentation for circle().

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

function draw() {
  background(220);

  // draw a circle at 0, 0 with a size of 50
  circle(0, 0, 50);

  // draw a circle at 200, 200 with a size of 50
  circle(200, 200, 50);

  // draw a circle at 400, 400 with a size of 50
  circle(400, 400, 50);
}

There are other shapes in the reference under the 2D Primitives group.

Besides shapes, there are other functions that will come in handy when working with color and stroke in our sketches.

Putting it all together, let's create a sketch with shapes of different sizes and colors.

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

function draw() {
  background("grey");

  // style the first shape
  // update the color of the shape's outline
  stroke("yellow");
  // update the weight of the shape's outline
  strokeWeight(10);
  // update the color of the shape
  fill("red");

  // draw a circle at 200, 100 with a size of 150
  circle(200, 100, 150);

  // style the second shape
  // remove the shape's outline
  noStroke();
  // update the color of the shape
  fill("blue");

  // draw an ellipse at 200, 300 with a with of 300 and height of 150
  ellipse(200, 300, 300, 150);
}