Rutt-Etra-Izer is a WebGL emulation of the classic Rutt-Etra video synthesizer. This demo replicates the Z-displacement, scanned-line look of the original, but does not attempt to replicate it’s full feature set.
The demo allows you to drag and drop your own images, manipulate them and save the output. Images are generated by scanning the pixels of the input image from top to bottom, with scan-line separated by the ‘Line Separation’ amount. For each line generated, the z-position of the vertices is dependent on the brightness of the pixels.
Running the Demo
To run the demo you need the latest version of Chrome or Firefox, and a fairly new machine. Check if your browser supports WebGL here. If it’s still not working, try restarting your browser.
If you are experiencing slow performance, there are a few things to try:
- Reduce stage size
- Increase line separation
- Reduce input image size
Generated Output
You can view more images generated by this demo in this Flickr set.
I also built an audio-reactive version with Processing . View a video of this in action below:
VAC / Rutt-Etra-Izer™ from felixturner on Vimeo.
More About Rutt-Etra
The Rutt-Etra video synthesizer was built by Steve Rutt and Bill Etra in 1972. It was one of the first devices to allow real-time manipulation of live video and helped instigate the video art movement of the 1970s. Unfortunately Steve Rutt recently passed away. His pioneering contributions to the field of video art will be always be remembered.
Anton Marini (Vade) created a fantastic Rutt-Etra Emulator for Quartz Composer. The source code of this demo is inspired by Andy Best’s 3D Web Cam Lines processing experiment.
Credits
UPDATE (June 13): It appears that saving images from WebGL is broken in Chrome 12. I’m looking into possible solutions. In the meantime, you can use Firefox instead.
UPDATE (June 14): Saving images in now fixed in Chrome 12. The solution is to call a render() immediately before calling toDataURL(). Thanks again to AlteredQualia and Mr.doob.
Latest Tweets
[…] Composer Plugins : v002 Rutt Etra 2.0.1 Rutt-Etra-Izer is a WebGL emulation of the classic Rutt-Etra video synthesizer. @felixturner Tags: photo, […]
Wow, this is amazing. Great work Felix! I’ve just spent ages Rutt-etra-izing XRay images, which look particularly cool, if a little spooky.
I’d love to see it running real time based on webcam input. Or to be able to export the lines as a mesh and 3D print a 2D image!
@Lawrie – AFAIK Javascript does not allow access to the webcam. It is possible to load it from Flash to JS, but I dont think that would work realtime. You can use live webcam video with Processing – check the link to Andy Best’s sketch above.
[…] it here: http://airtightinteractive.com/demos/js/ruttetra/ or download […]
Yeah, I was thinking along the lines of a swf to pass the camera data to the JS with ExtrnalInterface. I might give it a go to test the performance if I get some time 🙂 Congrats on the CreativeApps.net feature too!
thanks! If you figure out Flash -> JS webcam please let me know. I guess the other option would be to build it directly in Flash, which would also give microphone access for audio reactivity. I haven’t tried additive blending in Flash yet but I’m sure it’s do-able.
I L O V E this thing SOOO much! P L E A S E NEVER EVER take it off the web! I’m no programmer, or computer nerd or anything, so I depend on your web app for doing designs with it. Or are you planning to create a Mac Os or iPhone app out of it? That’ll be nice!
Thanks and greetings from Amsterdam.
Rodger.
Glad you like it! You can download the source above and run it on your own web server if you like.
I totally agree… this was awesome!
[…] GLOW, ChrysaoraRutt-Etra-IzerRutt-Etra-Izer (WebGL app) by Felix Turner is an implementation of a video synthesizer. Simply drag and drop an […]
How does the save work? When I try it chrome throws up a blank page for a PNG image; saving that results in am empty pic.
Chrome 12 on Debian Linux – testing (if it helps)
It appears that saving images from WebGL is broken in Chrome v12. I’m looking into possible solutions. In the meantime, you can use Firefox instead.
No worries, I’m just saving via screenshots instead; my FF (Iceweasel 🙁 ) doesn’t work with it for some reason.
the controls seem a bit over-sensitive; I have really poor paint rates onscreen (1-2 FPS) and small actions seem to overshoot the mark badly to tilt or rotate. Is there anything that can be done to decrease the sensitivity?
Cheers
Mass
Cool demo! I bet you could do the entire thing on the GPU and just pass the image in as a texture.
By seeing these images, I hope to get some free-time to read about WebGL and get a chance to work with it. Thanks for good information.
Let’s support CSS3. Read CSS3 Multi-Column Layout Module.
Also CSS3 Writing Module can be helpful for users with languages other than English.
Awesome. Love this. So much I composed a track inspired by it. – http://www.travisjmorgan.com/blog/archives/6822
Fantastic!
[…] “Rutt-Etra-Izer is a WebGL emulation of the classic Rutt-Etra video synthesizer.” Explanation here. […]
Rutt-Etra-Izer http://t.co/OkPuKnL !!!!
[…] gingen mit C64 Yourself und dem Rutt-Etra-lzer, zwei äußerst schnieke Drag’n'Drop Image Converter durch’s Netz mit denen man ruhig […]
Rutt-Etra-Izer — Airtight Interactive: images http://bit.ly/jJKSB0
http://t.co/S6zPrA8
this is so damn good 🙂 realy!
is there any way to save the output in a bigger resolution?
that would be unbelievable.
phil from germany
The output resolution matches the app stage size. So increase the ‘Stage Size’ option and/or make your browser window larger.
aye, but can i “emulate” or set the resolution to a fixed (much bigger) size, for example 9000x9000px somewhere in the sourcecode?
Yes you can, but it may bring your system to it’s knees. Source code is available at the link up top.
Where in the source code can you change the stage size to a very high print-ready resolution?
NICE Work !
Wow – Bill Etra read my blog! 🙂
such a beautiful output for such a “simple” principle 🙂
well done and thanks for sharing !
Hello!
Rett-Etra-Izer is awesome!
How can i save images in high resolution format?
To maximize image output resolution, increase the ‘Stage Size’ option to 1 and expand your browser window.
awesome stuff felix! i’ve even tried andy’s 3d webcam lines processing code and it works! it’s be great if you could share the audio-reactive code as well 🙂
[…] script kun je op de AI website vinden waar ook de sourcecode beschikbaar […]
Hello! Good day! Congratulations for the great work! Wanted to know if the generated images can be used for commercial and contests work. Using my own images. Thank you very much!
I would also like to know if I can use generated images for other uses more than fun 🙂 Crediting developers, of course…
[…] Rutt-Etra-Izer is a WebGL emulation of the classic Rutt-Etra video synthesizer, by Felix Turner, which ‘replicates the Z-displacement, scanned-line look of the original, but does not attempt to replicate it’s full feature set’. The demo allows you to drag and drop your own images, manipulate them and save the output. Images are generated by scanning the pixels of the input image from top to bottom, with scan-line separated by the ‘Line Separation’ amount. For each line generated, the z-position of the vertices is dependent on the brightness of the pixels. […]
this is really awesome!
I’m learning web developing and I’m trying to build my first website, your creating is exactly what I’m looking for, thank you for your sharing, I hope I can build this kind of stunning work like you