JS1k: The JavaScript code golfing competition
2017 - It's like magic
Magical L-system
L-systems. See details. Copy this: {"step": 6, "orig": {"x": 0.1, "y": 0.1}, "dir": 20, "start": "F+", "angle": 90, "rules":["F=F+F-F-F+F"], "n":5}
- Author:
- Sergey Chernykh
- Twitter:
- @
- GitHub:
- serglider
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- linkedin.com/in/sergeychernykh
- Compo:
- canvas
- Demo link:
- https://js1k.com/2017-magic/demo/2775
- Shortlink:
- https://js1k.com/2775
- Blog post:
- please update here!
- Bytes:
- 1024
- Chars:
- 1024
- Submission
e=document.createElement("input");e.style="position:fixed;z-index:9;top:0;width:99%;";e.placeholder="PASTE HERE";b.appendChild(e);e.onchange=q;q(); function q(d){p=Math.PI/180;if(d)try{d=JSON.parse(d.target.value)}catch(n){}else d={step:5,dir:0,start:"F",n:5,angle:90,orig:{x:0,y:0},rules:["F=F+F-F-F+F"]};o=[a.width*d.orig.x,a.height*d.orig.y];r=t(d.rules);z=u(d.angle*p);k=v(d.start,r,d.n);h=z(k);c.save();c.clearRect(0,0,a.width,a.height);var f=d.step;d=d.dir*p;c.translate(o[0],o[1]);c.beginPath();c.rotate(d);i=0;for(l=h.length;i<l;i++)g=h[i],c.rotate(g.a),g.b&&(m=g.d?"lineTo":"moveTo",c[m](f,0),c.translate(f,0));c.stroke();c.restore()} function v(d,f,n){if(!n)return d;y=d.split("").map(function(d){return f[d]?f[d]:d}).join("");return v(y,f,n-1)}function t(d){return d.reduce(function(d,n){x=n.split("=");d[x[0]]=x[1];return d},{})}function u(d){return function(f){w={"+":{a:d,b:0,d:0},"-":{a:-1*d,b:0,d:0},F:{a:0,b:1,d:1},G:{a:0,b:1,d:1},M:{a:0,b:1,d:0}};return f.split("").map(function(d){return w[d]?w[d]:d})}}- Description
- L-systems. See details. Copy this: {"step": 6, "orig": {"x": 0.1, "y": 0.1}, "dir": 20, "start": "F+", "angle": 90, "rules":["F=F+F-F-F+F"], "n":5} This app draws L-systems (https://en.wikipedia.org/wiki/L-system) using turtle graphics. Surprise! It has some obvious limitations. To start playing you should just copy the JSON above and paste it into the game's input. Once the input loses focus - the app draws your L-system. Google "L-system" and enjoy tweaking that JSON! Please note all the keys in the JSON input are mandatory. The app can fail either silently or giving you an error. Property of the parsed object: - "step" - pixels per step - "orig" - starting point on the canvas. {"x": 0, "y": 0} - the upper left corner. {"x": 1, "y": 1} - the bottom right corner. - "dir" - an initial direction in degrees. 0 - like facing west. - "start" - an initial string from what you start to develop your L-system. An "axiom" in terms of the L-systems. - "rules" - is a set of production rules by which variables can be replaced with combinations of constants and other variables. - "angle" - an angle by which it turns left or right. - "n" - a number of iterations. Some of the L-systems grow very quickly and drawing them can hang your browser. The equal sign is a reserved character and cannot be present in your rules. You can use any other characters to set up your L-system and control its flow, but only the following ones perform actual wok: - "+" - turn right by the provided angle - "-" - turn left by the provided angle - "F" - step forward, pen down - "G" - step forward, pen down - "M" - step forward, pen up
- Base64 encoded
ZT1kb2N1bWVudC5jcmVhdGVFbGVtZW50KCJpbnB1dCIpO2Uuc3R5bGU9InBvc2l0aW9uOmZpeGVkO3otaW5kZXg6OTt0b3A6MDt3aWR0aDo5OSU7IjtlLnBsYWNlaG9sZGVyPSJQQVNURSBIRVJFIjtiLmFwcGVuZENoaWxkKGUpO2Uub25jaGFuZ2U9cTtxKCk7DQpmdW5jdGlvbiBxKGQpe3A9TWF0aC5QSS8xODA7aWYoZCl0cnl7ZD1KU09OLnBhcnNlKGQudGFyZ2V0LnZhbHVlKX1jYXRjaChuKXt9ZWxzZSBkPXtzdGVwOjUsZGlyOjAsc3RhcnQ6IkYiLG46NSxhbmdsZTo5MCxvcmlnOnt4OjAseTowfSxydWxlczpbIkY9RitGLUYtRitGIl19O289W2Eud2lkdGgqZC5vcmlnLngsYS5oZWlnaHQqZC5vcmlnLnldO3I9dChkLnJ1bGVzKTt6PXUoZC5hbmdsZSpwKTtrPXYoZC5zdGFydCxyLGQubik7aD16KGspO2Muc2F2ZSgpO2MuY2xlYXJSZWN0KDAsMCxhLndpZHRoLGEuaGVpZ2h0KTt2YXIgZj1kLnN0ZXA7ZD1kLmRpcipwO2MudHJhbnNsYXRlKG9bMF0sb1sxXSk7Yy5iZWdpblBhdGgoKTtjLnJvdGF0ZShkKTtpPTA7Zm9yKGw9aC5sZW5ndGg7aTxsO2krKylnPWhbaV0sYy5yb3RhdGUoZy5hKSxnLmImJihtPWcuZD8ibGluZVRvIjoibW92ZVRvIixjW21dKGYsMCksYy50cmFuc2xhdGUoZiwwKSk7Yy5zdHJva2UoKTtjLnJlc3RvcmUoKX0NCmZ1bmN0aW9uIHYoZCxmLG4pe2lmKCFuKXJldHVybiBkO3k9ZC5zcGxpdCgiIikubWFwKGZ1bmN0aW9uKGQpe3JldHVybiBmW2RdP2ZbZF06ZH0pLmpvaW4oIiIpO3JldHVybiB2KHksZixuLTEpfWZ1bmN0aW9uIHQoZCl7cmV0dXJuIGQucmVkdWNlKGZ1bmN0aW9uKGQsbil7eD1uLnNwbGl0KCI9Iik7ZFt4WzBdXT14WzFdO3JldHVybiBkfSx7fSl9ZnVuY3Rpb24gdShkKXtyZXR1cm4gZnVuY3Rpb24oZil7dz17IisiOnthOmQsYjowLGQ6MH0sIi0iOnthOi0xKmQsYjowLGQ6MH0sRjp7YTowLGI6MSxkOjF9LEc6e2E6MCxiOjEsZDoxfSxNOnthOjAsYjoxLGQ6MH19O3JldHVybiBmLnNwbGl0KCIiKS5tYXAoZnVuY3Rpb24oZCl7cmV0dXJuIHdbZF0/d1tkXTpkfSl9fQ==- Original source
https://github.com/serglider/js1k-2017/blob/master/human-readable/app.js