var cvs, ctx, w, h; var texture, size; var imageData, data; var touchX, touchY, dx, dy; var mesh; function Mesh(path) { this.path = new Float32Array(path); this.isInside = function(x, y) { var path = this.path, len = path.length; var x1, y1, x2, y2, i, count = 0; x1 = path[len-2]; y1 = path[len-1]; x2 = path[0]; y2 = path[1]; if((y-y1)*(y-y2)<0&&(xx&&x2>x||(x2-x1)*(y-y1)/(y2-y1)>=x-x1)) count++; for(i = 2; i < len; i += 2) { x1 = path[i-2]; y1 = path[i-1]; x2 = path[i]; y2 = path[i+1]; if((y-y1)*(y-y2)<0&&(xx&&x2>x||(x2-x1)*(y-y1)/(y2-y1)>=x-x1)) count++; } return count & 1; } } onload = function() { cvs = document.querySelector("canvas"); w = cvs.width = Math.floor(innerWidth/4); h = cvs.height = Math.floor(innerHeight/4); ctx = cvs.getContext("2d"); touchX = touchY = dx = dy = 0; cvs.ontouchstart = function(event) { var touch = event.touches[0]; touchX = touch.pageX; touchY = touch.pageY; } cvs.ontouchmove = function(event) { var touch = event.touches[0]; dx = touch.pageX - touchX; dy = touch.pageY - touchY; dx *= w/innerWidth; dy *= h/innerHeight; for(var i = 0; i < mesh.path.length; i += 2) { mesh.path[i] += dx; mesh.path[i+1] += dy; } touchX = touch.pageX; touchY = touch.pageY; } generateTexture(); initMesh(); grabImageData(); animate(); setTimeout(function() { alert("try to drag mesh"); }, 1000); } //learned from ChillPill's codes ;) function generateTexture() { size = 50; var len = size*size; texture = new Uint8Array(len); for(var y = 0; y < size; y++) for(var x = 0; x < size; x++) texture[y*size+x] = (x/size*256)^(y/size*256); } function initMesh() { mesh = []; for(var a = 0; a < 2*Math.PI; a += Math.PI/3) { var r = Math.min(w, h)/2; r *= .4*Math.random() + .6; var x = r * Math.cos(a); var y = r * Math.sin(a); mesh.push(w/2 + x, h/2 + y); } mesh = new Mesh(mesh); } function grabImageData() { ctx.fillRect(0, 0, w, h); imageData = ctx.getImageData(0, 0, w, h); data = imageData.data; } function animate() { var x, y, i, j, ddx, ddy, len, offsetX, offsetY; for(y = 0; y < h; y++) for(x = 0; x < w; x++) { if(mesh.isInside(x, y)) { offsetX = 0; offsetY = 0; i = 4*(y*w + x); j = ((y-offsetY+100*size)%size)*size + (x-offsetX+100*size)%size; data[i] = data[i+1] = data[i+2] = texture[j]; } else { i = 4*(y*w + x); data[i] = data[i+1] = data[i+2] = 0; } } ctx.putImageData(imageData, 0, 0); requestAnimationFrame(animate); }

mesh texturing