JS1k 2012 - 1250 - Details - A lovely JavaScript golfing competition

Author:

Tyler Beck

Twitter:

GitHub:

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

Compo:

classic

Demo link:

https://js1k.com/2012-love/demo/1250

Shortlink:

https://js1k.com/1250

Blog post:

please update here!

Bytes:

1020

Chars:

1020

Submission

eval('(_(){_ l(b,d){return{x:b.x+d.x,y:b.y+d.y}}_ i(b,d){f++;e[f]||(e[f]=0);e[f]+=b;return{x:Math.cos(e[f])*d,y:Math.sin(e[f])*d}}_ r(){var b=i(n,s);a.beginPath();a.moveTo(g.x,g.y);h+=m?-1:1;if(123>=h||250<=h)m=!m;a.fillStyle="rgba(255,"+h+","+h+", .025)";for(var e=0;127>e;e++)f=-1,g=l(g,l(i(o,t),l(i(u,b.x),i(v,b.y)))),a.lineTo(g.x,g.y);a.stroke();a.fill();p=a.getImageData(0,0,c.width,c.height);a.clearRect(0,0,c.width,c.height);a.putImageData(p,d.x,d.y)}_ q(b){return{x:(b.pageX-c.offsetLeft-j)/j,y:(b.pageY-c.offsetTop-j)/j}}var j=300;c.width=c.height=600;c.style.border="1px solid #000";a.lineWidth=0.25;var e=[],f=-1,g={x:300,y:400},k,n=0.005,s=8,o=0.1,t=8,u=-0.05,v=0.5,h=250,m=!0,p;a.strokeStyle="rgba(0,0,0,.2)";a.fillStyle="rgba(255,255,255,.01)";var d;c.onmousemove=_(b){b=q(b);n=0.01*(1-Math.abs(b.y));o=0.1+2.5E-4*b.x};c.onmousedown=_(b){k?k=d=clearInterval(k):(k=setInterval(r,30),d||(a.clearRect(0,0,c.width,c.height),d=q(b),d.x=Math.round(2*d.x),d.y=Math.round(2*d.y)))}})();'.replace(/_/g,'function'));

Description

Click somewhere in the box to begin drawing morphing polar equations (hint: where you click to begin matters). Move your cursor around to affect how the form moves. You can click again to stop the generation, and then once more to reset it.

Base64 encoded

ZXZhbCgnKF8oKXtfIGwoYixkKXtyZXR1cm57eDpiLngrZC54LHk6Yi55K2QueX19XyBpKGIsZCl7ZisrO2VbZl18fChlW2ZdPTApO2VbZl0rPWI7cmV0dXJue3g6TWF0aC5jb3MoZVtmXSkqZCx5Ok1hdGguc2luKGVbZl0pKmR9fV8gcigpe3ZhciBiPWkobixzKTthLmJlZ2luUGF0aCgpO2EubW92ZVRvKGcueCxnLnkpO2grPW0/LTE6MTtpZigxMjM+PWh8fDI1MDw9aCltPSFtO2EuZmlsbFN0eWxlPSJyZ2JhKDI1NSwiK2grIiwiK2grIiwgLjAyNSkiO2Zvcih2YXIgZT0wOzEyNz5lO2UrKylmPS0xLGc9bChnLGwoaShvLHQpLGwoaSh1LGIueCksaSh2LGIueSkpKSksYS5saW5lVG8oZy54LGcueSk7YS5zdHJva2UoKTthLmZpbGwoKTtwPWEuZ2V0SW1hZ2VEYXRhKDAsMCxjLndpZHRoLGMuaGVpZ2h0KTthLmNsZWFyUmVjdCgwLDAsYy53aWR0aCxjLmhlaWdodCk7YS5wdXRJbWFnZURhdGEocCxkLngsZC55KX1fIHEoYil7cmV0dXJue3g6KGIucGFnZVgtYy5vZmZzZXRMZWZ0LWopL2oseTooYi5wYWdlWS1jLm9mZnNldFRvcC1qKS9qfX12YXIgaj0zMDA7Yy53aWR0aD1jLmhlaWdodD02MDA7Yy5zdHlsZS5ib3JkZXI9IjFweCBzb2xpZCAjMDAwIjthLmxpbmVXaWR0aD0wLjI1O3ZhciBlPVtdLGY9LTEsZz17eDozMDAseTo0MDB9LGssbj0wLjAwNSxzPTgsbz0wLjEsdD04LHU9LTAuMDUsdj0wLjUsaD0yNTAsbT0hMCxwO2Euc3Ryb2tlU3R5bGU9InJnYmEoMCwwLDAsLjIpIjthLmZpbGxTdHlsZT0icmdiYSgyNTUsMjU1LDI1NSwuMDEpIjt2YXIgZDtjLm9ubW91c2Vtb3ZlPV8oYil7Yj1xKGIpO249MC4wMSooMS1NYXRoLmFicyhiLnkpKTtvPTAuMSsyLjVFLTQqYi54fTtjLm9ubW91c2Vkb3duPV8oYil7az9rPWQ9Y2xlYXJJbnRlcnZhbChrKTooaz1zZXRJbnRlcnZhbChyLDMwKSxkfHwoYS5jbGVhclJlY3QoMCwwLGMud2lkdGgsYy5oZWlnaHQpLGQ9cShiKSxkLng9TWF0aC5yb3VuZCgyKmQueCksZC55PU1hdGgucm91bmQoMipkLnkpKSl9fSkoKTsnLnJlcGxhY2UoL18vZywnZnVuY3Rpb24nKSk7

Original source

(function(){
        var s = 600;
        var h = 300;
        c.width = c.height = s;
        c.style.border = "1px solid #000";
        a.lineWidth = .25;

        var points = [];
        var index = -1;
        var p = {x:s/2,y:s/1.5};
        var interval;

        var rate = 0.005;
        var size = 8;

        var detail = .1;
        var roundness = 8;
        var p3 = -.05;
        var p4 = .5;

        var f1 = 250;
        var f1d = true;
        var img;

        function getFill(){
            f1 += (f1d) ? -1: 1 ;
            if (f1 <= 123 || f1 >= 250) f1d = !f1d;
            return 'rgba(255,'+f1+','+f1+', .025)';
        }

        function add(p,q){
            return {x:p.x+q.x,y:p.y+q.y};
        }

        function cartesian( r, a ){
            return {x:Math.cos(a)*r,y:Math.sin(a)*r};
        }

        function polar( ti, r ){
            index++;
            if (!points[index]) points[index] = 0;
            points[index] += ti;
            return cartesian(r,points[index]);
        }

        a.strokeStyle = 'rgba(0,0,0,.2)';
        a.fillStyle = 'rgba(255,255,255,.01)';

        function loop(){
            var rp = polar(rate,size);
            a.beginPath();
            a.moveTo(p.x,p.y);
            a.fillStyle = getFill();
            for (var i=0;i<127;i++){
                index = -1;
                p = add( p , add( polar( detail, roundness), add( polar(p3,rp.x), polar(p4, rp.y) )) );
                a.lineTo( p.x, p.y);
            }
            a.stroke();
            a.fill();

            img = a.getImageData(0,0,c.width, c.height);
            a.clearRect(0,0,c.width, c.height);
            a.putImageData(img,m.x,m.y);
        }

        function mp(e){
            return {x:(( e.pageX - c.offsetLeft ) - h)/h,y:((e.pageY - c.offsetTop ) - h)/h};
        }
        var m;
        c.onmousemove = function(e){
            var p = mp(e);
            rate = .01 * (1-Math.abs(p.y));
            detail = 0.1 + .00025 * p.x;
        };

        c.onmousedown = function(e){
            if (interval){
                interval = m = clearInterval( interval );
            }
            else{
                interval = setInterval( loop, 30 );
                if (!m){
                    a.clearRect(0,0,c.width, c.height);
                    m = mp(e);
                    m.x = Math.round(2 * m.x);
                    m.y = Math.round(2 * m.y);
                }
            }
        };

    })();

JS1k: The JavaScript code golfing competition

2012 - Love

Polar Morph