_iPhoenix_ experiments with JS golfing

[_iPhoenix_]

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 Select Expand

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 Select Expand

(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 Select Expand

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.




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! (Yes, I am doing that as requested)