Skip to content

Instantly share code, notes, and snippets.

@pageman
Created November 16, 2011 09:44
Show Gist options
  • Save pageman/1369690 to your computer and use it in GitHub Desktop.
Save pageman/1369690 to your computer and use it in GitHub Desktop.
$(function() {
var canvas = $("#c");
var canvasHeight;
var canvasWidth;
var ctx;
var dt = 0.1;
var pointCollection;
function init() {
updateCanvasDimensions();
var g =
[new Point(1, 1, 0.0, 9, "#ed9d33"),
new Point(2, 20, 0.0, 8, "#d44d61"),
new Point(3, 40, 0.0, 7, "#4f7af2"),
new Point(1, 60, 0.0, 7, "#678822"),
new Point(2, 80,0.0, 9, "#540AB3"),
new Point(2, 70, 0.0, 8, "#c32711"),
new Point(10, 3, 0.0, 7, "#ef0903"),
new Point(20, 2, 0.0, 6, "#ea14a3"),
new Point(30, 2, 0.0, 7, "#eb24b7"),
new Point(40, 1, 0.0, 7, "#ec34c9"),
new Point(10, 33, 0.0, 7, "#ef0903"),
new Point(20, 32, 0.0, 6, "#ea14a3"),
new Point(30, 32, 0.0, 7, "#eb24b7"),
new Point(40, 31, 0.0, 7, "#ec34c9"),
new Point(50, 31, 0.0, 8, "#ed44d1"),
new Point(52, 33, 0.0, 9, "#ee55e6"),
new Point(55, 20, 0.0, 8, "#245ab9"),
new Point(60, 5, 0.0, 8, "#c32711"),
new Point(60, 10,0.0, 9, "#874422"),
new Point(107,40,0.0, 15,"#8a19c9"),
new Point(137,40,0.0, 15,"#8a19c9"),
new Point(120,15,0.0, 8,"#0edf7f"),
new Point(120,75,0.0, 8,"#0edf7f"),
new Point(89,45,0.0, 8,"#0edf7f"),
new Point(155,45,0.0, 8,"#0edf7f"),
new Point(100,25,0.0, 8,"#0edf7f"),
new Point(140,65,0.0, 8,"#0edf7f"),
new Point(100,65,0.0, 8,"#0edf7f"),
new Point(140,65,0.0, 8,"#0edf7f"),
new Point(145,25,0.0,8, "#0edf7f"),
new Point(300, 83, 0.0, 9, "#d44d61"),
new Point(256, 69, 0.0, 9, "#4f7af2"),
new Point(199,3, 0.0, 4,"#6cdf2c"),
new Point(201,13, 0.0, 4,"#bbdf3c"),
new Point(200,23, 0.0, 4,"#dfdf2c"),
new Point(201,33, 0.0, 5,"#dfb32c"),
new Point(199,43, 0.0, 6,"#df8c2c"),
new Point(198,53, 0.0, 7,"#df642c"),
new Point(201,63, 0.0, 8,"#df782c"),
new Point(202,69, 0.0, 9,"#df2c58"),
new Point(212,69, 0.0, 10,"#df502c"),
new Point(222,69, 0.0, 11,"#df782c"),
new Point(232,69, 0.0, 12,"#df982c"),
new Point(242,69, 0.0, 13,"#dfc72c"),
new Point(252,69, 0.0, 14,"#cfdf2c")];
gLength = g.length;
for (var i = 0; i < gLength; i++) {
g[i].curPos.x = (canvasWidth/2 - 180) + g[i].curPos.x;
g[i].curPos.y = (canvasHeight/2 - 65) + g[i].curPos.y;
g[i].originalPos.x = (canvasWidth/2 - 180) + g[i].originalPos.x;
g[i].originalPos.y = (canvasHeight/2 - 65) + g[i].originalPos.y;
};
pointCollection = new PointCollection();
pointCollection.points = g;
initEventListeners();
timeout();
};
function initEventListeners() {
$(window).bind('resize', updateCanvasDimensions).bind('mousemove', onMove);
canvas.get(0).ontouchmove = function(e) {
e.preventDefault();
onTouchMove(e);
};
canvas.get(0).ontouchstart = function(e) {
e.preventDefault();
};
};
function updateCanvasDimensions() {
canvas.attr({height: $(window).height(), width: $(window).width()});
canvasWidth = canvas.width();
canvasHeight = canvas.height();
draw();
};
function onMove(e) {
if (pointCollection)
pointCollection.mousePos.set(e.pageX, e.pageY);
};
function onTouchMove(e) {
if (pointCollection)
pointCollection.mousePos.set(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
};
function timeout() {
draw();
update();
setTimeout(function() { timeout() }, 30);
};
function draw() {
var tmpCanvas = canvas.get(0);
if (tmpCanvas.getContext == null) {
return;
};
ctx = tmpCanvas.getContext('2d');
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
if (pointCollection)
pointCollection.draw();
};
function update() {
if (pointCollection)
pointCollection.update();
};
function Vector(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
this.addX = function(x) {
this.x += x;
};
this.addY = function(y) {
this.y += y;
};
this.addZ = function(z) {
this.z += z;
};
this.set = function(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
};
};
function PointCollection() {
this.mousePos = new Vector(0, 0);
this.points = new Array();
this.newPoint = function(x, y, z) {
var point = new Point(x, y, z);
this.points.push(point);
return point;
};
this.update = function() {
var pointsLength = this.points.length;
for (var i = 0; i < pointsLength; i++) {
var point = this.points[i];
if (point == null)
continue;
var dx = this.mousePos.x - point.curPos.x;
var dy = this.mousePos.y - point.curPos.y;
var dd = (dx * dx) + (dy * dy);
var d = Math.sqrt(dd);
if (d < 150) {
point.targetPos.x = (this.mousePos.x < point.curPos.x) ? point.curPos.x - dx : point.curPos.x - dx;
point.targetPos.y = (this.mousePos.y < point.curPos.y) ? point.curPos.y - dy : point.curPos.y - dy;
} else {
point.targetPos.x = point.originalPos.x;
point.targetPos.y = point.originalPos.y;
};
point.update();
};
};
this.draw = function() {
var pointsLength = this.points.length;
for (var i = 0; i < pointsLength; i++) {
var point = this.points[i];
if (point == null)
continue;
point.draw();
};
};
};
function Point(x, y, z, size, colour) {
this.colour = colour;
this.curPos = new Vector(x, y, z);
this.friction = 0.8;
this.originalPos = new Vector(x, y, z);
this.radius = size;
this.size = size;
this.springStrength = 0.1;
this.targetPos = new Vector(x, y, z);
this.velocity = new Vector(0.0, 0.0, 0.0);
this.update = function() {
var dx = this.targetPos.x - this.curPos.x;
var ax = dx * this.springStrength;
this.velocity.x += ax;
this.velocity.x *= this.friction;
this.curPos.x += this.velocity.x;
var dy = this.targetPos.y - this.curPos.y;
var ay = dy * this.springStrength;
this.velocity.y += ay;
this.velocity.y *= this.friction;
this.curPos.y += this.velocity.y;
var dox = this.originalPos.x - this.curPos.x;
var doy = this.originalPos.y - this.curPos.y;
var dd = (dox * dox) + (doy * doy);
var d = Math.sqrt(dd);
this.targetPos.z = d/100 + 1;
var dz = this.targetPos.z - this.curPos.z;
var az = dz * this.springStrength;
this.velocity.z += az;
this.velocity.z *= this.friction;
this.curPos.z += this.velocity.z;
this.radius = this.size*this.curPos.z;
if (this.radius < 1) this.radius = 1;
};
this.draw = function() {
ctx.fillStyle = this.colour;
ctx.beginPath();
ctx.arc(this.curPos.x, this.curPos.y, this.radius, 0, Math.PI*2, true);
ctx.fill();
};
};
init();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment