Linear Bending Grid - Demo

Click & drag to bend grid

by Brett

HTML

<canvas id="canvas">(Click & drag on the canvas)</canvas>

JavaScript

var canvas;
var context;
var darken = new Image();
var nodes; //width x height
var width = 480;
var height = 320;
var framerate = 30;
var bgColor = "#000000";
var lineColor = "#808080";
var nodeDist = 32;
var extra = 2; //# of rows & columns off-screen
var intensity = 600000;

var mouse = {
	x: 0,
	y: 0,
	pressed: false
};

function mouseMoved(event){
    var rect = canvas.getBoundingClientRect();
    mouse.x = event.clientX - rect.left;
    mouse.y = event.clientY - rect.top;
}

//when mouse is pressed check if bubble or paint has been selected
function mousePressed(event){
    mouse.pressed = true;
}

//when mouse is released deselect bubble and combine overlapping bubbles
function mouseReleased(event){
    mouse.pressed = false;
    for(var i=0;i<nodes.length;i++){
		for(var j=0;j<nodes[0].length;j++){
			nodes[i][j].xAdj = nodes[i][j].x;
			nodes[i][j].yAdj = nodes[i][j].y;
		}
	}
}

function Node(x, y){
	//anchor position
	this.x = x;
	this.y = y;
	//drawn position
	this.adjX = x;
	this.adjY = y;
}

function createNodes(){
	var result = [];
	for(var x=-extra*nodeDist;x<=width+extra*nodeDist;x+=nodeDist){
		var column = [];
		for(var y=-extra*nodeDist;y<=height+extra*nodeDist;y+=nodeDist){
			column.push(new Node(x, y));
		}
		result.push(column);
	}
	return result;
}

function init(){
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	canvas.width = width;
	canvas.height = height;
	canvas.addEventListener("mousemove", mouseMoved, false);
	canvas.addEventListener('mousedown', mousePressed, false);
    canvas.addEventListener('mouseup', mouseReleased, false);
    darken.src = "http://people.ucsc.edu/~bhoutz/host/darken.png";
	nodes = createNodes();
	context.strokeStyle = lineColor;
	context.fillStyle = bgColor;
}

function update(){
	if(mouse.pressed){
		var node;
		var xDist;
		var yDist;
		var disp;
		var xDisp;
		var yDisp;
		for(var i=0;i<nodes.length;i++){
			for(var j=0;j<nodes[0].length;j++){
				node = nodes[i][j];
      ...