js1k

Having a little fun with JavaScript in spirit of the js1k (www.js1k.com) competition and the demo scene from the early 90s. The code isn't pretty but it's fun.

Rotozoom

Rotozoom and lens refraction effect from Future Crew's Second Reality

http://robharper.ca/js1k/lens.html

This may cheat a bit because it uses an image but the rest of the effect is entirely JS first principals (canvas). I've done very little optimization or shrinking. It would be much much faster to do this with WebGL shaders but it's more fun to pixel-twiddle like in the Turbo PASCAL days.

Size: 920 bytes

Note: This is slightly cheating since the size of the image is not included

Shadebobs

Shadebobs effect from Future Crew's Unreal

http://robharper.ca/js1k/shadebobs.html

Size: 311 bytes

Hypno

Throw-back to Future Crew's Second Reality "Oscillating Cirles + Plasma". Uses WebGL fragment shaders to compute pixel values

http://www.robharper.ca/js1k/hypno.html

Size: 1019 bytes

Worm Hole Train

Draws a "mine cart through a wormhole" type of effect using a neat approach to rendering movement

http://www.robharper.ca/js1k/worm.html

Size: 465 bytes

Note: This demo uses the Dwitter tiny code framework (provides a few helper functions and handles calling your render function at 60 FPS)

Galaxy

A spinning 2-arm spiral galaxy

http://www.robharper.ca/js1k/galaxy.html

Size: 542 bytes

Chaos Game

Draws a series of iterations of the chaos game within a heptagon with varying factor values over time

http://www.robharper.ca/js1k/invariant.html

Size: 387 bytes

Joy

A play on the Joy Division album art for Unknown Pleasures

http://www.robharper.ca/js1k/plasma.html

Size: 397 bytes

BitScape

Basic 3d ray casting, flying over a city scape, pixelated

http://www.robharper.ca/js1k/bitscape.html

Size: 351 bytes

Interference

Black and white geometric patterns through varying the size of rectangle drawn at relatively static locations

http://www.robharper.ca/js1k/interference.html

Size: 170 bytes

Plasma

Draws an old-school demo plasma effect - a true "Dweet": 140 bytes

http://www.robharper.ca/js1k/plasma.html

Size: 140 bytes

Not 1k

Sometimes it's fun to just play with effects and not try to squeeze them down. So:

Time Warp

Colorful warp effect inspired by http://roy.red/posts/slitscan/ using voronoi noise and GL shaders

http://www.robharper.ca/js1k/tunnel.html

Size: Whatever

Development

npm install

# Build first-pass minified js
npm run build-min

# ...edit files in build/min by hand

# Second minification pass + inlining in HTML, copying to /docs
npm run build-dist

Hand edits include:

• Removing var definitions

RegPack

The RegPack compressor can be applied to the JS by enabling via flag in scripts/dist.js. It can significantly shrink JS but makes it nearly unreadable.

Running

To run the uncrushed code, run:

npm run serve

After building, serve the crushed and inlined can be run via:

npm run serve-dist