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

Author:

Remco Veldkamp

Twitter:

GitHub:

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

realstuffforabstractpeople.com

Compo:

classic

Demo link:

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

Shortlink:

https://js1k.com/1260

Blog post:

please update here!

Bytes:

1022

Chars:

1002

Submission

f='d=c.width=c.height=512,f=document,g=h=Kj=Wk=4;` V$~~((B||d)*M:h.random())Nb,f,c,e,g,h,iVbOclearRect(UOfont=g+"px Arial";Style="hsl("+h+",99%,"+i+"0%)";?p=9;p--;)Text(e,f+(p%3-1),c+(~~(p/3)-1))NF(a,bVo=(a-b;$ M:h.abs(o)<9||d-o<9NG(aVs[z+a]=q.d:a[(k+z+a]*4+a]*4)%k]NH(Vm=[q=Oget_));n=[PNI(b,aV1,8W23Wb,99,W1aW99,27Wa,3WW1H(B=2B=0}f.onkeyup^move=`(aVA=Otype[5];v!X;w!Y;Zm"jVm>=(t-v;n>=(u-w}Zd"Vj=1;t=m>+v;u=n>+w}Zu")j=0;Zw")g++;g%=3{?z=h+1;z--;)z==h,j=0),d+x=C),("♥✿✵❄❀☮☯⚘☘✰")[h%19+P,W9UH(K1)}};` J(VK=0I("RGB 1k","@remcoder"UK=2I("# "+(h+1)UC=new D:e;r=Ocre:e_d,dUs=r.d:a;?z=k;z-=4;VG(G(1UG(2Us[z+3]=255}Oput_r,Wy=60-(C-x)/1e3;LF(1Q1Q1],2Q1],2])VK2;h++ Ly<0)K0;W2W6W~~y,6Wg*12W8)}setTimeout(J,16)}J(U`function_ImageD:a(^=f.onmouseZLA=="W0,V){U);Q])F(P)Oa.N}` Lif(Ki=?for(>[g]:at$return!=Opage&&WWd,dOfill,P,P]down^LK=1V}else)%d0],d*D(E(m[n[0U';for(i in g='!$:>?KLNOPQUVWZ^_`')e=f.split(g[i]),f=e.join(e.pop());eval(f)

Description

The 3 color channels (red,green,blue) are shifted randomly such that the original image becomes distorted. Try to reconstruct the original image within the time limit. Press a button to cycle through the channels. The clock reflects the currently selected channel. To move the selected color channel, click on the page then hold and drag with the mouse. features: - randomly generated images that seemlesly wrap around when you move them - time limit: you have 60 seconds to reconstruct the image. - difficulty increases every time you complete a image - the color of the clock reflects which color channel is currently selected changes: - the color of the timer is lighter for better readability - extra screen in-between levels displaying the level number This is the 1k version of the Chrome app I wrote. See also: The RGB Game https://chrome.google.com/webstore/detail/hnieofmjopiiifehpejcgcpailcndege

Base64 encoded

Zj0nZD1jLndpZHRoPWMuaGVpZ2h0PTUxMixmPWRvY3VtZW50LGc9aD1Laj1Xaz0WFjQ7YCAVViR+figoQnx8ZCkqTTpoLnJhbmRvbSgpKU4UYixmLGMsZSxnLGgsaVZiH09jbGVhclJlY3QoHlVPZm9udD1nKyJweCBBcmlhbCI7HVN0eWxlPSJoc2woIitoKyIsOTklLCIraSsiMCUpIjs/cD05O3AtLTspHVRleHQoZSxmKxYocCUzLTEpLGMrFih+fihwLzMpLTEpKU5GKGEsYlZvPShhLWIYOyQgTTpoLmFicyhvKTw5fHxkLW88OU5HKGFWc1t6K2FdPXEuZDphWyhrK3orE2FdKjQrEmFdKhY0KSVrXU5IKFZtPVsVcT1PZ2V0Xx4pKRw7bj1bUBxOSShiLGFWFDEsOFcyM1diLDk5LFcxEWEfFFc5OSwyN1dhLDNXVzERSChCPTIRQj0wfWYub25rZXkbdXBeG21vdmU9YChhVkE9T3R5cGVbNV07diFYO3chWTtabSIfalZtPj0odC12GDtuPj0odS13GH1aZCJWaj0xO3Q9bT4rdjt1PW4+K3d9WnUiKWo9MDtadyIpGmcrKztnJT0zGXs/ej1oKzE7ei0tOykUej09aCwVaj0wKSxkKxV4PUMpLCgi4pml4py/4py14p2E4p2A4piu4piv4pqY4piY4pywIilbaCUxFzkrUCxXOVVIKEsxKX19O2AgSihWSz0wH0koIlJHQiAxayIsIkByZW1jb2RlciJVSz0yH0koIiMgIisoaCsxKVVDPW5ldyBEOmU7cj1PY3JlOmVfZCxkVXM9ci5kOmE7P3o9azt6LT00O1ZHKBFHKDFVRygyVXNbeiszXT0yNTV9T3B1dF9yLFcRGnk9NjAtKEMteCkvMWUzO0xGKBMXEzFREhcSMVETMV0sEzJREjFdLBIyXSlWSzI7aCsrGSBMeTwwKUswOxRXMlc2V35+eSw2V2cqMTJXOCl9c2V0VGltZW91dChKLDE2KX1KKFVgZnVuY3Rpb25fSW1hZ2VEOmEoXj1mLm9ubW91c2VaTEE9PSJXMCxWKXtVKTtRXSkfRihQFSlPYS5OfWAgTGlmKEtpPT9mb3IoPltnXTphdCRyZXR1cm4hPU9wYWdlHyYmHldXZCxkHU9maWxsHCxQLFBdG2Rvd25eGkxLPTFWGX1lbHNlGCklZBcwXSwWZCoVRCgURSgTbVsSblsRMFUnO2ZvcihpIGluIGc9JxESExQVFhcYGRobHB0eHyEkOj4/S0xOT1BRVVZXWl5fYCcpZT1mLnNwbGl0KGdbaV0pLGY9ZS5qb2luKGUucG9wKCkpO2V2YWwoZik=

Original source

var w = c.width = c.height=512,
  d = document,
  color= 0,
  level = 0,
  mode = 0,
  dragging=0,
  chars = "♥✿✵❄❀☮☯⚘☘✰",
  idl = w * w * 4,
  dx,dy,
  delta,
  symbol,
  x,y,q,
  id,
  shifted,
  newdata,
  ox, oy,
  px, py,
  startTime,
  time,
  i,
  t,
  amplitude,
  flashStart,
  nd;

function r() { return ~~((amplitude||w) * Math.random()); }

function ft2(e, f,ty, symbol, s,h,br) { 
  if (e) a.clearRect(0,0,w,w);

  a.font = s+"px Arial";
  a.fillStyle = "hsl("+h+",99%,"+br+"0%)";
  
  q = 9;
  while (q--)
    a.fillText(symbol, f + w*( q%3 -1),ty + w*(~~(q/3) -1) ); 
}

function match (e,f) {
  delta = (e - f) % w;
  return Math.abs(delta)<9 || w-delta<9;
}

function fun(e) { newdata[i+e] = id.data[ (idl + i + dx[e]*4 + dy[e]*w*4) % idl ]; }

function draw() {
  shifted = a.createImageData(w,w);
  newdata = shifted.data; 

  i=idl;
  while (i-=4)
  {
    fun(0);
    fun(1);
    fun(2);
    newdata[i+3] = 255;
  }
  a.putImageData(shifted,0,0);
}

function shift() { 
  dx=[r(id = a.getImageData(0,0,w,w)),r(),r()]; dy=[r(),r(),r()]; 
}

function createLevel() {
  i = level+1;

  while (i--)
    ft2(i==level,r(dragging = 0), w + r(startTime = nd), chars[level % 10], 9+r(), 0, 9); 

  shift(mode=1);
}

function textScreen(e, f) {
  ft2(1, 80,230,e,99,0,10);
  if (f) ft2(0, 99,270,f,30,0,10);
  shift(amplitude=20);
  amplitude=0;
}

d.onkeydown = d.onmouseup = d.onmousedown = d.onmousemove =  function(e) {
  t = e.type[5];

  px = e.pageX;
  py = e.pageY;

  if (t == "m" && dragging) 
  {
    dx[color] = (ox - px) % w;
    dy[color] = (oy - py) % w;
  }

  if (t == "d") {
    dragging=1; 
    ox = dx[color] + px;
    oy = dy[color] + py;
  }

  if (t == "u")
    dragging=0;

  if (t == "w") 
  {
    if (mode==1) {
      color++; color %= 3;
    }
    else
      createLevel();
  }
};

function loop() {
  if (mode==0) textScreen("RGB 1k", "@remcoder")
  if (mode==2) textScreen("# " + (level+1))
  // if (mode==3) textScreen("FAIL")

  nd = new Date;
  draw();
  
  if (mode==1)
  {
    time = 60 - (nd - startTime) / 1000;

    if (match(dx[0],dx[1]) && match(dy[0],dy[1]) && match(dx[1],dx[2]) && match(dy[1],dy[2]))
    {
      mode = 2;
      level++;
    }
    else if (time < 0)
      mode=0;
    
    ft2(0,20,60, ~~time, 60, color*120,8);
  }

  setTimeout(loop, 16);  
}

loop();

JS1k: The JavaScript code golfing competition

2012 - Love