TinyChan

//TODO: Add interactive objects/elements, clean up mistakes…
EventTarget.prototype.addEventListeners=function(events,listener,...extra){
	if(typeof events==="string")events=events.split(/[, ;]+/).map(s=>s.trim());
	//if(typeof listener!=="function")throw new Error("Listener must be a function.");
	for(let e of events)this.addEventListener(e,listener,...extra);
};
let activeTouchID=null,
    mX,mY,pmX,pmY,mH=false,mC=false, //previous X & Y, hold, click
    debugText=[],
    path=[],clickGraphic;
function setup(){
	let canvas=createCanvas(windowWidth,windowHeight);
	//Set up event listeners for mobile touch and mouse events…
	canvas.canvas.addEventListeners("mousedown, touchstart",mPress);
	canvas.canvas.addEventListeners("mousemove, touchmove",mMove);
	canvas.canvas.addEventListeners("mouseup, touchend",mRelease);
}
function draw(){
	background(255);
	if(path.length){
		stroke(0,50);strokeWeight(2);
		//beginShape(LINES);for(let{x,y}of path)vertex(x,y);endShape();
		for(let i=1;i<path.length;i++)line(path[i-1].x,path[i-1].y,path[i].x,path[i].y);
	}
	if(clickGraphic){
		stroke(0,0,255);strokeWeight(Math.max(1,20-clickGraphic.t));
		point(clickGraphic.x,clickGraphic.y);
		clickGraphic.t++;
	}
	if(mH){strokeWeight(4);stroke(0,128,0);}else{strokeWeight(1);stroke(255,0,0);}
	if(mX&&mY){line(mX,0,mX,height);line(0,mY,width,mY);}
	noStroke();fill(0);textAlign(LEFT,TOP);
	text(`Touch ID: ${activeTouchID}\n(${mX},${mY})\n${mH?"Pressed":"Released"}\n${mC?"Clicked!":""}`,16,16);
	fill(0,128);textAlign(RIGHT,BOTTOM);
	let maxLength=50;if(debugText.length>maxLength)debugText.splice(0,debugText.length-maxLength);
	text(debugText.join("\n"),width-16,height-16);
	mC=false;pmX=mX;pmY=mY; //This should be at the bottom of this function…
}
//TODO: Potential multi-touch tracking issue (in mPress and mRelease): ID-1 press, ID-2 press, ID-1 release while ID-2 is holding (mouse pointer now needs to move to the 2nd ID)
function mPress(event){
	event.preventDefault(); //Prevent default behavior for touch events (e.g. zooming/panning)
	//Suggestion: m(X|Y)=isTouch?(isTouch?event.touches[0]:event).clientX-canvas.offset(Left|Top):mouse(X|Y);
	if(event.type==="touchstart"){
		/*Optional*/debugText.push(`Changed touches (start): ${event.changedTouches.length} (IDs: ${Array.from(event.changedTouches).map(x=>x.identifier).join(",")})`);
		mX=event.touches[0].clientX-canvas.offsetLeft;mY=event.touches[0].clientY-canvas.offsetTop;
		activeTouchID=event.touches[0].identifier; //Keep track of touch ID
		/*Optional*/debugText.push(`Touch (${event.touches[0].identifier}) started: (${mX},${mY})`);
	}else{
		mX=mouseX;mY=mouseY;
		/*Optional*/debugText.push(`Mouse down: (${mX},${mY})`);
	}
	mH=true;mC=true;clickGraphic={x:mX,y:mY,t:0};
	path=[{x:mX,y:mY}];
}
function mMove(event){
	event.preventDefault();
	if(event.type==="touchmove"){
		//You could also use event.touches[ID].force to get touch pressure (if supported)…
		/*Optional*/debugText.push(`Changed touches (move): ${event.changedTouches.length} (IDs: ${Array.from(event.changedTouches).map(x=>x.identifier).join(",")})`);
		for(let touch of event.changedTouches){ //Since using multiple fingers can interfere…
			if(touch.identifier===activeTouchID){
				mX=touch.clientX-canvas.offsetLeft;mY=touch.clientY-canvas.offsetTop;
				/*Optional*/debugText.push(`Touch (${touch.identifier}) moved: (${mX},${mY})`);
			}
		}
	}else{
		mX=mouseX;mY=mouseY;
		/*Optional*/debugText.push(`Mouse moved: (${mX},${mY})`);
	}
	path.push({x:mX,y:mY});
}
function mRelease(event){
	event.preventDefault();
	if(event.type==="touchend"){
		/*Optional*/debugText.push(`Changed touches (end): ${event.changedTouches.length} (IDs: ${Array.from(event.changedTouches).map(x=>x.identifier).join(",")})`);
		for(let touch of event.changedTouches){
			if(touch.identifier===activeTouchID){
				mX=touch.clientX-canvas.offsetLeft;mY=touch.clientY-canvas.offsetTop;
				activeTouchID=null;mH=false;
				/*Optional*/debugText.push(`Touch (${touch.identifier}) ended: (${mX},${mY})`);
			}
		}
		//TODO: Make this prettier…
		if(event.touches.length){ //What if there's still another finger holding down?
			activeTouchID=event.touches[0].identifier;mH=true;
			mX=event.touches[0].clientX-canvas.offsetLeft;mY=event.touches[0].clientY-canvas.offsetTop;
		}
	}else{
		mX=mouseX;mY=mouseY;mH=false;
		/*Optional*/debugText.push(`Mouse up: (${mX},${mY})`);
	}
	if(!mH)path=[];
}