- Author:
- Evan Hahn
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- evanhahn.com
- Compo:
- classic
- Demo link:
- https://js1k.com/2013-spring/demo/1511
- Shortlink:
- https://js1k.com/1511
- Blog post:
- please update here!
- Bytes:
- 971
- Chars:
- 971
- Submission
// evanhahn.com
x=y=r=-1;f=I=0;s=50;m=Math;t=setTimeout;b.style.cssText="margin:0;background:#000;font-family:sans-serif;overflow:hidden";(onresize=function(){w=c.width=innerWidth;h=c.height=innerHeight;c.focus()})();(d=function(){if(r^-1)with(a)fillStyle=strokeStyle="#"+(16777216*m.random()|0).toString(16),beginPath(),arc(x,y,r,0,7),stroke(),f&&fill();t(d,s)})();onmousemove=function(e){X=e.clientX-x;Y=e.clientY-y;r=2*m.sqrt(X*X+Y*Y);x+=X;y+=Y};onclick=function(){f=!f};
onkeyup=function(e){32==(K=e.keyCode)&&a.clearRect(0,0,w,h);38==K&&(s-=25);40==K&&(s+=25);s=m.min(m.max(s,5),150)};(S=(L=document.createElement("div")).style).cssText="position:fixed;background:#fff;text-align:right";S.top=S.right=S.padding="20px";L.innerHTML="<b>circles!</b><br>mouse = draw<br>click = toggle solid<br>up = faster<br>down = slower<br>space = clear";b.appendChild(L);t(function(){for(;1E3>I;I+=10)t(function(e){S.opacity=e},I,1-I/1E3);t(function(){S.display="none"},1E3)},8E3);
- Description
- Draw colorful circles!
- Base64 encoded
Ly8gZXZhbmhhaG4uY29tDQp4PXk9cj0tMTtmPUk9MDtzPTUwO209TWF0aDt0PXNldFRpbWVvdXQ7Yi5zdHlsZS5jc3NUZXh0PSJtYXJnaW46MDtiYWNrZ3JvdW5kOiMwMDA7Zm9udC1mYW1pbHk6c2Fucy1zZXJpZjtvdmVyZmxvdzpoaWRkZW4iOyhvbnJlc2l6ZT1mdW5jdGlvbigpe3c9Yy53aWR0aD1pbm5lcldpZHRoO2g9Yy5oZWlnaHQ9aW5uZXJIZWlnaHQ7Yy5mb2N1cygpfSkoKTsoZD1mdW5jdGlvbigpe2lmKHJeLTEpd2l0aChhKWZpbGxTdHlsZT1zdHJva2VTdHlsZT0iIyIrKDE2Nzc3MjE2Km0ucmFuZG9tKCl8MCkudG9TdHJpbmcoMTYpLGJlZ2luUGF0aCgpLGFyYyh4LHksciwwLDcpLHN0cm9rZSgpLGYmJmZpbGwoKTt0KGQscyl9KSgpO29ubW91c2Vtb3ZlPWZ1bmN0aW9uKGUpe1g9ZS5jbGllbnRYLXg7WT1lLmNsaWVudFkteTtyPTIqbS5zcXJ0KFgqWCtZKlkpO3grPVg7eSs9WX07b25jbGljaz1mdW5jdGlvbigpe2Y9IWZ9Ow0Kb25rZXl1cD1mdW5jdGlvbihlKXszMj09KEs9ZS5rZXlDb2RlKSYmYS5jbGVhclJlY3QoMCwwLHcsaCk7Mzg9PUsmJihzLT0yNSk7NDA9PUsmJihzKz0yNSk7cz1tLm1pbihtLm1heChzLDUpLDE1MCl9OyhTPShMPWRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImRpdiIpKS5zdHlsZSkuY3NzVGV4dD0icG9zaXRpb246Zml4ZWQ7YmFja2dyb3VuZDojZmZmO3RleHQtYWxpZ246cmlnaHQiO1MudG9wPVMucmlnaHQ9Uy5wYWRkaW5nPSIyMHB4IjtMLmlubmVySFRNTD0iPGI+Y2lyY2xlcyE8L2I+PGJyPm1vdXNlID0gZHJhdzxicj5jbGljayA9IHRvZ2dsZSBzb2xpZDxicj51cCA9IGZhc3Rlcjxicj5kb3duID0gc2xvd2VyPGJyPnNwYWNlID0gY2xlYXIiO2IuYXBwZW5kQ2hpbGQoTCk7dChmdW5jdGlvbigpe2Zvcig7MUUzPkk7SSs9MTApdChmdW5jdGlvbihlKXtTLm9wYWNpdHk9ZX0sSSwxLUkvMUUzKTt0KGZ1bmN0aW9uKCl7Uy5kaXNwbGF5PSJub25lIn0sMUUzKX0sOEUzKTs=
- Original source
// Circles 1K
// by Evan Hahn (evanhahn.com)
// This code is licensed under the Unlicense. For more information, refer to
// <http://unlicense.org/>.
// Enjoy!
////////////////////////////////////////////////////////////////////////////////
// Globals are lowercase.
// Temporary variables are uppercase.
// Here's the list of globals:
// b = <body>
// c = <canvas>
// a = canvas context
// x, y = coordinates of circle
// r = radius of circle
// f = boolean, whether it's filled
// s = how often to draw a new circle
// d = function, draw the circle
// m = Math
// t = setTimeout
////////////////////////////////////////////////////////////////////////////////
// Initial drawing setup.
x = y = r = -1;
f = I = 0; // I is used later
s = 50;
// Shorthands.
m = Math;
t = setTimeout;
// Style the <body>.
b.style.cssText = 'margin:0;background:#000;font-family:sans-serif;overflow:hidden';
// Make the canvas fill the window. Call it right now, but also bind it to the
// window's resize event. Also, focus the canvas.
(onresize = function() {
w = c.width = innerWidth;
h = c.height = innerHeight;
c.focus();
})();
// Start drawing the circle.
(d = function() {
// If we've started...
// (r ^ -1) is equivalent to (r != -1)
if (r ^ -1) {
// Draw it!
// We ALWAYS draw the stroke and only sometimes fill. This is just to save
// bytes.
with (a) {
// What color? This is a shorthand for the following:
// Math.floor(Math.random() * parseInt('FFFFFF', 16)).toString(16);
fillStyle = strokeStyle = '#' + ((m.random() * (1 << 24))|0).toString(16);
// Draw the arc.
beginPath();
arc(x, y, r, 0, 7); // I use 7 because 7 > (2 * pi)
stroke();
if (f)
fill();
}
}
// Go again!
t(d, s);
})();
// Move the figure.
// Make the radius's size proportional to how far away it was.
onmousemove = function(E) {
X = E.clientX - x;
Y = E.clientY - y;
r = m.sqrt(X*X + Y*Y) * 2;
x += X;
y += Y;
};
// Toggle whether it's a solid dot.
onclick = function() {
f = !f;
};
// Deal with keyboard stuff.
onkeyup = function(E) {
// Spacebar clears everything.
// We're also assigning the keycode to K here.
if ((K = E.keyCode) == 32)
a.clearRect(0, 0, w, h);
// Change refresh speed with the arrow keys.
if (K == 38)
s -= 25;
if (K == 40)
s += 25;
// s must be within [5, 150].
s = m.min(m.max(s, 5), 150);
};
// Make start the notification and put it in the DOM.
(S = (L = document.createElement('div')).style).cssText = 'position:fixed;background:#fff;text-align:right';
S.top = S.right = S.padding = '20px';
L.innerHTML = '<b>circles!</b><br>mouse = draw<br>click = toggle solid<br>up = faster<br>down = slower<br>space = clear';
b.appendChild(L);
// Fade the start notification away.
t(function() {
for (; I < 1E3; I += 10) {
t(function(O) {
S.opacity = O;
}, I, 1 - (I / 1E3));
}
t(function() {
S.display = 'none';
}, 1E3);
}, 8E3);
