A series of creative experiences using the mouse

Mouse Interaction Gallery.js

var option = 0;
var numSketches = 5;
var explanation = false;
// Experience 3
// Experience 4
var objects = [];
//Experience 5
var smoothedSensorX = 0;
var smoothedSensorY = 0;

//Experience 4
function Shooter(x,y) {
  this.x = x;
  this.y = y;
  this.colour = color(random(0,255), random(0,255), random(0,255));
  this.xspeed = random(-10,10);
  this.yspeed = random(-10,10);

  this.direction = function(){
    this.x += this.xspeed;
    this.y += this.yspeed
  }

  this.displayShooter = function(){
    fill(this.colour);
    ellipse(this.x, this.y, 5, 5);
  }
}

//Experience 5
/*
function GravityDroplet(x, y) {
  this.counter = 0;
  this.x = x;
  this.y = y;
  this.colour = color(50,50,200);
  this.xspeed = random(-5,5);
  this.yspeed = random(10, 40);

  this.motion = function() {
    this.counter += 1;
    this.x += this.xspeed;
    this.y += this.yspeed - .05 * this.counter;
  }

  this.displayDroplet = function() {
    fill(this.colour);
    ellipse(this.x, this.y, 5, 5);
  }
}*/

function setup() {
  createCanvas(800,600);
  background(255);
}

// separate each experience into helper functions
function draw() {
  background(255);

  if (option == 0){
    textAlign(CENTER);
    text("Click to cycle through experiences.", width/2, height/2 + 20);
    textSize(20);
    text("Click to begin.", width/2, height/2 + 40);
  }

  if (option == 1){
    if (!explanation){
      textAlign(CENTER);
      textSize(50);
      text("1: X marks the spot", width/2, height/2);
      textSize(20);
      text("Move mouse left and right to change the density", width/2, height/2 + 60);
    } else {
      var density = map(mouseX, 0, width, 20,50);
      for (var x = 10; x < width; x += density){
        for (var y = 10; y < height; y += density){
          line(x - 5, y - 5, x + 5, y + 5);
          line(x - 5, y + 5, x + 5, y - 5);
        }
      }
    }
  }

  if (option == 2) {
    if(!explanation){
      textAlign(CENTER);
      textSize(50);
      text("2: Circle manipulation", width/2, height/2);
      textSize(20);
      text("Move mouse in all directions to change circle attributes", width/2, height/2 + 60);
    } else {
      var strokeDensity = map(mouseY, 0, height, 1, 40);
      var circleColourGreen = map(mouseY, 0, height, 150, 255);
      var circleWidth = map(mouseX, 0, width, 1, 400);
      strokeWeight(strokeDensity);
      fill(0, circleColourGreen, 0);
      ellipse(width/2, height/2, 50 + circleWidth, 50 + circleWidth);
    }
  }

  // Change into a rotating windmill
  if (option == 3){
    var rotation = map(mouseX, 0, width, 0, 2* PI);
    if(!explanation){
      textAlign(CENTER);
      textSize(50);
      text("3: Rotations", width/2, height/2);
      textSize(20);
      text("Move mouse left and right to rotate windmill", width/2, height/2 + 60);
    } else {
      rectMode(CENTER);
      translate(width/2, height/2);
      rotate(rotation);
      for(var x = 0; x < width/2; x += 100){
        rect(x, x, 100, 100);
      }
      for (var y = width/2; y > 0; y -= 100){
        rect(0 - y, 0 - y, 100, 100);
      }
    }
  }

  //circles begin at mouse position and shoot off into random directions
  if (option == 4) {
    if(!explanation){
      textAlign(CENTER);
      textSize(50);
      text("4: Explosions!", width/2, height/2);
    } else {
      // noCursor() and noStroke() for explosion effect
      noCursor();
      noStroke();
      objects.push(new Shooter(mouseX, mouseY));
      for(var i = 0; i < objects.length; i++){
        objects[i].displayShooter();
        objects[i].direction();
      }
      if (objects.length > 120){
        objects.splice(2, 1);
      }
    }
  }

  if (option == 5) {
    if (!explanation){
      textAlign(CENTER);
      textSize(50);
      text("5: Lerping Function", width/2, height/2);
    } else {
      var sensorX = mouseX + random(-15,15);
      var sensorY = mouseY + random(-15,15);
      smoothedSensorX = lerp(smoothedSensorX, sensorX, .1);
      smoothedSensorY = lerp(smoothedSensorY, sensorY, .1);

      fill(255, 0, 175, 150);
      ellipse(sensorX, sensorY, 64, 64);

      fill(175, 0, 255, 150);
      ellipse(smoothedSensorX, smoothedSensorY, 64, 64);
    }
  }
}

function mousePressed() {
  if (option == 0){
    option += 1;
  } else {
    if (!explanation){
      explanation = true;
    } else {
      option += 1;
      if (option > numSketches) option = 1;
      // Below is to reset settings for each experience
      fill(255);
      strokeWeight(1);
      fill(0);
      explanation = false;
      cursor();
      stroke(0);
      objects = []; //reset objects
      //Reset Experience 5
      smoothedSensorX = 0;
      smoothedSensorY = 0;
    }
  }
}