interaction-device.js

interaction-device.js

//////////////////////////////////////////////////////////////////////
// mouseX, mouseY

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(200, 20, 20, 10);
	ellipse(mouseX, mouseY, 50, 50);
}

//////////////////////////////////////////////////////////////////////
// prevent scrolling

// add these lines below to sketch to prevent scrolling
function mousePressed(e) {
  return false;
}

document.addEventListener('gesturestart', function (e) {
  e.preventDefault();
});


//////////////////////////////////////////////////////////////////////
// accelerationX, accelerationY, accelerationZ

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
}

function draw() {
  background(255, 10);
  fill('magenta');
	ellipse(width/2, height/2, accelerationX, accelerationX);
  fill('cyan');
	ellipse(width/2, height/2, accelerationY, accelerationY);
  fill('yellow');
	ellipse(width/2, height/2, accelerationZ, accelerationZ);
}

//////////////////////////////////////////////////////////////////////
// rotationX, rotationY, rotationZ

function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){
  background(250);
  normalMaterial();
  rotateX(rotationX * 0.05);
  rotateY(rotationY * 0.05);
  rotateZ(rotationZ * 0.05);
  box(100, 100, 100); 
}



//////////////////////////////////////////////////////////////////////
// deviceMoved()

function setup(){
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER);
  textSize(20);
  //setMoveThreshold(10);
}

function deviceMoved(){
  background(random(255), random(255), 255);
  text('I WAS MOVED!', width/2, height/2);
}



//////////////////////////////////////////////////////////////////////
// deviceShaken()

var shakes = 0;

function setup(){
  createCanvas(windowWidth, windowHeight);
  //setShakeThreshold(10);
}

function deviceShaken(){
  background(shakes);
  shakes = shakes + 1;
}


//////////////////////////////////////////////////////////////////////
// deviceTurned()

var flip = true;

function setup(){
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER);
  textSize(20);
}

function deviceTurned(){
  flip = !flip;
  
  if (flip == true) {
    background(0);
  } else {
    background(255);
  }
}