JS1k 2010 - 597 - Details - A ground breaking JavaScript golfing competition

Author:

Piers Goodhew

Twitter:

GitHub:

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

Compo:

classic

Demo link:

https://js1k.com/2010-first/demo/597

Shortlink:

https://js1k.com/597

Blog post:

please update here!

Bytes:

1022

Chars:

1022

Submission

a="cEByIdcc.wc.height=500;t=cCont2dR=G=B=0;L=3;iR=iG=iB=25;iL=1;breturn	</'jreturn+=i'+e+	+</-=i'+e+	-</'E'white'};P'rgb+R+','+G+','+B+')';tWt1WL;carRect;n(t1);s(t1ZputQ(i,0,0ClrcarRect;P(seTo(x+.1,y);eroke(ne.beginPath();e.To(x,ydif(e.button!=efined){s;n}else up};n;D',d,1);i=tQ};upD.reEventListenermouse',d,1K.createEcanvasK.height=K.w50;t1.body.insertBefore(K,c)Cont2dc',,0);cy.cssT=Ky.cssT='border:1px solid;backgro-color:#fff';D.body.bgColor=\"#888\";t1Cap=tCap='ro();Dup',up,0);D.write<br/>'+bPEClrZ')+'<br/>'+jRGBL'))";for(b in c="('/le/=D/und/.st/Ddocu/,24/t1./';P/)};/ext/');/down/move/.get/ment/.line/idth=/')+j('/')+b('/button>/	()>'+e+'/strokeStyle=/t./=function(e,x,y){/<button onclick='+e+'/(0,0,c.height,c.width)/.addEventListener('mouse/,e.clientY-c.offsetTop)/(t,e.clientX-c.offsetLeft/QImageData".split("/"))a=a.replace(RegExp(c[b][0],"g"),c[b].substr(1));eval(a)

Description

V 1.2 of sketch/paint app (I call it "mi canvas es su canvas") Now with: more visible canvas! draw with mouse in the larger box, your brush is shown in the smaller box. The top row of buttons are your "tools" - P: paint, E: erase (just paints in white); Clr: clear the whole canvas, Z: undo (1 level only). Second row of buttons change the colour (RGB±) and brush size (L±) See source for notes, which points to earlier sources which were more elegant but not so efficient. tested on S, C and F

Base64 encoded

YT0iYx0SRR4RQnlJZB9jFWMudw9jLmhlaWdodD01MDA7dD1jEkNvbnQWHzJkFVI9Rz1CPTA7TD0zO2lSPWlHPWlCPTI1O2lMPTE7YgdyZXR1cm4fBQk8LwsnF2oHcmV0dXJuHwUrPWknK2UrGAkrPC8LBS09aScrZSsYCS08LwsnF0UGCBkIJ3doaXRlJ307UAYIGQgncmdiHytSKycsJytHKycsJytCKycpJzt0EFcPdDEQVw9MOxljHmFyUmVjdAQ7bih0MRoaKTtzKHQxGhoXWgZwdXRRKGksMCwwF0NscgZjHmFyUmVjdAQ7UCgXcwdlEFRvKHgrLjEseSk7ZRtyb2tlKBduB2UuYmVnaW5QYXRoKCk7ZS4TVG8oeCx5F2QHaWYoZS5idXR0b24hPRxlZmluZWQpe3MCO24CfWVsc2UgdXB9OxQHbgI7RAMTJyxkLDEpO2k9dBJRBH07dXAHRC5yZRNFdmVudExpc3RlbmVyH21vdXNlEycsZCwxF0sdLmNyZWF0ZUUeER9jYW52YXMVSy5oZWlnaHQ9Sy53DzUwO3QxHS5ib2R5Lmluc2VydEJlZm9yZShLLGMpEkNvbnQWHzJkFWMDFCcsFCwwKTtjG3keLmNzc1QWPUsbeR4uY3NzVBY9J2JvcmRlcjoxcHggc29saWQ7YmFja2dybxwtY29sb3I6I2ZmZic7RC5ib2R5LmJnQ29sb3I9XCIjODg4XCI7dDEQQ2FwPXQQQ2FwPSdybxwYKCk7RAN1cCcsdXAsMCk7RC53cml0ZR88YnIvPicrYh9QDEUMQ2xyDFonKSsnPGJyLz4nK2ofUg5HDkIOTCcpKSI7Zm9yKGIgaW4gYz0iHygnLx5sZS8dPUQvHHVuZC8bLnN0L0Rkb2N1ES8aLDI0Lxl0MS4vGCc7UC8XKX07LxZleHQvFScpOy8UZG93bi8TbW92ZS8SLmdldC8RbWVudC8QLmxpbmUvD2lkdGg9Lw4nKStqKCcvDCcpK2IoJy8LYnV0dG9uPi8JKCk+JytlKycvCHN0cm9rZVN0eWxlPS8GB3QuLwc9ZnVuY3Rpb24oZSx4LHkpey8FPGJ1dHRvbiBvbmNsaWNrPScrZSsnLwQoMCwwLGMuaGVpZ2h0LGMud2lkdGgpLwMuYWRkRXZlbnRMaXN0ZW5lcignbW91c2UvAgEsZS5jbGllbnRZLWMub2Zmc2V0VG9wKS8BKHQsZS5jbGllbnRYLWMub2Zmc2V0TGVmdC9RSW1hZ2VEYXRhIi5zcGxpdCgiLyIpKWE9YS5yZXBsYWNlKFJlZ0V4cChjW2JdWzBdLCJnIiksY1tiXS5zdWJzdHIoMSkpO2V2YWwoYSk=

Original source

// v1.3 of js sketch app. See 471 and 355 for more notes on the original form
// plus also the my blog post on techniques (manual, then automatic with manual enhancement)
// at: http://pdaddy.wordpress.com/2010/08/31/compressing-some-js-for-the-js1k-comp/]

// and note also, I have committed the sin of modifying this code after compression and I hope they're still exactly in synch. But they mightn't


// vars
D=document;
c = D.getElementById('c');
c.width = c.height = 500;
t = c.getContext('2d');
R = G = B = 0;
L = 3;
iR = iG = iB = 25;
iL = 1;

//funx - using the same 3 params aids compression - but closure "fixes" them, so it's out
b = function (e, x, y) {
    return ('<button onclick=' + e + '()>' + e + '</button>')
};
j = function (e, x, y) {
    return ('<button onclick=' + e + '+=i' + e + ';P()>' + e + '+</button><button onclick=' + e + '-=i' + e + ';P()>' + e + '-</button>')
};
E = function (e, x, y) {
    t.strokeStyle = t1.strokeStyle = 'white'
};
P = function (e, x, y) {
    t.strokeStyle = t1.strokeStyle = 'rgb(' + R + ',' + G + ',' + B + ')';
    t.lineWidth = t1.lineWidth = L;
    t1.clearRect(0, 0, c.height, c.width);
    n(t1, 24, 24);
    s(t1, 24, 24)
};
Z = function (e, x, y) {
    t.putImageData(i, 0, 0)
};
Clr = function (e, x, y) {
    t.clearRect(0, 0, c.height, c.width);
    P()
};
s = function (e, x, y) {
    e.lineTo(x+.1, y); //the .1 is so the brush (a v.short line) appears in Opera
    e.stroke()
};
n = function (e, x, y) {
    e.beginPath();
    e.moveTo(x, y)
};
d = function (e, x, y) {
    if (e.button != undefined) {
        s(t, e.clientX - c.offsetLeft, e.clientY - c.offsetTop);
        n(t, e.clientX - c.offsetLeft, e.clientY - c.offsetTop)
    } else up
};
down = function (e, x, y) {
    n(t, e.clientX - c.offsetLeft, e.clientY - c.offsetTop);
    D.addEventListener('mousemove', d, 1);
    i = t.getImageData(0, 0, c.height, c.width)
};
up = function (e, x, y) {
    D.removeEventListener('mousemove', d, 1)
};

//main() - which is really all init, then events drive it
K = D.createElement('canvas');
K.height = K.width = 50;
c.style.cssText=K.style.cssText='border:1px solid;background-color:#fff';
D.body.bgColor="#888";
t1.lineCap = t.lineCap = 'round';
t1 = D.body.insertBefore(K, c).getContext('2d');
P();
c.addEventListener('mousedown', down, 0);
D.addEventListener('mouseup', up, 0);
D.write('<br/>' + b('P') + b('E') + b('Clr') + b('Z') + '<br/>' + j('R') + j('G') + j('B') + j('L'))

JS1k: The JavaScript code golfing competition

2010 - The Original