Creative JS is a showcase and blog of creative JavaScript, HTML5 canvas and WebGL projects, demos and techniques.
HN 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.
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…
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.
Andrew Price has some amazing tutorials on how to do it with just Blender: http://thenatureacademy.blenderguru.com/sp/7612-the-nature-academy-live-now
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-procedural.html
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?
The 4 parts:
- The JavaScript family tree: http://creativejs.com/2013/06/the-race-for-speed-part-1-the-javascript-engine-family-tree/
- How compilers work: http://creativejs.com/2013/06/the-race-for-speed-part-2-how-javascript-compilers-work/
- JavaScript compiler strategies: http://creativejs.com/2013/06/the-race-for-speed-part-3-javascript-compiler-strategies/
- The future for JavaScript: http://creativejs.com/2013/06/the-race-for-speed-part-4-the-future-for-javascript/
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.