Drawing a trail with the mouse.

*/

​

let poses = [];

let easing = false;

let throbbing = false;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(0, 32);

  noStroke();

  fill(255, 64);

​

  // Add current mouse position to locs array

  poses.push({x : mouseX, y : mouseY});

​

  // Remove the oldest mouse location after 50 frames

  if(poses.length> 50) poses.shift();

​

  // Iterate through last 50 mouse positions

  for(let p = 0; p < poses.length; p++) {

    // 

        let pos = poses[p];

    // Turn on throbbing

    // What's being throbbed?

    let sz = 10;

    if(throbbing) sz = sin(frameCount*0.01)*p + p;

​

    // Turn on easing

        if(easing) {

      pos.x+=(mouseX-pos.x)*0.01;

      pos.y+=(mouseY-pos.y)*0.01;

    }

​

    // Draw an ellipse at this location

    ellipse(pos.x, pos.y, sz, sz);

​

    // Draw instructions to screen

    text("Press 'e' to ease. Press 't' to throb.", 10, 20);

  }

}

​

// Press 'e' to turn on easing

// Press 't' to turn on throbbing

function keyPressed(){

  console.log(key);

  switch(key){

    case 'E':

      easing = !easing;

      break;

    case 'T':

      throbbing = !throbbing;

      break;

  }

}