Templates for Drawing Tools – Introduction to Digital Media

Simplest Drawing Tool (Accreting into Canvas)

Pixels drawn by the user are accumulatively added into the background.

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

function draw() {
  if (mouseIsPressed){
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

Simplest Drawing Tool, but Almost Fancy

We can add animated elements to make this pattern more interesting.

function setup() {
  createCanvas(400, 400);
  background(200);
  strokeWeight(3);
  rectMode(CENTER);
}

function draw() {
  push();
  translate(mouseX, mouseY);
  rotate(millis() / 100.0);
  rect(0, 0, 100, 50);
  pop();
}

Simple Drawing Tool, but with Data Recording

Here, an array is used to store the locations of the user’s cursor. Superficially, it seems similar, but new tricks are possible.

var points;

function setup() {
  createCanvas(400, 400);
  points = [];
}

function draw() {
  background(220);
  noFill();
  strokeWeight(3);
  
  beginShape();
  for (var i = 0; i < points.length; i++) {
    vertex(points[i].x, points[i].y);
  }
  endShape();
}

function mouseDragged() {
  var aNewPoint = createVector(mouseX, mouseY);
  points.push(aNewPoint);
}

Later on, we can add the following code:

function mousePressed() {
  var aNewPoint = createVector(mouseX, mouseY);
  points.push(aNewPoint);
}

function keyPressed() {
  if (key == " ") {
    points = [];
  }
}

function modifyPoints() {
  for (var i = 0; i < points.length; i++) {
    points[i].x += random(-1,1);
    points[i].y += random(-1,1);
  }
}

Once the user’s gesture is stored in an array, new forms of play become possible. Here’s one example shown in class, “drawing on a conveyor belt“:

var points;

function setup() {
  createCanvas(400, 400);
  points = [];
}

function draw() {
  background(220);
  noFill();
  strokeWeight(3);
  strokeJoin(ROUND);
  
  beginShape();
  for (var i = 0; i < points.length; i++) {
    vertex(points[i].x, points[i].y);
    points[i].y += 3.0; // conveyor belt!
  }
  endShape();
}

function mouseDragged() {
  var aNewPoint = createVector(mouseX, mouseY);
  points.push(aNewPoint);
}
function mousePressed() {
  var aNewPoint = createVector(mouseX, mouseY);
  points.push(aNewPoint);
}

An Array of Arrays

Here is a composition which uses an array of many squiggles, each of which is itself an array of points.

Here we show what’s possible with such a structure: “An Array of Arrays, but Fancy“. Each mark has its own color, speed, etc.