A Crash Course in JavaScript

Variables, functions, conditionals, loops, arrays, events — the entire vocabulary of this workshop, learned in one day, with no abstract exercises. Every concept is a sketch you can hear or see.

10:00 — Homework Listening

Six field recordings, phone to the sound card, monitors up. Each of you states the where and the when-to-the-minute before pressing play (house rule), then one sentence: what makes it almost music? Which side of yesterday's axis does the room place it on?

10:45 — The Language, One Sketch at a Time

Rules of the game today: type everything yourself (no pasting until after lunch), run after every change, and when something breaks, read the error message out loud — it is trying to help. All sketches live in your p5.js editor account.

1 · Variables — a name for a value

let x = 50;          // make a box called x, put 50 in it

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

function draw() {
  background(240);
  circle(x, 200, 80);  // use whatever is in the box
  x = x + 1;           // change the box — the circle drifts right
}

draw() runs about sixty times a second — it is yesterday's walk along the chairs, and x is the state that carries over between passes. Try x = x + 5. Try x = x - 1.

2 · Types — three kinds of value, for now

3 · Functions — a named recipe

function setup() {
  createCanvas(400, 400);
  background(240);
  eye(150, 200);       // call the recipe...
  eye(250, 200);       // ...twice. Write once, use many times.
}

function eye(x, y) {   // x and y are ingredients (parameters)
  fill(255); circle(x, y, 60);
  fill(0);   circle(x, y, 25);
}

You have been calling functions since yesterday — circle(), map(), osc.freq(). Now you can also make your own.

4 · If / else — code that decides

let x = 0;
let speed = 3;

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

function draw() {
  background(240);
  circle(x, 200, 80);
  x = x + speed;
  if (x > width || x < 0) {   // hit an edge?
    speed = -speed;           // reverse direction
  }
}

5 · Loops — do it n times

function setup() {
  createCanvas(400, 400);
  background(240);
  for (let i = 0; i < 10; i = i + 1) {
    circle(40 * i + 20, 200, 30);   // ten circles, one line of intent
  }
}

Read it as: start i at 0; while i is below 10, do the body, then add 1. Change 10, change 40, put i into the size — get a feel for the machinery.

6 · Arrays — a numbered shelf of values

let notes = [220, 247, 262, 294, 330];   // five frequencies on a shelf

function setup() {
  createCanvas(400, 400);
  print( notes[0] );        // 220 — shelves count from zero
  print( notes[4] );        // 330
  print( notes.length );    // 5
}

Arrays + loops is the pair that runs all music software: a melody is an array of pitches, a rhythm is an array of durations, yesterday's human sequencer was an array of cards. Sixty percent of Week 2 is deciding what goes in your arrays.

14:00 — Events, Objects, and the First Instrument

7 · Events — code that waits for you

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

function draw() {}

function mousePressed() {
  circle(mouseX, mouseY, 40);
}

function keyPressed() {
  background(random(255), random(255), random(255));
}

setup runs once, draw runs always, mousePressed / keyPressed run when something happens. Instruments live in that third kind: they wait, then respond.

8 · Objects — just enough to use libraries

An object is a value that carries its own functions. osc = new p5.Oscillator('sine') builds one; after that, osc.freq(440), osc.amp(0.3), osc.start() are messages you send it. The dot means "ask this thing to do something." That is all the object theory this workshop needs — libraries hand you well-made objects; you send them messages.

9 · Build: the five-key instrument

let osc;
let notes = [220, 247, 262, 294, 330];   // A B C D E
let keys  = ['a', 's', 'd', 'f', 'g'];

function setup() {
  createCanvas(400, 400);
  osc = new p5.Oscillator('triangle');
  textAlign(CENTER, CENTER); textSize(28);
}

function draw() {
  background(24);
  fill(230);
  text('a  s  d  f  g', width / 2, height / 2);
}

function keyPressed() {
  for (let i = 0; i < keys.length; i = i + 1) {
    if (key === keys[i]) {          // which key of ours was it?
      osc.freq( notes[i] );         // its shelf-mate frequency
      osc.start();
      osc.amp(0.4, 0.02);           // fade in fast
    }
  }
}

function keyReleased() {
  osc.amp(0, 0.3);                  // fade out — no clicks
}

Everything from today is in this sketch: two arrays holding the instrument's definition, a loop searching them, an if deciding, an object being told what to do, events waiting for your hands. This is an instrument. A modest one — but tomorrow it learns Western music theory, Thursday it learns a raga, and in Week 2 it moves onto your phone.

If you finish early: add more keys; give each key a different waveform; make the background respond to the note; make keyReleased only stop when the released key is the sounding one.

Reference — Today on One Screen

let x = 5;                 // variable
let name = "sine";         // string
let on = true;             // boolean
function f(a, b) { }       // function with parameters
if (x > 3) { } else { }    // decision
for (let i = 0; i < 10; i++) { }   // loop (i++ is short for i = i + 1)
let arr = [1, 2, 3];       // array; arr[0] is 1; arr.length is 3
osc.freq(440);             // message to an object
function mousePressed() {} // event handler