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

Author:

Chris Richards

Twitter:

GitHub:

ripter

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

github.com/ripter/js1k/tree/master/2017

Compo:

pure

Demo link:

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

Shortlink:

https://js1k.com/2884

Blog post:

please update here!

Bytes:

1014

Chars:

1014

Submission

for(_='urZre9154t=n!=e.kinj)}`30_trans% 225,$atR0,0Q100P){9tZnWfunctionV,V(eWU.9place(KU eKp,JerHTMLI),i=" en0,40$_225|="SoZcepolygonkpagemouse+","+75 75,75(0|P*n.7*(t-g)><feQ 4Q.7*(r-s)+ touch0,_0 filter	K/la[^"]*/([\\d.-]+)lRe(Q)"ktarget.4|f.mRch(/r.jnI!KcJV(e,r,tWV e(e){e.p9vtDefault();var fktype,sX,gY;""=tagName&&r|w/)?(!outI,a=s,o=g,u=l=0):n&&(v/)?(u=s-a,l=g-o,!Jul`1):p|nd/)&&u?(i=1,+r+u(+t+l``),"0):( nx=+s,ny=-g,x)/Py)/P}`0),=Kn,t),n=i?t:t=0`var r=b,t,n,a,o,u,l,c=/s[^"]+/,p=/,/g;=t=\'<svg viewBox0 0 P0 800"><	 ida"TZbulce baseF9qucy0.1numOctaves2"/ColorMRrix 9sultrvalues0typesRZRe"/Bld jGraphicj2rmodelight/Composite j2AlphaoperRorj"/></	>\'+"Q ___ _|475 4|$"K/([^|]+)/gU\'< pojts\'+e+\'%formrotRe(0) % stylefill:#111;	:Zl(#a)"/>\'})+"</svg>","down move upstartdmove"K/\\w+/g,V(t){r.addEvtLister(t,e`);';G=/[-I-KU-WP-R$%_`jk!49Z]/.exec(_);)with(_.split(G))_=join(shift());eval(_)

Description

Mobile and Desktop Tangram using SVG and filters. Touch/Drag to move pieces. Tap/Click to rotate pieces. Magic is when two pieces overlap. They are textured to blend into each other. You can see the revision history here: https://github.com/ripter/js1k/tree/master/2017

Base64 encoded

Zm9yKF89J3VyWnJlOTE1NHQ9biE9ZS5raW5qKX1gMzBfdHJhbnMlIDIyNSwkYXRSMCwwUTEwMFApezl0Wm5XZnVuY3Rpb25WLFYoZVdVLjlwbGFjZShLVSBlS3AsSmVySFRNTEkpLGk9HyIgHmVuHTAsNDAcHCQbXxsyMjV8Gj0iGRlTb1pjZRhwb2x5Z29uF2twYWdlFm1vdXNlFSsiLCIrFDc1IDc1LDc1EygwfFAqbhIuNyoodC1nKRE+PGZlEFEgNFEPLjcqKHItcykrDiB0b3VjaAwwLF8wIAtmaWx0ZXIJSy9sYVteIl0qLwgoW1xcZC4tXSspB2xSZShRKSIGa3RhcmdldC4FCzQcfARmLm1SY2goLwNyLmpuSQIhS2NKVihlLHIsdFcBViBlKGUpe2UucDl2HXREZWZhdWx0KCk7dmFyIGZrdHlwZSxzFlgsZxZZOyIXIj0FdGFnTmFtZSYmA3J8dy8pPyghBW91dEksYT1zLG89Zyx1PWw9MCk6biYmKAN2Lyk/KHU9cy1hLGw9Zy1vLCEISnUUbGAfMSk6A3B8bmQvKSYmdT8oaT0xLAErcit1FCgrdCtsYGApCCwiBh8wKTooASBueD0OEStzLG55PREtDmcsEngpL1AUEnkpL1B9YB8wKSwCPQJLbix0KSxuPWk/dDp0PTBgdmFyIHI9Yix0LG4sYSxvLHUsbCxjPS9zGVteIl0rLyxwPS8HLAcvZzsCPXQ9XCc8c3ZnIHZpZXdCb3gZMCAwIFAwIDgwMCI+PAkgaWQZYSIQVFpidWwdY2UgYmFzZUY5cXUdY3kZMC4xHm51bU9jdGF2ZXMZMiIvEENvbG9yTVJyaXggOXN1bHQZch52YWx1ZXMZMB50eXBlGXNSWlJlIi8QQmwdZCBqGEdyYXBoaWMeajIZch5tb2RlGWxpZ2h0HR4vEENvbXBvc2l0ZSBqMhhBbHBoYR5vcGVyUm9yGWoiLz48Lwk+XCcrIlEgBAtfBF8LGl8cIF8PfDQbNzUgGjQbE3wPJBMiSy8oW158XSspL2dVXCc8FyBwb2p0cxlcJytlK1wnHiVmb3JtGXJvdFJlKDApICUGIHN0eWxlGWZpbGw6IzExMTsJOlpsKCNhKSIvPlwnfSkrIjwvc3ZnPiIsIhVkb3duIBVtb3ZlIBV1cAxzdGFydAwdZAxtb3ZlIksvXFx3Ky9nLFYodCl7ci5hZGRFdh10TGlzdB1lcih0LGVgKTsnO0c9L1sBLR9JLUtVLVdQLVIkJV9gamshNDlaXS8uZXhlYyhfKTspd2l0aChfLnNwbGl0KEcpKV89am9pbihzaGlmdCgpKTtldmFsKF8p

Original source

// var elm = document.createElement('div');
var elm = b;
var html, active, startX, startY, deltaX, deltaY;
var getPoints = /s="[^"]+/;
var getPair = /([\d.-]+),([\d.-]+)/g
function magic(evt) {
  evt.preventDefault();
  var type = evt.type;
  var x = evt.pageX;
  var y = evt.pageY;

  // Touch a polygon to start the drag
  // touchstart, mousedown
  if (evt.target.tagName == 'polygon' && type.match(/r|w/)){
    html = active = evt.target.outerHTML;
    startX = x;
    startY = y;
    deltaX = deltaY = 0;
  }
  // make sure we have a polygon
  else if (active) {
    // Drag
    // touchmove, mousemove
    if (type.match(/v/)) {
      deltaX = x - startX;
      deltaY = y - startY;
      html = active.replace(/la[^"]*/, function(translate) {
        return translate.replace(getPair, deltaX+','+deltaY)
      })
      // keep active
      i=1;
    }
    // Drop or Click
    // touchend, mouseup
    else if (type.match(/p|nd/) && deltaX) {
      i = 1;
      html = active.replace(getPoints, function(points) {
        return points.replace(getPair, function(_, pX, pY) {
          return +pX+deltaX+','+(+pY+deltaY)
        })
      })
      .replace(/la[^"]*/, 'late(0,0)')
      // reset active
      i=0;
    }
    //
    // Click
    else {
      // first find just the points
      html = active.replace(getPoints, function(points) {
        // update each pair of points
        return points.replace(getPair, function(_, pX, pY) {
          nx = (.7 * (pX - x)) + (.7 * (pY - y)) + x,
          ny = (.7 * (pY - y)) - (.7 * (pX - x)) + y;
          return (0|(nx*100))/100 +','+ (0|(ny*100))/100
        });
      })
      // reset active
      i=0;
    }

    elm.innerHTML = elm.innerHTML.replace(active, html)
    // 0 = Drop/Click, 1 = Move
    active = i ? html : html = 0
  }
}

// better on desktop
// elm.innerHTML = '<svg viewBox="0 0 '+ screen.availWidth +' '+ screen.availHeight +'">'
// better on iPhone
elm.innerHTML = html = '<svg viewBox="0 0 1000 800">'
+'<filter id="a">'
  +'<feTurbulence baseFrequency="0.1" numOctaves="2"/>'
  +'<feColorMatrix result="r" values="0" type="saturate"/>'
  +'<feBlend in="SourceGraphic" in2="r" mode="lighten" />'
  +'<feComposite in2="SourceAlpha" operator="in"/>'
+'</filter>'
+'0,0 0,300 150,150|0,300 300,300 150,150|300,300 300,150 225,225|300,150 300,0 150,0|150,150 225,75 300,150 225,225|150,150 225,75 75,75|0,0 150,0 225,75 75,75'
  //TODO: find a way to remove the | between <polygon />s
  .replace(/([^|]+)/g, function(polygon) {
    return '<polygon points="'+polygon+'" transform="rotate(0) translate(0,0)" style="fill:#111;filter:url(#a)"'+'/>';
  })
+'</svg>';
// listen to events on the svg
'mousedown mousemove mouseup touchstart touchend touchmove'.replace(/\w+/g, function(eventName) {
  elm.addEventListener(eventName, magic);
});

JS1k: The JavaScript code golfing competition

2017 - It's like magic

SVG Tangram