We're on Discord! Please join our server now if you don't want to miss anything! (More info) | Join the UCC4 contest! (More info)

* WalrusIRC (More rooms available on our Discord server)

Author Topic: _iPhoenix_ experiments with JS golfing  (Read 1183 times)

0 Members and 1 Guest are viewing this topic.

Offline _iPhoenix_

  • Custom title
  • Super User
  • Join Date: Mar 2017
  • Location: Location
  • Posts: 675
  • Post Rating Ratio: +16/-1
  • ███████ ▼ ♪ Best music ♫
    • @dj_iPhoenix
    • @UCytgMNPxAMDsxjimvxHf01w
    • Legend-of-iPhoenix
    • @the-legend-of-iphoenix
    • My website.
  • Gender: Male
_iPhoenix_ experiments with JS golfing
« on: April 17, 2018, 04:09:54 am »
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]
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]
(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]
eval(s=`var q=0,a=x=>{q++;document.body.innerHTML=
'<kbd style="color: hsl('+(360*(i+q+j))/50+',100'+
'%,50%)">'+x+'</kbd>').join('')).join('<br />')}//
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 :P. 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 :walrii: as requested)

  • Calculators owned: Two TI-84+ CE's
Please spam here: https://legend-of-iphoenix.github.io/spam/

"walruses are better than tuxedo chickens, all hail the great :walrii:" ~ me
Evolution of my avatar:


You can also use the following HTML or bulletin board code to share it on your page or forum signature!

Also do not forget to check our affiliates below.
Planet Casio TI-Planet Calc.news BroniesQC BosaikNet Velocity Games