10_mobile.js

//////////////////////////////////////////////////////////////////
//// touchX/Y DRAW

// Take a look at the HTML file where some things have been
// added for mobile viewing

function setup() {
  // Make the canvas the size of the mobile device screen
  createCanvas(windowWidth, windowHeight);
  background(200);
}

function touchMoved() {
  strokeWeight(10)
  stroke(0);
  // Here touchX and touchY act like mouseX and mouseY
  line(touchX, touchY, ptouchX, ptouchY);
  // line(mouseX, mouseY, pmouseX, pmouseY);

  // This prevents dragging screen around
  return false;
}

// HTML
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

//////////////////////////////////////////////////////////////////
//// touches[] DRAW
var colors;

function setup() {
  // Make the canvas the size of the mobile device screen
  createCanvas(windowWidth, windowHeight);
  background(200);

  // An array of five colors, one for each finger
  colors = [color(255,0,0), color(0,255,0), color(0,0,255), color(255, 255,0), color(0,255,255)];
}

function draw() {

  // The touches array holds an object for each and every touch
  // The array length is dynamic and tied to the number of fingers 
  // currently touching
  for (var i = 0; i < touches.length; i++) {
    noStroke();
    // One color per finger
    fill(colors[i]);
    // Draw a circle at each finger
    ellipse(touches[i].x, touches[i].y, 24, 24);
  }
}

// this prevents dragging screen around
function touchMoved() {
  return false;
}


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

var bgColor;

function setup() {
  createCanvas(windowWidth, windowHeight);
  bgColor = color(0,0,0);
}

function draw() {
  // Draw the backgroung
  background(bgColor);

  // Map the accelerameter data to an x and y position
  var x = map(accelerationY, -90, 90, 0, width);
  var y = map(accelerationX, -90, 90, 0, height);
  fill(255);
  ellipse(x, y, 30, 30);
}

// There is also an event triggered whenever the
// device is moved. Here we are picking a background
// color based on accelerometer data
function deviceMoved() {
  var r = map(accelerationX, -90, 90, 0, 255);
  var g = map(accelerationY, -90, 90, 0, 255);
  var b = map(accelerationZ, -90, 90, 0, 255);
  bgColor = color(r, g, b);
}

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

var value = 0;

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

function draw() {
  background(value);
}

function deviceTurned() {
  value = value + 10;
  if (value > 255) {
    value = 0;
  }
}

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

function setup() {
  createCanvas(windowWidth, windowWidth);
  setShakeThreshold(50);
  colorMode(HSB);
  background(0);
}


function deviceShaken() {
  var h = random(255);
  background(h, 255, 255);
}






//////////////////////////////////////////////////////////////////
//// geolocation - getCurrentPosition()

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  fill(255);
  background(0);
  
  // get position once
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(updatePosition);
  } else {
    alert("navigator.geolocation is not available");
  }
}

function updatePosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  background(0);
  text("Current position: " + lat + " " + lng, 50, 50);
}


//////////////////////////////////////////////////////////////////
//// geolocation - updatePosition()

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  fill(255);
  background(0);
  
  // register event handler to position anytime it changes
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(updatePosition);
  } else {
    alert("navigator.geolocation is not available");
  }
}

function updatePosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  background(0);
  text("Current position: " + lat + " " + lng, 50, 50);
}