Mouse Interaction Demo

// Demonstration of cursor interaction techniques.

// This demonstrates how various aspects of mouse movement 

// (such as speed, click frequency, proximity to a coordinate, 

// or angle-with-respect-to a coordinate) can be used as 

// elements of an interaction vocabulary.

​

var colorA; 

var colorB; 

var avgSpeed = 0;

var lastClickTime = 0; 

var avgClickGap = 0; 

​

function setup() {

  createCanvas(600, 600);

  colorA = color("yellow"); 

  colorB = color("red"); 

}

​

//---------------------------------

function draw() {

  background("DodgerBlue");

  // An object that responds to how close the cursor is

  drawProximityDesign();

  // An object that responds to the cursor's orientation to it

  drawOrientationDesign(); 

  // An object that responds to the cursor's average speed

  drawSpeedDesign();

  // An object that responds to how frequently you click

  drawFrequencyDesign();

}

​

​

//---------------------------------

function mousePressed(){

  // Update the data used for calculating click frequency.

  var clickGap = min((millis() - lastClickTime)/1000.0, 10);

  avgClickGap = 0.8*avgClickGap + 0.2*clickGap;

  lastClickTime = millis(); 

}

​

//---------------------------------

function drawProximityDesign(){

  var thingX = 200;

  var thingY = 200;

  let dx = mouseX - thingX; 

  let dy = mouseY - thingY; 

  let proximity = sqrt(dx*dx + dy*dy);

  // var proximity = dist(thingX, thingY, mouseX, mouseY);

  var thingD = map(proximity, 0,200, 150,50);

  thingD = constrain(thingD, 50,150); 

  var blendAmount = map(proximity, 0,200, 0,1); 

  var blendColor = lerpColor(colorA, colorB, blendAmount); 

  fill(blendColor); 

  strokeWeight(5);

  stroke("black"); 

  circle(thingX, thingY, thingD);

  // Draw debug info.

  noStroke(); 

  fill("white"); 

  textSize(18); 

  textAlign(CENTER); 

  text("Proximity: " + nf(proximity,1,1) + " px", thingX, thingY-100);

}

​

​

//---------------------------------

function drawOrientationDesign(){

  var doodadX = 400; 

  var doodadY = 200;

  var dy = mouseY - doodadY; 

  var dx = mouseX - doodadX; 

  var orientation = atan2(dy, dx); 

  var blendAmount = map(cos(orientation), -1,1, 0,1); 

  var blendColor = lerpColor(colorA, colorB, blendAmount); 

  fill(blendColor); 

  strokeWeight(5);

  stroke("black"); 

  rectMode(CENTER); 

  push(); 

  translate(doodadX, doodadY);

  rotate(orientation); 

  rect(0,0, 150, 50);

  pop(); 

  // Draw debug info.

  noStroke(); 

  fill("white"); 

  textSize(18); 

  textAlign(CENTER); 

  var ang = degrees(orientation); 

  text("Orientation: " + nf(ang,1,1) +"°", doodadX, doodadY-100);

}

​

​

//---------------------------------

function drawSpeedDesign(){

  // Compute a smoothed, running average of our speed.

  var traveled = dist(mouseX, mouseY, pmouseX, pmouseY); 

  var A = 0.97;

  var B = 1.0-A;

  avgSpeed = A*avgSpeed + B*traveled; 

  var angle = map(avgSpeed, 0,150, 360, 0); 

  var blendAmount = map(avgSpeed,  0,150, 0,1); 

  var blendColor = lerpColor(colorA, colorB, blendAmount); 

  var boopX = 200; 

  var boopY = 400; 

  fill(blendColor); 

  stroke("black"); 

  strokeWeight(5); 

  strokeJoin(ROUND); 

  arc(boopX, boopY, 150,150, 0, radians(angle), PIE); 

  // Draw debug info.

  noStroke(); 

  fill("white"); 

  textSize(18); 

  textAlign(CENTER); 

  text("Avg.Speed: \n" + nf(avgSpeed,1,1) + " px/frame", boopX, boopY+120);

}

​

​

​

//---------------------------------

function drawFrequencyDesign(){

  var bipX = 400; 

  var bipY = 400;

  var clickFreq = 1.0/constrain(avgClickGap, 0.1, 10);

  var myRectW = map(clickFreq, 0, 10, 50,150); 

  myRectW = constrain(myRectW, 50, 150); 

  var blendAmount = map(clickFreq,  0,10, 1,0); 

  var blendColor = lerpColor(colorA, colorB, blendAmount); 

  rectMode(CORNER); 

  stroke("black"); 

  strokeWeight(5); 

  fill(blendColor); 

  rect(bipX-50, bipY-50, myRectW, 100); 

  // Draw debug info.

  noStroke(); 

  fill("white"); 

  textSize(18); 

  textAlign(CENTER); 

  text("Click Frequency: \n" + nf(clickFreq,1,3) + "/sec", bipX, bipY+120);

}

​