p5 touch

gistfile1.js

//// TOUCHX/Y

// touch events are very similar to mouse events

var red = 0;

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

function draw() {
  background(red, 0, 255);
  rect(300, 200, 200, 600); // simulated button

  if((touchX > 300) && (touchX < 500) && (touchY > 200) && (touchY < 800)){ // if touch inside rectangle
    red = 255;
  } else {
    red = 0;
  }
}


//// TOUCH EVENTS

// touch events are very similar to mouse events

function setup() {
  createCanvas(windowWidth, windowHeight); 
  noStroke();
  fill(255, 255, 255);
  background(200, 190, 190);
}

// mousePressed
function touchStarted() {
  fill(0, 255, 0);
  print('pressed or started');
  ellipse(touchX, touchY, 80, 80);
}

// mouseDragged
function touchMoved() {
  fill(0, 0, 255);
  ellipse(touchX, touchY, 80, 80);
}

// mouseReleased
function touchEnded() {
  fill(255, 0, 0);
  ellipse(touchX, touchY, 80, 80);
}



//// MOUSE + TOUCH

// touch events are very similar to mouse events

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  fill(255, 255, 255);
  background(200, 190, 190);
}


// this line defines both touchStarted and mousePressed as the same function
var touchStarted = mousePressed = function() {
  
  // using or (||) means x and y will be set to whichever value is non-zero
  // on desktop they will take the mouseX/Y values, on mobile the touchX/Y values
  var x = mouseX || touchX;
  var y = mouseY || touchY;
  fill(0, 255, 0);
  ellipse(x, y, 80, 80);
};

// this line defines both touchMoved and mouseDragged as the same function
var touchMoved = mouseDragged = function() {
  var x = mouseX || touchX;
  var y = mouseY || touchY;
  fill(0, 0, 255);
  ellipse(x, y, 80, 80);
};

// this line defines both touchEnded and mouseReleased as the same function
var touchEnded = mouseReleased = function() {
  var x = mouseX || touchX;
  var y = mouseY || touchY;
  fill(255, 0, 0);
  ellipse(x, y, 80, 80);
};




//// MULTIFINGER TOUCH

function setup() {
  createCanvas(windowWidth, windowHeight); 
  noStroke();
  fill(255, 255, 255);
  background(200, 190, 190);
}

function touchStarted() {
  fill(0, 255, 0);
  for(var i = 0; i < touches.length; i++) {
    ellipse(touches[i].x, touches[i].y, 80, 80);
  }
}

function touchMoved() {
  for(var i = 0; i < touches.length; i++) {
    fill(i*50);
    ellipse(touches[i].x, touches[i].y, 80, 80);
  }
}

function touchEnded() {
  fill(255, 0, 0);
  for(var i = 0; i < touches.length; i++) {
    ellipse(touches[i].x, touches[i].y, 80, 80);
  }
}