"use strict"; var canvas, ctx, cluster=[], π=Math.PI, Row=100, Col=200, inputs, color=[250,250,0], touch={ x:100, y:100, responsiveness:0.7 //range(0-1) }, imageData, data ; alert("So i sat in my lab for hours thinking...what if i could engineer a cloth made of micro-organisms that can heal themselves on destruction?\n\nInfo:swipe or tap the cloth to destroy"); window.onload=load; function load(){ inputs=document.getElementsByTagName("input"); canvas=document.querySelector("canvas"); canvas.width=screen.width*0.95; canvas.height=screen.height*0.74; canvas.addEventListener("touchstart",detectTouch); canvas.addEventListener("mousestart",detectTouch); canvas.addEventListener("touchmove",detectTouch); ctx=canvas.getContext("2d"); ctx.fillStyle="white"; createCluster(); spread(); draw(); inputs[0].oninput=adjustTouch; inputs[1].oninput=adjustColor; } function createCluster(){ for(var row=canvas.width*0.1; row0.5 ){ cluster[i].x+=Math.cos(cluster[i].angle)/4; cluster[i].y+=Math.sin(cluster[i].angle)/4; } else{ cluster[i].x=cluster[i].ox; cluster[i].y=cluster[i].oy; } } } requestAnimationFrame(spread); } function particle(ox,oy){ this.ox=ox; this.oy=oy; this.x=ox; this.y=oy; this.angle=0; this.init=true; } function findAngle(a,b,c){ var mx=a-c.x; var my=b-c.y; var angle=Math.atan2(my,mx); return angle; } function findDistance(a,b,c){ var mx=a-c.x; var my=b-c.y; var dist=Math.sqrt(mx*mx+my*my); return dist; } function draw(){ ctx.clearRect(0,0,canvas.width,canvas.height); imageData=ctx.getImageData(0,0,canvas.width,canvas.height); data=imageData.data; /* for (var y = 0; y < canvas.height; ++y) { for (var x = 0; x < canvas.width;++x) { var index=(y*canvas.width+x)*4; data[index]=0; data[index+1]=y; data[index+2]=255-y; data[index+3]=255-y; } } */ for(var i=0;i4&& cluster[i].x4&& cluster[i].y

Indestructible Cloth