JS1k 2017 - 2888 - Details - A magical JavaScript golfing competition

Author:

Piotr Stosur

Twitter:

GitHub:

Facebook:

piotr.stosur

Google+:

Reddit:

/r/

Pouet:

Website:

Compo:

canvas

Demo link:

https://js1k.com/2017-magic/demo/2888

Shortlink:

https://js1k.com/2888

Blog post:

please update here!

Bytes:

1024

Chars:

1024

Submission

_="bO=docum^t.creJeElem^t('input''25px';F=6;ba.cl$eNode(KzIndex--;E=S=30KW=60KlStyle=74];setTransform(10,10	.5,.5	for(j=Kj<75];j9S,S	rotJe(6.283/75~-S,-S	beginPJh@To(7_,7!	lineTo(72],73~}`downstarty<25){x==i)E=;}H}q=[[x,y]];D= ;zQ=[]q.l^gth;i9B==_++!2]3]){-2,+2-2,+2Q.push([-Z+Z-!,[+!)}}q=Q;i)setTimeout(z,0	`O.$chanL=HN=F;c=AclearRectV	S,S,S'#aaa',N~ii,20,i>500?E:,!	`c=a`Hup^dy<25Me.butt$Mz(B=_!2]3~`@@D){q=[];X,Y,x,y }q[i][R=G=B=-50W;i9i%4M(R=(Ri%20M(G=(Gi%100M(B=(BxXX	yYY	I[(%W+!U)	positi$='absolute';top=I[(x%W+yU+','+I=LtImaLDJaV).dJa;D=K	);translJe(,!=e=>{=a.$touchMe.touches[_.paL_a.$mouse+50)%250	.LtC$text('2d'	'rgb('+RGB+')'A.style.stroke.app^dChild(A=,0,,E,N~=e&&(e.paL;for(i=Ki<c.if(l([ X=x;Y=y;}!1]$on7e[9++){@moveFO.valueJatK0;LgeM||U*W)*4+V(0W,WZ1],[^en_0]`};~]	(	";for(Y in $="~`_^ZVUMLKJF@97$! 	")with(_.split($[Y]))_=join(pop());eval(_)

Description

Simple graphic program to draw mandala-like shapes. Some included features: - Click and drag to draw lines, repeated in each circle parts. - Click without dragging to flood-fill. Used algorithm is performed gradually over time and can be stopped by starting drawing a line or changing color. - Color picker for line and fill. - Text field to change number of circle parts - can be done in the middle of drawing and affects only lines and fills used afterwards. - Lines indicating number of parts and color picker are drawn on separate canvas element in background, so current image content is saved without them when using 'Save image' browser function.

Base64 encoded

Xz0iYhhPPWRvY3VtXnQuY3JlSmVFbGVtXnQoJ2lucHV0JwUnMjVweCc7Rj02O2IYYS5jbCRlTm9kZSgFSxZ6SW5kZXgtLTtFPVM9MzBLVz02MEtsDhdTdHlsZT03NF07HXNldFRyYW5zZm9ybSgxGTAsMRkwCQsuNSwuNQlmb3Ioaj1Lajw3NV07ajkLUyxTCR1yb3RKZSg2LjI4My83NX4LLVMsLVMJHWJlZ2luUEpofx1AVG8oN18sNyEJHWxpbmVUbyg3Ml0sNzN+F38Xf31gEmRvd24Pc3RhcnQOAx55PDI1KXsCHng9PWkpRT0VO31If31xPVtbeCx5XV07RD0gO3oOUT1bXRxxLmxeZ3RoO2k5HkI9PQRfKysHBCEHBDJdBwQzXSl7HxEMLTIsEQwrMhofES0yDCwRKzIMGlEucHVzaChbES1aK1oMLSEsWxEMKyEpfX1xPVE7Hmkpc2V0VGltZW91dCh6LDAJYE8uJGNoYW5MPUgOTj1GO2M9QRQdY2xlYXJSZWN0VgkfUyxTLFMZJyNhYWEnLE5+Ah9pGWksMjAsaT41MDA/RToVLCEJYGM9YRRgSH8SdXAPXmQOCHk8MjVNZS5idXR0JE16KEI9Bl8HBiEHBjJdBwYzfmAIEkAPQA4eRCl7cT1bXTsDH1gsWSx4LHkaIH0BcVtpXVsCUj1HPUI9LTUwHFc7aTlpJTRNKFI9KFITaSUyME0oRz0oRxNpJTEwME0oQj0oQhMDeBtYEFgJeRtZEFkJBElbKBElVysBIVUFKQkWcG9zaXRpJD0nYWJzb2x1dGUnOxZ0b3A9BklbKHglVyt5VQcrJywnKwhJPR1MdEltYUxESmFWKS5kSmE7RD1LCSk7Cx10cmFuc2xKZSgMLAEhDj1lPT57Dz1hLiR0b3VjaBBNZS50b3VjaGVzW18ucGFMEQFfEmEuJG1vdXNlEys1MCklMjUwCRQuTHRDJHRleHQoJzJkJwkVJ3JnYignK1IHRwdCKycpJxZBLnN0eWxlLhcdc3Ryb2tlGC5hcHBeZENoaWxkKEE9GSwwLBosRSxOfhs9ZSYmKGUucGFMHDtmb3IoaT1LaTwdYy4eaWYoH2woWyBYPXg7WT15O30hMV0kb243ZVs5Kyspe0Btb3ZlRk8udmFsdWVKYXRLMDtMZ2VNfHxVKlcpKjQrVigwGVcsV1oxDF0sWxFeZW5fMF1gfTt+XQl/KAkiO2ZvcihZIGluICQ9In9+YF9eWlZVTUxLSkZAOTckISAfHh0cGxoZGBcWFRQTEhEQDw4MCwkIBwYFBAMCASIpd2l0aChfLnNwbGl0KCRbWV0pKV89am9pbihwb3AoKSk7ZXZhbChfKQ==

Original source

b.appendChild(A=O=document.createElement('input'));
    A.style.position='absolute';
    A.style.top='25px';
    O.value=6;

    b.appendChild(A=a.cloneNode());
    A.style.position='absolute';
    A.style.top=0;
    A.style.zIndex--;

    E=S=300;W=600;


    l=e=>{
        c.strokeStyle=e[4];
        c.setTransform(1,0,0,1,0,0);
        c.translate(.5,.5);
        for(j=0;j<e[5];j++){
            c.translate(S,S);
            c.rotate(6.283/e[5]);
            c.translate(-S,-S);
            c.beginPath();
            c.moveTo(e[0],e[1]);
            c.lineTo(e[2],e[3]);
            c.stroke();c.stroke();
        }
    };

    a.onmousedown=a.ontouchstart=e=>{
        x=e&&(e.pageX||e.touches[0].pageX);
        y=e&&(e.pageY||e.touches[0].pageY);
        if(y<25)
        {
            R=G=B=-50;
            for(i=0;i<W;i++){
                i%4||(R=(R+50)%250);
                i%20||(G=(G+50)%250);
                i%100||(B=(B+50)%250);
                if(x==i)E='rgb('+R+','+G+','+B+')';
            }
            H();
        }
        q=[[x,y]];
        D=X=x;
        Y=y;
    };

    z=e=>{
        Q=[];
        for(i=0;i<q.length;i++)
        {
            if(B==I[(q[i][0]%W+q[i][1]*W)*4+0]+++','+I[(q[i][0]%W+q[i][1]*W)*4+1]+','+I[(q[i][0]%W+q[i][1]*W)*4+2]+','+I[(q[i][0]%W+q[i][1]*W)*4+3])
            {
                l([q[i][0],q[i][1]-2,q[i][0],q[i][1]+2,E,N]);
                l([q[i][0]-2,q[i][1],q[i][0]+2,q[i][1],E,N]);
                Q.push(
                        [q[i][0]-1,q[i][1]],
                        [q[i][0]+1,q[i][1]],
                        [q[i][0],q[i][1]-1],
                        [q[i][0],q[i][1]+1]
                )
            }
        }
        q=Q;
        if(i)setTimeout(z,0);
    };

    O.onchange=H=e=>{
        N=O.value;
        c=A.getContext('2d');
        c.clearRect(0,0,W,W);

        l([S,S,S,0,'#aaa',N]);

        R=G=B=-50;
        for(i=0;i<W;i++){
            i%4||(R=(R+50)%250);
            i%20||(G=(G+50)%250);
            i%100||(B=(B+50)%250);
            l([i,0,i,20,i>500?E:'rgb('+R+','+G+','+B+')',1]);
        };
        c=a.getContext('2d');
    };H();

    a.onmouseup=a.ontouchend=e=>{
        I=c.getImageData(0,0,W,W).data;D=0;
        y<25||e.button||z(B=I[(x%W+y*W)*4+0]+','+I[(x%W+y*W)*4+1]+','+I[(x%W+y*W)*4+2]+','+I[(x%W+y*W)*4+3]);
    };
    I=c.getImageData(0,0,W,W).data;D=0;

    a.onmousemove=a.ontouchmove=e=>{
        if(D){
            q=[];
            x=e&&(e.pageX||e.touches[0].pageX);
            y=e&&(e.pageY||e.touches[0].pageY);
            l([X,Y,x,y,E,N]);
            X=x;
            Y=y;
        }
    }

JS1k: The JavaScript code golfing competition

2017 - It's like magic

Magic circle drawing