4. Interaction and sensors

Content

1. Using the keyboard
2. Touch gestures
3. Reading sensor data

1. Using the keyboard

Moving an object by keyboard input:

var xPos = 200;
var yPos = 200;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  //background(c, 0, 0);
  background(255);
  ellipse(xPos, yPos, 100,100);
}

function keyPressed(){
  if(key == "a"){
     xPos = xPos - 10;
  }
  if(key == "s"){
     xPos = xPos + 10;
  }
  
  if(key == "w"){
     yPos = yPos - 10;
  }
  if(key == "y"){
     yPos = yPos + 10;
  }
  
}

1. Computer Vision

Example: object-Tracking


2. Touch gestures

simple drawing on mobile display

function setup() {
  createCanvas(displayWidth, displayHeight);
}

function touchMoved() {
  strokeWeight(random(4,12));
  stroke(random(100,255), 100, 100);
  line(mouseX, mouseY, pmouseX, pmouseY);
  return false;
}

js library that handles touch gestures: https://zingchart.github.io/zingtouch/


3. Reading sensor data

Reading the accelerometer

// rework
var x, y, z;

function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
  x = 0;
  y = 0;
  z = 0;
}

function draw(){
  background(255, 255, 255, 255);
  translate(-width/2, 0, -600);
  
  // rotate the box based on accelerometer data
  // we could use rotationX,Y here but demonstrating
  // acceleration
  x+=accelerationX*0.05;
  y+=accelerationY*0.05;
  z+=accelerationZ*0.05;
  normalMaterial();
  rotateX(x);
  rotateY(y);
  rotateZ(z);
  box(200, 200, 200);

}

gyro.js

Example: http://gildasp.fr/exp/P5js-gyrojs/

//rework
     var forceX = 0;
var forceY = 0;
var bulles = [];

function windowResized() { 
  resizeCanvas(windowWidth, windowHeight);
}
function setup(){

  createCanvas(windowWidth, windowHeight);


  gyro.frequency = 10; 
  gyro.startTracking(function(o) {
        forceX = o.gamma/50;
        forceY = o.beta/50;
    });

    for (var i = 0; i < 5; i++) {
      bulles[i] = new Bulle();
    };
}
function draw(){
  background('#FFFFFF'); 

  fill(0); 
  text("forceX : "+forceX, 30, 30);
  text("forceY : "+forceY, 30, 50);
    fill('#ECECEC');

  for (var i = 0; i < bulles.length; i++) {
    bulles[i].update();
  };
}

function Bulle(){
  this.x = width/2; // démarre au centre
  this.y = height/2;
  this.vitx = random(2, 12);
  this.vity = random(2, 12);
  this.diam = random(20, 60);
}
Bulle.prototype = {
  update: function(){

    // la vitesse est proportionnée aux forces actuelles
    this.x += this.vitx * forceX;
    this.y += this.vity * forceY;

    if(this.x < this.diam/2){
      this.x = this.diam/2;
    } else if(this.x > width-this.diam/2){
      this.x = width-this.diam/2;
    }
    if(this.y < this.diam/2){
      this.y = this.diam/2;
    } else if(this.y > height-this.diam/2){
      this.y = height-this.diam/2;
    }

    ellipse(this.x, this.y, this.diam, this.diam);    
  }
}

A simplified version with just a single ellipse:

var x = width/2;
var y = height/2;

var forceX = 0;
var forceY = 0;
var vitx = random(2, 12);
var vity = random(2, 12);
var diam = random(20, 60);


function windowResized() { 
  resizeCanvas(windowWidth, windowHeight);
}
function setup(){

  createCanvas(windowWidth, windowHeight);


  gyro.frequency = 10; 
  gyro.startTracking(function(o) {
        forceX = o.gamma/50;
        forceY = o.beta/50;
    });

}
function draw(){
  background('#FFFFFF'); 

  fill(0); 
  text("forceX : "+forceX, 30, 30);
  text("forceY : "+forceY, 30, 50);
    fill('#ECECEC');


    x += vitx * forceX;
  y += vity * forceY;
    ellipse(x, y, diam, diam);    

}

GeoLocation: https://github.com/bmoren/p5.geolocation

Building a simple arcade game using Accelerometer


A version using the keyboard: