Rutt-Etra-Izer

See my Experiment on ChromeExperiments.com 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.

View Demo | Download Source

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.

32 Responses

  1. […] 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, […]

  2. Lawrie says:

    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!

  3. Felix Turner says:

    @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.

  4. […] it here: http://airtightinteractive.com/demos/js/ruttetra/ or download […]

  5. Lawrie says:

    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!

    • Felix Turner says:

      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.

  6. Rodger says:

    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.

  7. […] GLOW, ChrysaoraRutt-Etra-IzerRutt-Etra-Izer (WebGL app) by Felix Turner is an implementation of a video synthesizer. Simply drag and drop an […]

  8. Massimo Savino says:

    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)

    • Felix Turner says:

      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.

      • Massimo Savino says:

        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

  9. Cool demo! I bet you could do the entire thing on the GPU and just pass the image in as a texture.

  10. 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.

  11. Awesome. Love this. So much I composed a track inspired by it. – http://www.travisjmorgan.com/blog/archives/6822

  12. […] “Rutt-Etra-Izer is a WebGL emulation of the classic Rutt-Etra video synthesizer.” Explanation here. […]

  13. […] 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 […]

  14. Rutt-Etra-Izer — Airtight Interactive: images http://bit.ly/jJKSB0

  15. phil says:

    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

  16. Bill Etra says:

    NICE Work !

  17. nicoptere says:

    such a beautiful output for such a “simple” principle :)
    well done and thanks for sharing !

  18. Hello!
    Rett-Etra-Izer is awesome!
    How can i save images in high resolution format?

  19. Zam says:

    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 :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>