C
Creative JS
creativejs.com · Company blog · on HN since 2011
Creative JS is a showcase and blog of creative JavaScript, HTML5 canvas and WebGL projects, demos and techniques.
What HN saysHN commenters link it for demoscene-style JavaScript demos, tiny-size entries like the 28KB mountain fly-through, and the series on how JavaScript engines and compilers work.
26HN people shared it
10linked it in comments
18stories submitted
167story points
2 years agolast shared
2011people per year2026
Most-shared posts
- 1Creative js - all Creative JS/HTML5/CSS projects3 people · 6 points · first shared 2011 · discussion on HN
- 2SnappyTree: a WebGL-based procedural tree generation app2 people · 13 points · first shared 2012 · discussion on HN
- 3Jsexe javascript compressor2 people · first shared 2012
- 4How JavaScript compilers work1 people · 95 points · first shared 2013 · 26 comments on HN
- 5Escapes.js – Retro ANSI art in JavaScript1 people · 31 points · first shared 2012 · 7 comments on HN
- 631 days of Canvas1 people · 3 points · first shared 2011 · discussion on HN
- 7Gunfire, Tape Loops, And More With The Web Audio API1 people · 2 points · first shared 2012 · discussion on HN
- 8CreativJS is live (The new home of Creative JavaScript and HTML5)1 people · 2 points · first shared 2011 · discussion on HN
- 93D chess based on Photon and Chess.js1 people · 2 points · first shared 2012 · discussion on HN
- 10JAM With Chrome | CreativeJS1 people · 2 points · first shared 2012 · discussion on HN
- 11Grand Theft Auto - WebGL tech demo1 people · 2 points · first shared 2012 · 1 comments on HN
- 12The new home of Creative JavaScript and HTML5 | CreativeJS1 people · 2 points · first shared 2011 · discussion on HN
- 13Space missiles, zombie brains and city simulation from js13k1 people · 2 points · first shared 2012 · discussion on HN
- 14The JavaScript engine family tree1 people · 1 points · first shared 2014 · discussion on HN
- 15Augmented Reality comes to JavaScript1 people · 1 points · first shared 2012 · discussion on HN
What HN people wrote when they linked it
onion2k · 2018-01-24
Have a look at the demo sites for rune.js, three.js, create.js, sketch.js and processing.js. Then look up a few people like Seb Delisle (https://seb.ly/), Ana Tudor (https://codepen.io/thebabydino/), and Ricardo Cabello (http://mrdoob.com/). Browse around on Codepen.io and http://creativejs.com/ (especially http://creativejs.com/tutorials/index.html). Sadly Creative JS is essentially dead but it's still worth reading.
robxorb · 2024-05-12
Here it is in 28KB. The site also links to a 9KB version (but it didn't work for me):
http://creativejs.com/2013/02/elevated-a-beautiful-mountain-fly-throug…
hgsgm · 2023-06-04
crashandburn4 · 2013-11-20
is there anything detailing the maths/programming techniques behind this? can anyone confirm whether this is Barnes-Hut?
I've had a look here: http://creativejs.com/2013/11/coupled-turing-pattern-and-219-particles…
but there's no details on the specifics
deweerdt · 2013-06-08
The 4 parts:
- The JavaScript family tree: http://creativejs.com/2013/06/the-race-for-speed-part-1-the-javascript…
- How compilers work: http://creativejs.com/2013/06/the-race-for-speed-part-2-how-javascript…
- JavaScript compiler strategies: http://creativejs.com/2013/06/the-race-for-speed-part-3-javascript-com…
- The future for JavaScript: http://creativejs.com/2013/06/the-race-for-speed-part-4-the-future-for…
DanielRibeiro · 2013-02-10
Andrew Price has some amazing tutorials on how to do it with just Blender: http://thenatureacademy.blenderguru.com/sp/7612-the-nature-academy-liv…
It is more on modelling rather than generating though.
On procedural generation, we discussed[1] this app written in WebGL: http://creativejs.com/2012/06/snappytree
Other peopled did it with Three.js: http://catchvar.com/threejs-procedurally-generated-infinite-terra#more…
And finally, a really lively discussion[2] turned about The Death of the Level Designer: Procedural Content Generation in Games[3]
[1] http://news.ycombinator.com/item?id=4161263
[2] http://news.ycombinator.com/item?id=3872615
[3] http://roguelikedeveloper.blogspot.com/2008/01/death-of-level-designer…
wullon · 2012-09-18
Very interesting.
Looks like some oldschool video game developers got into Apple webdev team.
About the last paragraph, we (Adinpsz) tried the PNG compression technique for JS demomaking (actually it's even a self-loading PNG-HTML ;)).
You can learn more here with the JsExe tool: http://creativejs.com/2012/06/jsexe-javascript-compressor/
And see it in action here: http://pouet.net/prod.php?which=59071 (http://adinpsz.org/online/fabrik/)
But HTTP compression should be better anyway for "real world" usecases?
X4 · 2013-06-01
heh, here's a hacky idea ;)
Take a PNG, base64 encode, compress and gzip your js template into it, let it create the same css3 code, but by using javascript. This works by putting the png into a canvas... here's a guide ;) http://creativejs.com/2012/06/jsexe-javascript-compressor/ and http://iamcal.github.io/PNGStore/
haha, you could save angular.js, your css,html and image sprites into two or three png's. :P
Hey are you still with me? We could theoretically go further, there are no guarantees though. We'll use "Multiphase Compression". Uncompression is slow, but we only care about space, let's hope we save more than we use.
Step 1: Store css/html/js into the png as mentioned above. Then look for a "minimal" fractal image compression library written in C. Run the png through the fractal compressor.
Step 2: Save the output into a Javascript ArrayBuffer
Step 3: Now convert the minimal fractal compression decoder to javascript using Emscripten. And store the output into a png again. Then decode the javascript from the png and let the fractal decoder create a png out of the ArrayBuffer. Then extract the js/html/css from the png that we just generated on the client-side. We now have the final data. We can let it remove all unnessary js after saving the extracted data into html5 localstorage.
mnicole · 2013-04-04
I'm a designer, but I've never been into traditional art because I grew up knowing that digital pieces could be so much more than traditional media. I think a lot of techies probably feel the same way; they're waiting for artists to better familiarize themselves with the tools we use because that's where the impressive stuff happens.
Not sure if any of these fit into your definition of art+tech, but I'm a huge fan of the stuff shown on Creative Applications (http://www.creativeapplications.net/). Joanie Lemercier's work also falls under this category (http://tumblr.joanielemercier.com/). Branden Hall is also doing a lot of interactive art pieces lately (https://vimeo.com/waxpraxis), and Manny Tan is doing some great visual stuff with various technologies as well (http://www.uncontrol.com/).
And since the individual post about it didn't get any love here the other day, the Flat Surface Shader project (http://wagerfield.github.com/flat-surface-shader/) is a great example of open-source pieces that others can fork and build off of that I hope we see a lot more of (in addition to designers and developers working on these types of projects together to begin with).
To that point, Chrome Experiments (http://workshop.chromeexperiments.com/) and Creative JS's tutorials (http://creativejs.com/tutorials/) are great introductions to what is possible for those wishing to delve into technical art. Nylllon (http://nylllon.com/) also does a good job of curating some great art+tech…