JS1k: The JavaScript code golfing competition
2010 - The Original
Old school (circa 98) mouse trail in under 1/2 a K. Uses an object pool to minimize memory usage and HTML/CSS3 to create the trail. No canvas required. Update 2: Slightly smaller (tighter CSS footprin…
- Author:
- Patrick Denny
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- atomicnoggin.ca
- Compo:
- classic
- Demo link:
- https://js1k.com/2010-first/demo/330
- Shortlink:
- https://js1k.com/330
- Blog post:
- please update here!
- Bytes:
- 416
- Chars:
- 416
- Submission
D=document,B=D.body,a=[],p=[];D.onmousemove=function(e){(d=p[0]?p.pop():D.createElement('p')).setAttribute('style',(t='border-radius:5px;')+'-moz-'+t+'-webkit-'+t+'position:absolute;left:'+e.clientX+'px;top:'+e.clientY+'px;padding:5px;background:#'+('00'+(~~(Math.random()*4095)).toString(16)).substr(-3));a.push(B.appendChild(d))};setInterval(function(){if(a[0])do{p.push(B.removeChild(a.shift()))}while(a[20])},20)- Description
- Old school (circa 98) mouse trail in under 1/2 a K. Uses an object pool to minimize memory usage and HTML/CSS3 to create the trail. No canvas required. Update 2: Slightly smaller (tighter CSS footprint) and fixed bug where random color generator occasionally returned invalid CSS color values. Update 3: further compression/optimization found. I call it - OMG Ponies!!!
- Base64 encoded
RD1kb2N1bWVudCxCPUQuYm9keSxhPVtdLHA9W107RC5vbm1vdXNlbW92ZT1mdW5jdGlvbihlKXsoZD1wWzBdP3AucG9wKCk6RC5jcmVhdGVFbGVtZW50KCdwJykpLnNldEF0dHJpYnV0ZSgnc3R5bGUnLCh0PSdib3JkZXItcmFkaXVzOjVweDsnKSsnLW1vei0nK3QrJy13ZWJraXQtJyt0Kydwb3NpdGlvbjphYnNvbHV0ZTtsZWZ0OicrZS5jbGllbnRYKydweDt0b3A6JytlLmNsaWVudFkrJ3B4O3BhZGRpbmc6NXB4O2JhY2tncm91bmQ6IycrKCcwMCcrKH5+KE1hdGgucmFuZG9tKCkqNDA5NSkpLnRvU3RyaW5nKDE2KSkuc3Vic3RyKC0zKSk7YS5wdXNoKEIuYXBwZW5kQ2hpbGQoZCkpfTtzZXRJbnRlcnZhbChmdW5jdGlvbigpe2lmKGFbMF0pZG97cC5wdXNoKEIucmVtb3ZlQ2hpbGQoYS5zaGlmdCgpKSl9d2hpbGUoYVsyMF0pfSwyMCk=- Original source
//compressed/optimized By hand. This is the source code //init global vars D=document,B=D.body,a=[],p=[]; //on each mousemove event, Grab a dot from object pool if any exist, otherwise creates a new element. then add it to the screen D.onmousemove=function(e){ (d=p[0]?p.pop():D.createElement('p')).setAttribute('style',(t='border-radius:5px;')+'-moz-'+t+'-webkit-'+t+'position:absolute;left:'+e.clientX+'px;top:'+e.clientY+'px;padding:5px;background:#'+('00'+(~~(Math.random()*4095)).toString(16)).substr(-3)); a.push(B.appendChild(d))}; //removes at one (or more, if more than 20 exist on screen) dots from the screen and adds them to the object pool setInterval(function(){if(a[0])do{p.push(B.removeChild(a.shift()))}while(a[20])},20)