3. Interaction and sensors




1. Interfaces

1. Using the keyboard

See chapter 1.13 ›Functions‹.



2. Using the mouse


       
    


3. Game Controller

Our example uses a Gamepad-Library ( https://github.com/kallaspriit/HTML5-JavaScript-Gamepad-Controller-Library) that allows accessing gamepads in modern browsers.

Include the library in the HTML file:


      < script src="gamepad.js">< /script>
  

      window.gamepad = new Gamepad();

      gamepad.bind(Gamepad.Event.CONNECTED, function(device) {
          console.log('Connected', device);
      });
    
      gamepad.bind(Gamepad.Event.BUTTON_DOWN, function(e) {
        // e.control of gamepad e.gamepad pressed down
        //console.log(e.gamepad +", "+ e.control);
        switch (e.control){
          case "FACE_1": console.log("cross up");	break;
          case "FACE_2": console.log("cross down"); break;
          case "FACE_3": console.log("cross left"); break;
          case "FACE_4": console.log("cross right"); break;
        }
      });
    
      gamepad.bind(Gamepad.Event.AXIS_CHANGED, function(e) {
        // e.axis changed to value e.value for gamepad e.gamepad
        //console.log(e.axis +", "+ e.value);
        if (e.axis == "LEFT_STICK_X"){
          console.log("x: "+ e.value);
        }
        if (e.axis == "LEFT_STICK_Y"){
          console.log("y: "+ e.value);
        }
      });
    
      if (!gamepad.init()) {
        alert('Your browser does not support gamepads, get the latest Google Chrome or Firefox.');
      }
  


        gamepad.bind(Gamepad.Event.AXIS_CHANGED, function(e) {
          if (e.axis == "LEFT_STICK_X"){
            //console.log("x: "+ e.value);
                  xSpeed += e.value;
                  if (e.value < 0.1 && e.value > -0.1){
                    xSpeed = 0;
                  }
          }
          if (e.axis == "LEFT_STICK_Y"){
            // not needed in this example
            //console.log("y: "+ e.value);
          }
        });
      
      
      if (!gamepad.init()) {
        alert('Y
    


4. Leap Motion Hand Sensor

First, we have to include the supplied library in the HTML file:


    < script src="leap-0.6.4.js">< /script>
  

The sketch: https://editor.p5js.org/ear___sand/sketches/Mw5FILSN9

The Leap Motion JavaScript SDK (Software Development Kit): https://developer-archive.leapmotion.com/documentation/v2/javascript/index.html


var barX = 50;
      var barY = 200;
      
      var xPos = 200;
      var yPos = 200;
      var xSpeed = 0;
      
      var ballXspeed = 4;
      var ballYspeed = 6;
      
      var ballXpos = 300;
      var ballYpos = 200;
      
      function setup() {
        createCanvas(600, 400);
        background(0);
        rectMode(CORNER);
        ellipseMode(CENTER);
        fill(255);
      }
      
      function draw() {
        background(0);            // erase everything
        text("use your hand above the Leap Motion device",20,30);
        if(ballXpos>width){
           ballXspeed = -ballXspeed; 
        }
        if(ballYpos>height){
           ballYspeed = -ballYspeed; 
        }
        if(ballXpos<0){
           ballXspeed = -ballXspeed; 
        }
        if(ballYpos<0){
           ballYspeed = -ballYspeed; 
        }
        
        ballXpos += ballXspeed;
        ballYpos += ballYspeed;
        var check = testBorder();
        if (check == false){
          barX += xSpeed;
        }else{
          xSpeed = 0;
        }
        rect(barX, barY, 4,60);
        ellipse(ballXpos, ballYpos, 10, 10);
        hit = collideRectCircle(barX,barY,4,60,ballXpos,ballYpos,10);
        if(hit == true){
          ballXspeed = -ballXspeed;
        }
      }
      
      
      function testBorder(){
        var colission = false;
        if (barX > width-60 ){
            colission = true;
            barX = width-60;
        }
        if(barX < 0){
          colission = true;
            barX = 0;   
        }
        return colission;
      }
      
      //----------------------------------------------------
      
      
      var hand, finger;
      var positionX = 0;
      var positionY = 0;
      var grab;
      
      var options = {enableGestures: true};
      console.log("running…");
      
      Leap.loop(options, function(frame){
        if (frame.hands.length  > 0){
          for(var i = 0; i < frame.hands.length; i++){
            var hand = frame.hands[i];
            positionX = hand.palmPosition[0];					// output x-coordinate of hand
                positionY = hand.palmPosition[1];					// output y-coordinate of hand
            grab = hand.grabStrength;
                //console.log("x: " +positionX);
                //console.log("spread: " +grab);
                //xSpeed += (positionX/500);
                //barX = positionX+(width/2);
                barY = -positionY+height;
          }
        }  
      });
      
      
      
    


2. Behaviour

1. 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/



2. Eye Tracking

Webgazer.js


      < script src="webgazer.js" type="text/javascript" >
    


3. Object Tracking

Example: object-Tracking

OpenCV.js


      < script src="tracking-min.js" type="text/javascript" >
    

Open CV Examples: https://kylemcdonald.github.io/cv-examples/


3. Reading sensor data

1. Reading gyroscope and 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:

https://editor.p5js.org/ear___sand/sketches/xkV71vaqj
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);    

}