Created
November 16, 2011 09:44
-
-
Save pageman/1369690 to your computer and use it in GitHub Desktop.
Google Balls http://jsfiddle.net/pHGge/1/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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