Generative Typography

Interactive

Students will leave the session with the ability to add interactive elements to their sketches using p5.js.

Class Agenda

Morning Sketching 8:30 - 9am
Presentations & Critique 9 - 9:45am
BREAK 15min
Read & Discussion 10 - 10:45am
Code Lecture 10:45 - 11am
BREAK 60min
Workshop 12 - 1pm

Morning Sketch

Create a sketch that changes as the frameCount increases.

Weekly Assignment

Create a typographic sketch where the letters are interactive.

Readings

Discussion Questions

Further Resources

Code Lecture

Parametric Design is a central part of Generative Typography. In p5.js we can use events and controls to make our sketches respond to various inputs.

Mouse Events

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

function draw() {
  circle(mouseX, mouseY, 50);
}
function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  circle(mouseX, mouseY, 50);
}

function mouseClicked() {
  clear();
  background(220);
}
function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  if (mouseIsPressed) {
    fill("red");
  } else {
    fill("white");
  }

  circle(200, 200, 100);
}
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circle(200, 200, 100);
}

function mousePressed() {
  fill("pink");
}

function mouseReleased() {
  fill("teal");
}
var size = 100;

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

function draw() {
  background(220);
  circle(200, 200, size);
}

function mouseClicked() {
  size += 25;
}
var maximumNumberOfCoords = 20;
var list = [];

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

function draw() {
  background(220);

  for (var index = 0; index < list.length; index++) {
    var coordinate = list[index];

    circle(coordinate.x, coordinate.y, 40);
  }
}

function mouseMoved() {
  // If we are at the limit remove the last item in the array
  if (list.length === maximumNumberOfCoords) list.pop();

  var coordinate = {
    x: mouseX,
    y: mouseY,
  };

  // Add a new coordinate to the beginning of the list
  list.unshift(coordinate);
}

Keyboard Events

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

function draw() {
  if (keyIsPressed) {
    fill("red");
  } else {
    fill("white");
  }

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

function draw() {
  if (key === "a") {
    fill("pink");
  } else if (keyCode === UP_ARROW) {
    fill("teal");
  } else {
    fill("white");
  }

  circle(200, 200, 100);
}

Other Functions that behave similar to the mouse counterparts:

Interactive Controls

var button;

function setup() {
  createCanvas(400, 400);
  background(220);

  button = createButton("update background");
  button.position(0, 0);
  button.mousePressed(changeBackground);
}

function changeBackground() {
  var val = random(255);

  background(val);
}
var checkbox;

function setup() {
  createCanvas(400, 400);
  background(220);

  checkbox = createCheckbox("change fill", false);
}

function draw() {
  if (checkbox.checked()) {
    fill("pink");
  } else {
    fill("teal");
  }

  circle(200, 200, 100);
}
var sel;

function setup() {
  createCanvas(400, 400);
  background(220);

  sel = createSelect();
  sel.position(10, 10);
  sel.selected("white");
  sel.option("pink");
  sel.option("teal");
  sel.option("white");
  sel.changed(mySelectEvent);
}

function mySelectEvent() {
  var selectFill = sel.value();

  fill(selectFill);
}

function draw() {
  background(200);

  circle(200, 200, 100);
}
var input;

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER, CENTER);
  textSize(32);

  input = createInput();
}

function draw() {
  background(220);

  var inputText = input.value();

  text(inputText, 200, 200);
}
var slider;

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

  slider = createSlider(10, 200, 100);
}

function draw() {
  background(220);

  var size = slider.value();

  circle(200, 200, size);
}
var colorPicker;

function setup() {
  createCanvas(400, 400);
  background(220);

  colorPicker = createColorPicker();
}

function draw() {
  fill(colorPicker.value());

  circle(200, 200, 100);
}