TinyChan

function appendStyle(CSS){
  let existingStyles=document.querySelectorAll("style");
  for(let style of existingStyles)
    if(style.innerHTML===CSS)return; //Already exists…
  let style=document.createElement("style");
  style.type="text/css";
  document.head.appendChild(style);
  style.appendChild(document.createTextNode(CSS));
  /*if(!document.querySelector(`style:contains("${CSS}")`)){ //Error: not a valid selector…
    let style=document.createElement("style");
    style.type="text/css";style.innerHTML=CSS;
    document.head.appendChild(style);
  }*/
}
function handleTouch(event){ //Converts touches to mouse events…
  let touch=event.touches[0],
      type=event.type;
  //window[event.type.replace(/touch(.)/i,(match,p1)=>"mouse"+p1.toUpperCase())](touch.clientX,touch.clientY); //Doesn't work because: “start” → “Pressed”, “move” → “Dragged”, “end” → “Released”…
  //mouseX=touch.clientX;mouseY=touch.clientY;
  switch(type){
    case"touchstart":
      mousePressed(touch.clientX,touch.clientY);
      //mouseIsPressed=true;
      break;
    case"touchmove":
      mouseDragged(touch.clientX,touch.clientY);
      break;
    case"touchend":
      mouseReleased(touch.clientX,touch.clientY);
      //mouseIsPressed=false;
      break;
  }
}
function setup(){
  let metaContent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"; //Prevent zooming…
  if(!document.querySelector(`meta[name="viewport"][content="${metaContent}"]`)){
    let meta=document.createElement("meta");
    meta.name="viewport";
    meta.content=metaContent;
    document.head.appendChild(meta);
  }
  createCanvas(windowWidth,windowHeight);
  appendStyle(`html,body{overscroll-behavior-y:contain;}`); //Prevent pull-down-to-refresh…
  /* Optional…
  document.addEventListener("touchstart",handleTouch);
  document.addEventListener("touchmove",handleTouch);
  document.addEventListener("touchend",handleTouch);
  */
}
function draw(){
  background(200);
  for(let touch of touches){
    stroke(0);strokeWeight(30);
    point(touch.x,touch.y);
    noStroke();fill(0);
    textAlign(CENTER,BOTTOM);
    text(`(${+touch.x.toFixed(2)},${+touch.y.toFixed(2)})\nID: ${touch.id}`,touch.x,touch.y-32)
  }
}
//Prevent default (e.g. panning/zooming)…
function touchStarted(){return false;}
function touchEnded(){return false;}
function touchMoved(){return false;}