I built this demo by porting one of my old Processing sketches to the fantastic Processing.js. The demo draws particle trails using Perlin noise to direct the particle motion. Move the mouse to change the noise function and click to randomize the particle drawing parameters.
Processing.js is a JavaScript port of Processing that renders to the HTML5 Canvas tag. It was originally built by the same guy who built jQuery. It’s nice to have a framework for handling common drawing and math functions. As a bonus, if you are familiar with Processing you will be able to jump right in.
Seems like hair is all the rage these days. Suitably inspired, I decided to build some animated hairy text.
The basis for the code comes from this perlin noise field code posted by lennyjpg. The text shape and colors comes from a loaded PNG. Each particle gets it’s color by sampling a random pixel in the image. Particle movements are controlled by perlin noise and each particle draws a trail as it moves.
If you follow this blog you’ll know I’ve been obsessed with 3D ribbons for a while now. I ported my AS ribbon code to Processing and I’m very happy with how it turned out. It’s refreshing to not have to worry about frame rates, since processing’s 3D performance is so good
Here’s the processing sketch and source code. You will need a fast machine with OpenGL support to run the sketch – basically don’t blame me if it crashes your browser ;).
[UPDATE – it seems OpenGL sketches don’t like to run off the web. I uploaded a P3D version here that should be more compatible. Since it’s not using additive blending you get a strange pink color instead of the nice glowy white…]
It would be nice to get some realtime glow/blur in here to smooth things out a bit. I think this library may do the trick but it could take me a while to figure it out.
Ray tracing is the CG rendering technique used in Pixar movies and most other broadcast quality CG. Basically it bounces millions of virtual photons around the scene to simulate how objects reflect light and cast shadows on each other. This produces super realistic images at the cost of being very computationally expensive.
P5Sunflow produces images with creamy shadows and a solid sculptural feel that are quite different to anything you can achieve with most real-time 3D engines. Unfortunately rendering times are really slow. The videos below are overnight renders. I’d be interested to find out if there is some kind of ‘fake’ ray tracing that produces similar results quicker.
Click through to see the HD and downloadable QuickTime versions. These work well looped in QT.
You can download the Processing sketch for the cube wall animation here. To use it you need to install the P5Sunflow library as described here. To run P5Sunflow you need to use the version of Processing that comes without Java, since it requires Java v1.5 and Processing comes with Java1.4.
I love Flash – I’ve been using it for years and know most of it’s tricks. Now with papervision and away3D we have a some nice 3D APIs. While these are great, 3D in Flash is seriously lacking in rendering power. Once you throw a few hundred simple 3D shapes on the stage, your frame rate starts to plummet.
Flash is still the best choice for ubiquitous interaction on the web, but for 3D graphics, there are some better alternatives. Please note that I am not lobbying for native 3D graphic card support inside Flash (that didn’t work out too well for shockwave).
From my research so far, 2 of the most interesting apps for creating next-gen realtime 3D graphics are processing and vvvv.
PROCESSING
Processing has been around for a while and is gaining traction as a 3D visualization tool. Processing is free and cross-platform. The flickr processing pool shows the kind of stuff you can build with it. Since Sun updated the java preloader graphic to be cool and orange, we might even start seeing some all processing websites.
I’ve resisted learning processing for a while, but when Robert Hodgin generously released some of his source code I had the motivation to download and try it out. Surprisingly, processing comes with a nice, lightweight IDE. Each project is a sketch which is basically a folder containing simple text files. Processing has a number of libraries and examples for handling 3D graphics.
Lennyjpg is creating some beautiful work with processing:
vvvv is a ‘toolkit for real time video synthesis’. It’s a crazy app built by some crazy german people. The tutorials are written with typical deadpan teutonic humor. It’s currently windows-only and free. Jitter is a similar cross-platform app.
The concept of vvvv’s UI is ‘patches’. Modules are laid out in a 2D space and patched together with virtual wires. The beauty of this paradigm is that there is no compilation – results are rendered in realtime as you tweak the patches. Since I come from a textual programming background I find this to be quite baffling, but maybe it’s good to have your head turned around now and again.
Desaxismundi has been creating some fantastically beautiful pieces using vvvvv such as this deconstructed sphere:
and these:
About
Hi. I'm Felix Turner, a web developer and creative technologist based in Los Angeles. This blog is about technology & design.
RT @nickw84: UK: I'll tell you what I want, what I really, really want
EU: So tell me what you want, what you really, really wan… https://t.co/bMz3bYYBEm
RT @huwlemmey: I have just discovered the horrifying truth about figs
Might be interesting to apply GAN to a vector format to get warped illustrations? https://t.co/exfVxmK44b
RT @EveryNoise: If you're curious what Spotify's HUMAN playlist curators are making in countries other than yours, I made a little… https://t.co/sqKvdw3IzA
RT @hardmaru: Puts things in perspective when you realise how many people in the world are so much worse off. https://t.co/5YSuiqCfem
Latest Tweets