- _iPhoenix_ experiments with JS golfing
- 16 Apr 2018 11:06:39 pm
- Last edited by iPhoenix on 17 Aug 2018 11:52:41 am; edited 2 times in total
Now that I have gained semi-competence in JavaScript, I've started trying to get my code down to a certain size, occasionally as small as I can get it. (A.K.A. "code-golfing")
I was inspired to do this primarily by this, which is simply beautiful (in my opinion, of course), and some of the below projects reflect that.
This is a growing list, ordered by creation date, and I'll probably end up editing this post with new scripts as I make them.
1) ASCII art π character, in 360 bytes of code:
Code:
You can find an explanation for this one here. It's really simple, and I created it just as an experiment to see what I could do.
2) Rotating 3D Cube in 500 bytes of JS:
Code:
I haven't taken the time to produce an explanation for this one, but all it is doing are some point rotations, which (let's be honest) aren't really that interesting. If you just look through the code, you can probably guess what it is doing, and you'll most likely be right, if you know your trig. I'm not really satisfied with it, because I can easily shave off 20+ bytes by storing Array and Math to variables. I also don't need all of the fancy calculations determining when to use Math.floor or Math.ceil. It doesn't provide a noticeable difference to the output and it's just hoarding bytes. Using this suddenly available bytage, I should force the text height:width ratio something I can easily deal with, instead of assuming it is 2.
3) Rainbow Flashy Text in almost 256 bytes of JS
Code:
This is by far my favorite one (so far). It uses several of the tricks found in the aemkei world thing, linked above. It displays (almost, I can't do character escaping without some serious additions) the source code of the program and does a fun rainbow pattern. I can't really describe what it does in words, just check it out . As with the 3D Cube, this script could also be optimized. But in order for my rainbow effect to look good, all of the rows should be the same length, and any more optimizations would mess with it.
4) Animated CW mascot (), in almost 1800 bytes
Code:
A friendly example of a CodeWalrus, but it's actually a code walrus. I might be able to shave off a few hundred bytes by only storing every other character, because each character is duplicated twice.
5) Rotating 4d hypercube, in under 640 bytes:
Code:
There really isn't too much to say here, it's just a rotating 4d tesseract I'm getting better at golfing, this one used various techniques that I didn't even know about earlier.
If you have any suggestions for relevant things you want me to try (be reasonable), you can post them below, and I might try to do it!
If I didn't provide an explanation, you are welcomed (even encouraged) to provide one of your own! If it is concise and accurate, I'll add it to the respective GitHub repo and link to it here, if you want.
I was inspired to do this primarily by this, which is simply beautiful (in my opinion, of course), and some of the below projects reflect that.
This is a growing list, ordered by creation date, and I'll probably end up editing this post with new scripts as I make them.
1) ASCII art π character, in 360 bytes of code:
Code:
document.body.innerHTML=atob("/AAAAAPwAAAAA+AAAAAD4eD/h//H4P8H/9/g/wf/3+D/D///4f8P///h/w///+H/D///wf4P///B/g///8P+D///w/4P//+D/g///wP+D///B/4P8/4D/gfz/Af/AAP4D/8AB/gP/4AP+B//wB8=").split('').map(x=>x.charCodeAt(0).toString(2).padStart(8).split('').map(x=>"# ".charAt(x)).join('')).join('').match(/.{40}/g).map(x=>'<pre style="margin: 0">'+x+'</pre>').join('');
You can find an explanation for this one here. It's really simple, and I created it just as an experiment to see what I could do.
2) Rotating 3D Cube in 500 bytes of JS:
Code:
(a=>{var r=-1,e=[r,r,r,r,1,1,1,1],m=[r,r,1,1,r,r,1,1],n=[r,1,r,1,r,1,r,1],t=Math.sin,o=Math.cos,p=Math.PI/36,i=a=>16+(a<0?Math.floor(8*a):Math.ceil(8*a)),l=e.map((a,r)=>.5*a+m[r]*t(24*p));m=m.map((a,r)=>e[r]*t(24*p)-.5*a),e=l,setInterval(a=>{var r=Array.from(Array(32),a=>new Array(32).fill(" "));l=n.map((a,r)=>a*o(p)-e[r]*t(p)),e=e.map((a,r)=>a*o(p)+n[r]*t(p)),n=l,e.map((a,e)=>r[i(m[e])][i(a)]="#"),document.body.innerHTML=r.map(a=>'<pre style="margin:0;">'+a.join("")+"</pre>").join("")},50)})()
I haven't taken the time to produce an explanation for this one, but all it is doing are some point rotations, which (let's be honest) aren't really that interesting. If you just look through the code, you can probably guess what it is doing, and you'll most likely be right, if you know your trig. I'm not really satisfied with it, because I can easily shave off 20+ bytes by storing Array and Math to variables. I also don't need all of the fancy calculations determining when to use Math.floor or Math.ceil. It doesn't provide a noticeable difference to the output and it's just hoarding bytes. Using this suddenly available bytage, I should force the text height:width ratio something I can easily deal with, instead of assuming it is 2.
3) Rainbow Flashy Text in almost 256 bytes of JS
Code:
eval(s=`var q=0,a=x=>{q++;document.body.innerHTML=
s.split('\\n').map((x,j)=>x.split('').map((x,i,a)=>
'<kbd style="color: hsl('+(360*(i+q+j))/50+',100'+
'%,50%)">'+x+'</kbd>').join('')).join('<br />')}//
setInterval(a,9);s='eval(s=\`'+s+'\`)'//_iPhoenix_`)
This is by far my favorite one (so far). It uses several of the tricks found in the aemkei world thing, linked above. It displays (almost, I can't do character escaping without some serious additions) the source code of the program and does a fun rainbow pattern. I can't really describe what it does in words, just check it out . As with the 3D Cube, this script could also be optimized. But in order for my rainbow effect to look good, all of the rows should be the same length, and any more optimizations would mess with it.
4) Animated CW mascot (), in almost 1800 bytes
Code:
var f=0,a=["@L@L@L@L@L@L@L@LUQsL@K-B@L@L@L@L@LEgsL@ALAssAAs-sL@L@L@LC1ELCwoEKQsLDigELCgB@L@L@LCxILCwAsL-LAAs@sAAsL@L@LCwtRCwoJWgMhHgAABCkLDigAAQsL@L@S@AACFNTQAWIQAs@AFgAL@L@LUQsKAAMlTUYHTUkeAQ4oBkEyAQsL@LEgsANyEATU0ATU0hACwAIRZCAAsL@LC1EKAyEgFAACF-CVoDISAWGTIB@LCxIAABYAFiEhIRY-AhIRYWFjcA@LCwtQAQo-MgFAMhISEhIBYWFhYZMgEL@SACxjAAs-AhFhYWFhYWFhYWNwAL@LUAQsKAQpE1oDIBYWFhYWFhYWGTIB@LEgAsLAAsCywAIRYWFhYWFhYWFiEA@LC1AEMVoEKQ4oAyEhISAWFhYWFhceAQsLCxIACwAAYwtjACEhACEAISEWFhZCNwALCwtQBjwBCgkKAyEeAhYXHgMhIBYWGjwB@SAEI-BCACEAQkIWISEhISEhIQA3AAsLUAY8BTIGPAAFOD4WFyEeAyEhIBkyAAELEgAANyEAQgAAQhYWISEAFhYhACFCAAsLC1AABTUeAAIZNBYXIBQAAhYUAAMgGTIBCxIAFiEACwAANyEh-ACw--ISEWAAtQ-B@K-AAQsL@L@LCg-Qs=","@L@-AL@L@L@L@L@LUQsLCwoELCwoAQoAAQsL@L@L@LEgsLCwAsLAsLLAAsLAAL@L@L@LC1ELCgQsKAABCgELCw4oAQsL@L@LCxILCwALACEh-ALAsLL-@L@LCwtRCwoAAyVNRgIXHgQpDigFMgEL@L@S@AACFNTQBNTSEALCwANzcA@L@LUQoFNR4HTUYHTUkeCVoDIBo8AQsL@LEgsAISEW-WAE0AYwAhIRYWNwAL@LC1-hQCFyEhIBQ-MhIBYWGTIB@LCxIAQg-CEWACEhISEhFhYWFjcA@LCwtQBCkKBjw-MgFhYWFhYWFhYZMgEL@SA@ACwLCwAhFhYWFhYWFhYWNwAL@LUAQsKAQpDigDIBYWFhYWFhYWFx4B@LEgAsYwAsCywAIRYWFhYWFhYWFiEA@LC1ABCgAJWxNaAyEhISAWFhYWFhceAQsLCxIAQg-AsAISEhACEhISEWFhZCNwALCwtQBjwBCgY8AyEeAyAWFAMhIBYWGjwAAQsSAEI-BCACEhISEWQjcAISEhIRY3-LUQoAAhQGPAMhISEgFhpBMgMhHgMjMgELEgsAADchABYWFgAhIRYWQgAhIQAhFjcAC1EKBTQXIBQ-IUAhcgFhkyAhYUAyEgFAgLABYh-L@-AAISE3-ACw-AtRCg-QsL@L@LCg-AEL@L@="],w=f=>(atob(a[f].replace(/-/g,'AAA').replace(/@/g,'Cws')).split('').map(x=>x.charCodeAt(0).toString(10).padStart(2,0)).join('')+'1').split(.map(x=>"<tt>"+x.split('').map(x=>"M +o'/:y\n.".charAt(x)).join('').replace(/ /g,' ')+"</tt>").join('[br /]');window.onload=x=>{d=document.body,e="innerHTML";setInterval(x=>{d[e]='';d[e]=w(f=+(f==0))},300)}
A friendly example of a CodeWalrus, but it's actually a code walrus. I might be able to shave off a few hundred bytes by only storing every other character, because each character is duplicated twice.
5) Rotating 4d hypercube, in under 640 bytes:
Code:
(t=>{a=document,d=Math,c=d.sin,o=d.cos,i=d.floor,r=0,l=a.body.appendChild(a.createElement("canvas")),s=l.getContext("2d");l.width=l.height=n=200,setInterval(t=>(e=>{r+=.01,s.clearRect(0,0,n,n);t=e.map(e=>[i(100+(h=45+15*e[2])*e[0]),i(100-h*e[1])]);"0102040813151923262a373b45464c575d676e7f898a8c9b9dabaebfcdcedfef".match(/../g).map(e=>{f=e.split("").map(e=>parseInt(e,16)),s.beginPath(),s.moveTo(...t[f[0]]),s.lineTo(...t[f[1]]),s.closePath(),s.stroke()})})(" ".repeat(16).split("").map((t,n)=>((t,n,d,i)=>[t,(a=o(r))*n-(e=c(r))*i,a*d-e*(p=e*n+a*i),e*d+a*p])(...n.toString(2).padStart(4,0).split("").map(e=>2*e-1)))),9)})()
There really isn't too much to say here, it's just a rotating 4d tesseract I'm getting better at golfing, this one used various techniques that I didn't even know about earlier.
If you have any suggestions for relevant things you want me to try (be reasonable), you can post them below, and I might try to do it!
If I didn't provide an explanation, you are welcomed (even encouraged) to provide one of your own! If it is concise and accurate, I'll add it to the respective GitHub repo and link to it here, if you want.