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.

You should try to make a mini-game such as Breakout. If you just want it to be an animation, some sort of illustration of some place? I'd also make the 3D cube a little more 3D and define the lines, but I don't know if that's possible using the techniques you're using. (Same with the mini-game and stuff) I love the rainbow one, and it looks just like the text on The Button when you're in control of it. I'm wondering though. Do the codes for the "Click Me" rainbow text and the one shown above have anything in common? Do they work the same way?

I'd like the "World" globe thing better if there wasn't the stuff on the side, but I guess it's part of the art of it. (EDIT: Actually, I'm kind of starting to like it now...)

If making a cube is easy, I'd try making 3D shapes with more vertices like tetrahedrons, and stuff like that. Make a horse prance! Make a bullet go “pieu!” Make a rocket go WHOOOOOOSH! There are lots of ideas! ***jcgter runs

1) Yeah. I was thinking of games that would be relatively easy to implement, and breakout is high on the list.
2) That's a lot of code, surprisingly. If JavaScript were certain languages, we'd just have a built-in for it.
3) Yep, you are absolutely correct. Both scripts split the text into characters and use the CSS hsl(hue,saturation,lightness) command to get the actual rainbow effect. You should look up HSL (not specific to CSS) if you aren't familiar with it already
4) For me, the best part of the globe thing is the fact that it displays a modified version of the source code. I guess we all have different opinions, though
5) Believe it or not, a tetrahedron is actually easier to add because it has less vertices. I suppose I could do a rocket animation, that could actually be quite cool!

**Referring to the rainbow flashy text
If you really wanted to golf hard, and didn't care to get a nice power of 2 as the number of bytes, you could take off the comments (obviously) and also, you don't need to self-close your tags... you should also be able to change the '\\' into '/', but it seems to give a different result on the page. You don't need to escape the '<' character in a string...
With jQuery, you could shrink it some more, probably to about 200 bytes, but depending on what rules you follow for golfing, that might not be allowed.
Looks to me like someone just wanted the code to be exactly 256 bytes

I was more concerned with getting the lines to be even, and less with the actual number of bytes. I'm just casually golfing so I'm setting my own rules. I'm not allowing external CSS or reading from other webpages so I'm not going to do jQuery. I also never use jQuery in my actual JS (You can do everything jQuery can do in vanilla JS), so it's somewhat foreign territory.

With the pi one, I could easily collapse some bytes down over there, but the fact that it is pi (a circle constant) in 360 (another circle constant, but this one is not fundamentally related to the circle as much as pi) bytes is pretty cool.

As for the cube, I could and will easily shave off a bunch of bytes. I set 500 bytes as a goal before I even started writing the code, so once I reached it I stopped optimizing.

You are pretty close to a perfect cube (8³=512)

For my 1337th post, I decided to draw my avatar in 1337 bytes. I tried to do this, but I guess I did too good, because I did it in only (approx) 900 bytes. Whoops. It was fun, at the very least, and kept me occupied for a good hour.


Code:


Explanation:

This looks really intimidating and weird, so let's break it down. First, let's add indentation and do some simple substitutions.


Code:


Let's go through this in sections.

Code:


This is where all of our image data is stored. I am using a color palette, stored in p, to save some bytes. The underscores after each hex color value are important, we will use them later. The variable z contains sets of two characters. The first character is the index in p that the color we want is at, and the second is the number of times that color appears in a row. Both of these are converted into base 36 (0-9, a-z) so that they only take up one character each. We also create a variable, r, that we will use as the vertical offset when drawing.


Code:


This reverses the compression described above. z.match(/../g) splits the text into sets of two characters, the .map performs an action on all of these pairs of characters. var z = a.split(""); splits these two-character pieces into one-character parts, p[parseInt(z[0], 36)] grabs the appropriate color from the palette and .repeat(parseInt(z[1], 36)) repeats it the appropriate number of times.

.join("").split("_") joins these chunks together and splits this combined text into an array of individual colors, such that one element corresponds to one pixel. Now, all that's left is to draw them!


Code:


var p = document.createElement("p") creates an element. One element = 1 pixel. As an optimization, we store p.style into a variable, e, because we will be using it multiple times. e.position = "fixed", e.top = r + "px", and e.left = z % 32 * 16 + "px" all set the element's position on screen. We then set the color of each pixel with e.backgroundColor = "#" + a. Because setting a variable to a value returns the value, you can chain variable assignments like I did in e.height = e.width = "16px". After this, we add the element the the screen. (z + 1) % 32 || (r += 16) is a little weird, but because of how JS evaluates expressions, the vertical offset, r, is only incremented by 16 if the next pixel is on a new line.

I hope this made sense at least a little bit. Enjoy!

I've decided to formalize my golfing rules:

0. It has to be cool.
1. No libraries/reading from outside sources.
2. It has to work (at the very least) in Chrome.
3. Aesthetics are more important than code size.
4. Golf it as small as possible, unless it conflicts with rule 3.
5. Use common sense. If it feels like cheating, it is.
6. JS hacks are explicitly allowed.
7. This list can change at any time

I golfed a loading wheel into 424 bytes, you can watch a timelapse of me doing it here:

https://www.youtube.com/watch?v=ltFe87xs7-4


Code: