- Author:
- Steve Guidetti
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- ultramegatech.com
- Compo:
- classic
- Demo link:
- https://js1k.com/2010-first/demo/602
- Shortlink:
- https://js1k.com/602
- Blog post:
- please update here!
- Bytes:
- 962
- Chars:
- 962
- Submission
var el=document.getElementById("c"),c=el.getContext("2d"),w=el.width=400,h=el.height=300,t=el.offsetTop,l=el.offsetLeft,p=[],clr=["red","green","blue","yellow","purple"],n=500,M=Math,r=M.random,f=M.floor,i,x,y;for(i=0;i<n;i++){p.push({x:w/2,y:h/2,vx:r()*12-6,vy:r()*12-6,r:r()*4+3,clr:f(r()*clr.length)})}setInterval(function(){c.fillStyle="rgba(0,0,0,0.5)";c.fillRect(0,0,w,h);for(i=0;i<n;i++){c.fillStyle=clr[p[i].clr];p[i].vx*=0.99;p[i].vy*=0.99;p[i].x+=p[i].vx;p[i].y+=p[i].vy;if(p[i].x<p[i].r||p[i].x>w-p[i].r){p[i].vx=-p[i].vx;p[i].x+=p[i].vx}if(p[i].y<p[i].r||p[i].y>h-p[i].r){p[i].vy=-p[i].vy;p[i].y+=p[i].vy}c.beginPath();c.arc(p[i].x,p[i].y,p[i].r,0,M.PI*2,true);c.fill()}},30);el.onmousemove=function(a){x=a.pageX-l;y=a.pageY-t;for(i=0;i<n;i++){if(M.abs(x-p[i].x)<20&&M.abs(y-p[i].y)<20){p[i].vx=(x-p[i].x)/3;p[i].vy=(y-p[i].y)/3}}};el.onclick=function(a){x=a.pageX-l;y=a.pageY-t;for(i=0;i<n;i++){p[i].vx=(x-p[i].x)*r()/20;p[i].vy=(y-p[i].y)*r()/20}};
- Description
- Lots of bouncy balls. Move the mouse and nearby balls will follow. Click and all the balls follow.
Update: Reduced size by 55 bytes
- Base64 encoded
dmFyIGVsPWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJjIiksYz1lbC5nZXRDb250ZXh0KCIyZCIpLHc9ZWwud2lkdGg9NDAwLGg9ZWwuaGVpZ2h0PTMwMCx0PWVsLm9mZnNldFRvcCxsPWVsLm9mZnNldExlZnQscD1bXSxjbHI9WyJyZWQiLCJncmVlbiIsImJsdWUiLCJ5ZWxsb3ciLCJwdXJwbGUiXSxuPTUwMCxNPU1hdGgscj1NLnJhbmRvbSxmPU0uZmxvb3IsaSx4LHk7Zm9yKGk9MDtpPG47aSsrKXtwLnB1c2goe3g6dy8yLHk6aC8yLHZ4OnIoKSoxMi02LHZ5OnIoKSoxMi02LHI6cigpKjQrMyxjbHI6ZihyKCkqY2xyLmxlbmd0aCl9KX1zZXRJbnRlcnZhbChmdW5jdGlvbigpe2MuZmlsbFN0eWxlPSJyZ2JhKDAsMCwwLDAuNSkiO2MuZmlsbFJlY3QoMCwwLHcsaCk7Zm9yKGk9MDtpPG47aSsrKXtjLmZpbGxTdHlsZT1jbHJbcFtpXS5jbHJdO3BbaV0udngqPTAuOTk7cFtpXS52eSo9MC45OTtwW2ldLngrPXBbaV0udng7cFtpXS55Kz1wW2ldLnZ5O2lmKHBbaV0ueDxwW2ldLnJ8fHBbaV0ueD53LXBbaV0ucil7cFtpXS52eD0tcFtpXS52eDtwW2ldLngrPXBbaV0udnh9aWYocFtpXS55PHBbaV0ucnx8cFtpXS55PmgtcFtpXS5yKXtwW2ldLnZ5PS1wW2ldLnZ5O3BbaV0ueSs9cFtpXS52eX1jLmJlZ2luUGF0aCgpO2MuYXJjKHBbaV0ueCxwW2ldLnkscFtpXS5yLDAsTS5QSSoyLHRydWUpO2MuZmlsbCgpfX0sMzApO2VsLm9ubW91c2Vtb3ZlPWZ1bmN0aW9uKGEpe3g9YS5wYWdlWC1sO3k9YS5wYWdlWS10O2ZvcihpPTA7aTxuO2krKyl7aWYoTS5hYnMoeC1wW2ldLngpPDIwJiZNLmFicyh5LXBbaV0ueSk8MjApe3BbaV0udng9KHgtcFtpXS54KS8zO3BbaV0udnk9KHktcFtpXS55KS8zfX19O2VsLm9uY2xpY2s9ZnVuY3Rpb24oYSl7eD1hLnBhZ2VYLWw7eT1hLnBhZ2VZLXQ7Zm9yKGk9MDtpPG47aSsrKXtwW2ldLnZ4PSh4LXBbaV0ueCkqcigpLzIwO3BbaV0udnk9KHktcFtpXS55KSpyKCkvMjB9fTs=
- Original source
var el = document.getElementById('c'),
c = el.getContext('2d'),
w = el.width = 400,
h = el.height = 300,
t = el.offsetTop,
l = el.offsetLeft,
p = [],
clr = ['red', 'green', 'blue', 'yellow', 'purple'],
n = 500,
M = Math,
r = M.random,
f = M.floor,
i, x, y;
for (i = 0; i < n; i++) {
p.push({
x: w / 2,
y: h / 2,
vx: r() * 12 - 6,
vy: r() * 12 - 6,
r: r() * 4 + 3,
clr: f(r() * clr.length)
});
}
setInterval(function () {
c.fillStyle = 'rgba(0,0,0,0.5)';
c.fillRect(0, 0, w, h);
for (i = 0; i < n; i++) {
c.fillStyle = clr[p[i].clr];
p[i].vx *= 0.99;
p[i].vy *= 0.99;
p[i].x += p[i].vx;
p[i].y += p[i].vy;
if (p[i].x < p[i].r || p[i].x > w - p[i].r) {
p[i].vx = -p[i].vx;
p[i].x += p[i].vx;
}
if (p[i].y < p[i].r || p[i].y > h - p[i].r) {
p[i].vy = -p[i].vy;
p[i].y += p[i].vy;
}
c.beginPath();
c.arc(p[i].x, p[i].y, p[i].r, 0, M.PI * 2, true);
c.fill();
}
}, 30);
el.onmousemove = function(e) {
x = e.pageX - l;
y = e.pageY - t;
for (i = 0; i < n; i++) {
if (M.abs(x - p[i].x) < 20 && M.abs(y - p[i].y) < 20) {
p[i].vx = (x - p[i].x) / 3;
p[i].vy = (y - p[i].y) / 3;
}
}
};
el.onclick = function(e) {
x = e.pageX - l;
y = e.pageY - t;
for (i = 0; i < n; i++) {
p[i].vx = (x - p[i].x) * r() / 20;
p[i].vy = (y - p[i].y) * r() / 20;
}
};
