I am making a virtual open when website with the P5 library. I have to make it compatible with phones.I have added the invisibility feature to test it. I know how to add one-touch but how do I multiple touches as this requires multiple touches? Here is my code
var laugh, laughI, sadI, sad, titleI, title, annoyI, annoy, motiI, moti
var stressI, stress, angryI, angry;
function preload(){
laughI = loadImage("images/laugh.png");
sadI = loadImage("images/sad.png");
titleI = loadImage("images/title.png");
annoyI = loadImage("images/annoy.png");
motiI = loadImage("images/motivation.png");
stressI = loadImage("images/stress.png");
angryI = loadImage("images/angry.png");
}
function setup() {
createCanvas(windowWidth, 1800);
title = createSprite(windowWidth/2, 80)
title.addImage(titleI)
title.scale = 0.9;
laugh = createSprite(windowWidth/2, 270);
laugh.addImage(laughI);
laugh.scale = 0.2;
sad = createSprite(windowWidth/2, 550);
sad.addImage(sadI);
sad.scale = 0.2;
annoy = createSprite(windowWidth/2, 830);
annoy.addImage(annoyI);
annoy.scale = 0.2;
moti = createSprite(windowWidth/2, 1110);
moti.addImage(motiI);
moti.scale = 0.2;
stress = createSprite(windowWidth/2, 1390);
stress.addImage(stressI);
stress.scale = 0.2;
angry = createSprite(windowWidth/2, 1670);
angry.addImage(angryI);
angry.scale = 0.2;
}
function draw() {
background(0);
if(mouseIsPressed){
laugh.visible = false;
}
drawSprites();
}
On a phone I believe you will get the mousePressed() event if a user taps, and mouseIsPressed should be set to true when a touch happens (at least until the number of touches decreases). However you can also explicitly check for touches with the touches array.
function setup() {
createCanvas(windowWidth, windowHeight);
// Prevent top level gesture scrolling/zooming
// This if iOS Safari specific
document.addEventListener("gesturestart", function (e) {
e.preventDefault();
return false;
});
}
let pressedAt;
let clickedAt;
function mousePressed(e) {
pressedAt = frameCount;
}
function mouseClicked(e) {
clickedAt = frameCount;
}
function draw() {
background(220);
if (frameCount - clickedAt < 30) {
background("orange");
} else if (frameCount - pressedAt < 30) {
background("blue");
} else {
if (touches.length) {
background("green");
text(`${mouseIsPressed ? 'mouse pressed' : 'mouse not pressed'} (touches: ${touches.length})`, 10, height / 2);
} else if (mouseIsPressed) {
background("red");
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Since snippets don't work on mobile, you can run the example here: https://editor.p5js.org/Kumu-Paul/full/LpkV7Gio2