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 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 effect from Future Crew's Unreal
http://robharper.ca/js1k/shadebobs.html
Size: 311 bytes
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
Draws a "mine cart through a wormhole" type of effect using a neat approach to rendering movement
http://www.robharper.ca/js1k/worm.html
![image](https://private-user-images.githubusercontent.com/900789/315590997-577734e2-1ae8-4e35-b4e0-34a420c888fb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4MDcxODIsIm5iZiI6MTcyMzgwNjg4MiwicGF0aCI6Ii85MDA3ODkvMzE1NTkwOTk3LTU3NzczNGUyLTFhZTgtNGUzNS1iNGUwLTM0YTQyMGM4ODhmYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxNlQxMTE0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OGQ3ZTRlYTZmNDc3YTY4NWUzZmQ1NTQzODQ5M2E1YWFlY2VkMzAzODk5N2U5ZjhhMmQyNzEyZWEzNmI2YTI2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.VNP1EVTMFDYUqmBUmmYKSpQZ7cvzDeM6YnB_JZfyZHI)
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)
A spinning 2-arm spiral galaxy
http://www.robharper.ca/js1k/galaxy.html
![image](https://private-user-images.githubusercontent.com/900789/315590904-c2625525-8d93-4635-aa3e-5092c50dec0c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4MDcxODIsIm5iZiI6MTcyMzgwNjg4MiwicGF0aCI6Ii85MDA3ODkvMzE1NTkwOTA0LWMyNjI1NTI1LThkOTMtNDYzNS1hYTNlLTUwOTJjNTBkZWMwYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxNlQxMTE0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01NDZhZWYzYTg2Y2Q4NGYyYTk4ODQ2NDU3ZDc1OWZiYTg1NzYxNjRmMjU4ZjM0NzcxZGFjOTE0ODFlYWNkN2I3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.J2QlW3zxkStN5gtT632OXXBYHz_sM9Aqh5JNPxO-C0w)
Size: 542 bytes
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
![image](https://private-user-images.githubusercontent.com/900789/315590473-bcd54344-21e1-4f69-b240-c77619514047.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4MDcxODIsIm5iZiI6MTcyMzgwNjg4MiwicGF0aCI6Ii85MDA3ODkvMzE1NTkwNDczLWJjZDU0MzQ0LTIxZTEtNGY2OS1iMjQwLWM3NzYxOTUxNDA0Ny5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxNlQxMTE0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mMGYxODQzMzE2ZDU1YzE0ZjlhZTcwYWFhNDEyNzViOGU4NjZiNmEyZWRhNmNmNDJmNGIwNjNiODBkZjE5MTkyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.7tb8pMcnG1ij1uJ4Pgn9qw9PufEwoP1we1PHI6LAd7c)
Size: 387 bytes
A play on the Joy Division album art for Unknown Pleasures
http://www.robharper.ca/js1k/plasma.html
![image](https://private-user-images.githubusercontent.com/900789/315590641-570fc9e5-9c1f-4227-8b9b-02e615a067c1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4MDcxODIsIm5iZiI6MTcyMzgwNjg4MiwicGF0aCI6Ii85MDA3ODkvMzE1NTkwNjQxLTU3MGZjOWU1LTljMWYtNDIyNy04YjliLTAyZTYxNWEwNjdjMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxNlQxMTE0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jMjUxYzdjYzczMTdiZTQzODk1ZThiYzRlMjBiYzFiYTgyOWEzNzUwNmYxNGMxYmU4NDRjMmQ2MWM0NjUyN2RjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.tW4RnDQi3zcIkkeeXmEIQg60R7iA5ap2C-YqvTaCb9o)
Size: 397 bytes
Basic 3d ray casting, flying over a city scape, pixelated
http://www.robharper.ca/js1k/bitscape.html
![image](https://private-user-images.githubusercontent.com/900789/320305785-fc0c438f-d5d4-4b21-a990-7e3d4711c14f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4MDcxODIsIm5iZiI6MTcyMzgwNjg4MiwicGF0aCI6Ii85MDA3ODkvMzIwMzA1Nzg1LWZjMGM0MzhmLWQ1ZDQtNGIyMS1hOTkwLTdlM2Q0NzExYzE0Zi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxNlQxMTE0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iMjYwNTViZDM5ZmNlNDljMDNjOTFmYzFhYzQ1OGQ5MDk1ODgzNjc1MzRiNjZiNjA2MmFlNjgzMjYxODE5ODViJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.4FZS0ZvFtwsFT_RQ4UYo07yM6Wx3hFKFrm7zr_eJjN8)
Size: 351 bytes
Black and white geometric patterns through varying the size of rectangle drawn at relatively static locations
http://www.robharper.ca/js1k/interference.html
![image](https://private-user-images.githubusercontent.com/900789/316099708-98419467-fc5e-4c70-8c31-d02887f79989.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4MDcxODIsIm5iZiI6MTcyMzgwNjg4MiwicGF0aCI6Ii85MDA3ODkvMzE2MDk5NzA4LTk4NDE5NDY3LWZjNWUtNGM3MC04YzMxLWQwMjg4N2Y3OTk4OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxNlQxMTE0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02OGFhMGNmNzA1MDk4OTJjYWY2YTE2OGM2NzhmMDFmZTg2NmRlZGI5YTc3YmQyODU3MTljZjBkNTg1NGUyYjY5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.DBvfEeoYZbl1QKMKUnseL5gb_igdBm-7qxuLBwWg20A)
Size: 170 bytes
Draws an old-school demo plasma effect - a true "Dweet": 140 bytes
http://www.robharper.ca/js1k/plasma.html
![image](https://private-user-images.githubusercontent.com/900789/315590741-8cafabd0-7931-4a6d-a815-4c96b6268214.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4MDcxODIsIm5iZiI6MTcyMzgwNjg4MiwicGF0aCI6Ii85MDA3ODkvMzE1NTkwNzQxLThjYWZhYmQwLTc5MzEtNGE2ZC1hODE1LTRjOTZiNjI2ODIxNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxNlQxMTE0NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kNjIxNjNkYTM5YjkxYzgyM2JjOTVmYTM3NDgwNDM1YzBmNTc0ODAyYjNmNjFkNWQ4NjI0MDU4Yzc0MGU5OTBjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.YvtKThZre1Z4MBszqdDgePm1afF-jAFAHz8RFbRaXl0)
Size: 140 bytes
Sometimes it's fun to just play with effects and not try to squeeze them down. So:
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
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
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.
To run the uncrushed code, run:
npm run serve
After building, serve the crushed and inlined can be run via:
npm run serve-dist