JS1k: The JavaScript code golfing competition
2013 - Spring!
Color Shift
This is a canvas demo that overlaps multiple circles drawn at a low opacity. The color shifts over time and the circles increase in size. The composite mode is set to lighter and the canvas is cleared…
- Author:
- Jack Rugile
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- jackrugile.com
- Compo:
- classic
- Demo link:
- https://js1k.com/2013-spring/demo/1315
- Shortlink:
- https://js1k.com/1315
- Blog post:
- please update here!
- Bytes:
- 928
- Chars:
- 928
- Submission
function p(){this.x=~~(Math.random()*(e-e/3-e/3+1))+e/3,this.y=~~(Math.random()*(h-h/3-h/3+1))+h/3,this.a=.1,this.c=this.d=1,this.b=(e+h)/7}var e=h=c.width=c.height=250,f=c.style,g=[],j=0;k=this.requestAnimationFrame||this.webkitRequestAnimationFrame||this.mozRequestAnimationFrame||this.oRequestAnimationFrame||this.msRequestAnimationFrame||function(a){setTimeout(a,1e3/60)},b.style.backgroundColor="#000",f.position="absolute",f.left=f.top="50%",f.marginLeft=f.marginTop="-125px",function q(){k(q,c),a.globalCompositeOperation="destination-out",a.fillStyle="rgba(0, 0, 0, .05)",a.fillRect(0,0,e,h),a.globalCompositeOperation="lighter";var b=g.length;for(0==j%2&&g.push(new p);b--;){var d=g[b],f=b,i=(d.b-d.a)/d.b;d.c=.5+d.d*i,d.a+=d.c,d.alpha=2.5*i,a.beginPath(),a.arc(d.x,d.y,d.a,0,2*Math.PI),a.fillStyle="hsla("+(~~(Math.random()*(j+100-(j-100)+1))+(j-100))+", 100%, 1%, "+d.alpha+")",a.fill(),d.a>d.b&&g.splice(f,1)}j++}();- Description
- This is a canvas demo that overlaps multiple circles drawn at a low opacity. The color shifts over time and the circles increase in size. The composite mode is set to lighter and the canvas is cleared at a low opacity to create a blended effect between the circles. Nothing super tricky or complicated in terms of compression, just Google Closure Compiler. The idea was based on a similar recent demo I made here: http://codepen.io/jackrugile/pen/hgdzl
- Base64 encoded
ZnVuY3Rpb24gcCgpe3RoaXMueD1+fihNYXRoLnJhbmRvbSgpKihlLWUvMy1lLzMrMSkpK2UvMyx0aGlzLnk9fn4oTWF0aC5yYW5kb20oKSooaC1oLzMtaC8zKzEpKStoLzMsdGhpcy5hPS4xLHRoaXMuYz10aGlzLmQ9MSx0aGlzLmI9KGUraCkvN312YXIgZT1oPWMud2lkdGg9Yy5oZWlnaHQ9MjUwLGY9Yy5zdHlsZSxnPVtdLGo9MDtrPXRoaXMucmVxdWVzdEFuaW1hdGlvbkZyYW1lfHx0aGlzLndlYmtpdFJlcXVlc3RBbmltYXRpb25GcmFtZXx8dGhpcy5tb3pSZXF1ZXN0QW5pbWF0aW9uRnJhbWV8fHRoaXMub1JlcXVlc3RBbmltYXRpb25GcmFtZXx8dGhpcy5tc1JlcXVlc3RBbmltYXRpb25GcmFtZXx8ZnVuY3Rpb24oYSl7c2V0VGltZW91dChhLDFlMy82MCl9LGIuc3R5bGUuYmFja2dyb3VuZENvbG9yPSIjMDAwIixmLnBvc2l0aW9uPSJhYnNvbHV0ZSIsZi5sZWZ0PWYudG9wPSI1MCUiLGYubWFyZ2luTGVmdD1mLm1hcmdpblRvcD0iLTEyNXB4IixmdW5jdGlvbiBxKCl7ayhxLGMpLGEuZ2xvYmFsQ29tcG9zaXRlT3BlcmF0aW9uPSJkZXN0aW5hdGlvbi1vdXQiLGEuZmlsbFN0eWxlPSJyZ2JhKDAsIDAsIDAsIC4wNSkiLGEuZmlsbFJlY3QoMCwwLGUsaCksYS5nbG9iYWxDb21wb3NpdGVPcGVyYXRpb249ImxpZ2h0ZXIiO3ZhciBiPWcubGVuZ3RoO2ZvcigwPT1qJTImJmcucHVzaChuZXcgcCk7Yi0tOyl7dmFyIGQ9Z1tiXSxmPWIsaT0oZC5iLWQuYSkvZC5iO2QuYz0uNStkLmQqaSxkLmErPWQuYyxkLmFscGhhPTIuNSppLGEuYmVnaW5QYXRoKCksYS5hcmMoZC54LGQueSxkLmEsMCwyKk1hdGguUEkpLGEuZmlsbFN0eWxlPSJoc2xhKCIrKH5+KE1hdGgucmFuZG9tKCkqKGorMTAwLShqLTEwMCkrMSkpKyhqLTEwMCkpKyIsIDEwMCUsIDElLCAiK2QuYWxwaGErIikiLGEuZmlsbCgpLGQuYT5kLmImJmcuc3BsaWNlKGYsMSl9aisrfSgpOw==- Original source
Original source not submitted