blog.omine.net

First vvvv experiment

eduardo.omine — Thu, 16 Apr 2009 03:39:47 -0700

This is a quick experiment made with vvvv.

Just spinning spheres and moving textures.

Audio reactive GLSL tentacles

eduardo.omine — Sat, 04 Apr 2009 04:36:45 -0700

Continuing my GLSL studies — now with dynamic lighting (vertex shader) and texturing (fragment shader).

This application runs at 35fps at 1280×720 pixel resolution on my ATI HD 4850 card. There are 1024 tentacles, drawn with gluCylinder — I guess this can still be optimized.

Made with OpenFrameworks v0.06 and GLFW.
Music: “M” by Telefon Tel-Aviv.

Havaianas

eduardo.omine — Sun, 29 Mar 2009 09:50:18 -0700

This project took a lot longer than expected, but it has finally gone live — it is the new website for Havaianas, the worldwide renowned Brazilian brand of sandals.

Developed by colmeia.

Johnnie Walker Black Label

eduardo.omine — Thu, 19 Mar 2009 15:52:34 -0700

For the last 2 months we at colmeia worked on the new Brazilian website for Johnnie Walker Black Label. It’s a linear experience, with simple interactions, throughout which visitors learn more about the history and the uniqueness of the whiskey.

Full credits here.

GLSL Tentacles

eduardo.omine — Mon, 23 Feb 2009 11:39:44 -0800

Replaced the small spheres by cones distributed over the big sphere’s surface. Blur amount is controlled with the mouse.
Made with OpenFrameworks.
Music: “My Two Nads (Dad Reprise)” by Out Hud.

GLSL Blob 2

eduardo.omine — Sun, 22 Feb 2009 09:21:31 -0800

Lightning the scene with the vertex shader.
Made with OpenFrameworks.
Music: “Trash Scapes” by Ellen Allien.

GLSL Blob

eduardo.omine — Sat, 21 Feb 2009 12:57:16 -0800

My first GLSL -based animation. The blob is made of 3 glutWireSpheres deformed by applying a vertex shader. Deformation is affected by the music and mouse coordinates. In the code snippet below, fft is a value taken from ofSoundGetSpectrum and mult is the pair of mouse coordinates (x, y).

#version 120
uniform float fft;
uniform vec2 mult;
uniform vec3 col;
varying vec4 v;
void main()
{
    v = vec4(gl_Vertex);
    vec4 v2 = v;
    v.x += cos( v2.z * mult.x ) * fft;
    v.y += sin( v2.x * mult.y ) * fft;
    v.z += cos( v2.y * mult.x ) * fft;
    gl_Position = gl_ModelViewProjectionMatrix * v;
}

Check the high-res images at Flickr .
Made with OpenFrameworks .
Music: “Geek Down” by J Dilla.

Fancy

eduardo.omine — Mon, 09 Feb 2009 18:41:58 -0800

My latest freelance Flash project, a website for San Francisco-based Fancy has just gone live. Adhemas designed it and R2 animated it.

Typographic sketches

eduardo.omine — Sun, 11 Jan 2009 10:57:35 -0800

Before working with web and interactive development, I was very involved in type design. Most of my typefaces are currently distributed through MyFonts.

I haven’t released any typefaces since 2006 but I still draw letters all the time — I always like to have a piece of paper and a pen or pencil at hand. Today I scanned and uploaded some sketches to my Flickr account.

P.S.: Just finished doing some blog maintenance:

deleted “Playground” category
created Processing and OpenFrameworks categories
deleted trackback spam
added links to my Blip.fm, FriendFeed and Twitter profiles
added Facebook blog network widget.

OpenFrameworks audio visualization

eduardo.omine — Fri, 26 Dec 2008 17:23:25 -0800

Passion Pit – Sleepyhead from eduardo omine on Vimeo.

—

After making some tests with Java OpenGL (JOGL) in Eclipse, I decided I should try OpenFrameworks again to delve deeper into OpenGL. The main problem with JOGL is that it’s a “layer” on top of the original OpenGL API; some things are different and often more complex in JOGL (for example the need to pass ByteBuffers instead of arrays).

This audio visualization is a simple exercise with FBOs, VBOs and shaders. An audio-reactive particle system (512 quads) is rendered to a FBO and applied as texture to a cube. This cube is then rendered to a second FBO, which is applied as texture to a second cube. There is a slight blur effect made with GLSL shaders. The stripes result from the way the cube was UV-mapped, an unexpected effect that turned out interesting.

At a 640×480 pixels resolution, framerate varies from 30 to 60 FPS in my computer, equipped with a GeForce 6200 (I need to upgrade my PC).

Happy 2009 to all! :-)

CubeMonster

eduardo.omine — Sun, 16 Nov 2008 16:28:52 -0800

CubeMonster from eduardo omine on Vimeo.

Just finished a simple Processing sketch for the Processing Monsters project by Lukas Vojir. He invited Processing developers to create and share (source code included) little black-and-white, mouse reactive monsters — there are some cool entries already, go check them out.

LG WOW

eduardo.omine — Wed, 29 Oct 2008 11:11:14 -0700

LG WOW is the latest website we developed at colmeia featuring Papervision3D, webcam interactivity, Flash Media Server streaming, and integration with a Django application using remoting (PyAMF). It is a product showcase for LG Electronics.

To enter the website, choose between webcam and keyboard modes. After the countdown, shout “wow” to the camera (or simply type it if you chose keyboard mode) and 3D particles will explode according to your voice loudness. The camera feed will be recorded to Flash Media Server, but it will only be published if you choose to do so later.

Navigate the website through the floating objects or the menu (at the top).
Check the Gallery (to watch other people’s reactions) and the Stats section too.

This website doesn’t push the boundaries of Flash and PV3D (we just used Planes with MovieMaterials), but I think we were still able to build something unique for the client.

Concept and product pages by Sinc (advertising agency).
PV3D design and development by Colmeia:

Design: Caio Sartori, Gustavo Sonoda.
Backend development: Eduardo Silva, Arthur Lima.
Flash development: Flavio Ensiki, Eduardo Omine, Edgar Akiyama.

I Am David Sparkle - Jaded Afghan

eduardo.omine — Wed, 08 Oct 2008 11:12:52 -0700

I Am David Sparkle – Jaded Afghan from eduardo omine on Vimeo.

—

After watching Moscow Olympics’ Second Trace video, Errol from KittyWu Records invited me to make a video for Singaporean band I Am David Sparkle.

Jaded Afghan is one of the best tracks on their 2007 album This Is The New and also a song well suited to my beat detection algorithm (based on this gamedev.net article — look for “frequency selected sound energy algorithm #2”).

Inspired by this thread (especially comments from Chris O’Shea and Dave Bollinger), this Processing sketch has two modes: capture and render. In capture mode, there’s audio playback, FFT analysis and beat detection — the resulting data is saved to a text file. In render mode, there’s no audio: all data is retrieved from the text file and PNG still frames are rendered. It took approximately 1h30 to render the 6779 frames for this video, at 800×450 pixels, 24FPS. The movie file with audio was assembled in Adobe Premiere.

It’s highly recommended to download the original 170MB Quicktime file — the link is at the bottom of the page, below “Statistics”. A Vimeo account is required, but it’s free.

—

Libraries and code snippets used in this project:

geomutils by Karsten Schmidt
_gl.pde from Robert Hodgin
Minim by Damien Di Fede
mouseWheel.pde by Marius Watz
OCD by Kristian Damkjer
Traer Physics by Jeffrey Traer

Nacionale

eduardo.omine — Mon, 15 Sep 2008 19:54:05 -0700

Nacionale is the online portfolio of Brazilian designer/illustrator Doug Alves. It’s a simple yet effective website that I built with AS3. He’s developing an interesting illustration style, go check it out.

Tantalus Quest at FILE 2008

eduardo.omine — Mon, 04 Aug 2008 22:03:57 -0700

Tantalus Quest is a game / installation that I developed at colmeia for FILE 2008, Brazil’s main electronic arts festival.

Game designer Fabiano Onça conceived the game, in which people must fill geometric shapes with their own silhouettes (as captured by webcams hanging from the ceiling):

Tantalus Quest at FILE 2008 from eduardo omine on Vimeo.

Software was built with OpenFrameworks, which is to C++ what Processing is to Java. A prototype was built with Flash (AS3), but it was slow — reading pixel values (BitmapData.getPixel) can be processor-heavy. Thanks to OpenFrameworks, porting the AS3 code to C++ was quite easy.

The application is very simple: the images captured by the cameras are brightened, blurred and thresholded, resulting in black blobs. The amount of blob pixels inside the geometric shape count as positive points and the pixels outside the geometric shape count as negative points.

This was my first project with computer art in a physical space — it’s something that I should explore further in my personal projects.

More pictures at Flickr.

Context Free

eduardo.omine — Sun, 06 Jul 2008 08:03:44 -0700

Finally managed to experiment with Context Free, a software that uses context-free grammar to generate images. Substitution rules define a grammar — it’s very simple but also very powerful; appropriate to explore the concepts of recursion and randomness.

More Context-Free images at Flickr

Fun with Canvas and Javascript

eduardo.omine — Thu, 03 Jul 2008 15:56:31 -0700

Caffeine Viewer is a proof-of-concept experiment we made at colmeia connecting our coffee machine to the internet using Arduino and Processing.

Using our office’s coffee consumption data (available through a public API), we made a few data visualizations — mine was made with Canvas and Javascript (with a little help from my favourite JS framework, Mootools).

One of the coolest things about Canvas is its ability to draw cubic bezier curves (Actionscript can only draw quadratic curves natively). To convert the logo outline from Adobe Illustrator to a collection of points in Javascript code I used SVG as transport format.

Every 100 milliseconds the screen is updated — each point of the logo is displaced by a random amount of noise that is proportional to the amount of coffee consumed during the selected period of time. Check its source code.

Caffeine Viewer – Jitter

Moscow Olympics: Second Trace

eduardo.omine — Sun, 22 Jun 2008 17:15:22 -0700

Moscow Olympics: Second Trace from eduardo omine on Vimeo.

—

This is my first music video; made with Processing + Ess library.

The song is Second Trace by Filipino band Moscow Olympics, from their recently released debut album Cut The World. Although the band’s musical references are clear (post-punk, shoegaze), their music has that ineffable quality that makes it stand out.

Pointillism

eduardo.omine — Sun, 08 Jun 2008 07:23:29 -0700

I’ve been posting some images I produced with Processing to my Flickr account. The latest batch is a series of pointillist pictures.

Animated Voronoi 2

eduardo.omine — Sun, 25 May 2008 11:29:56 -0700

View HD video at Vimeo.

—

It seems that computing a Voronoi diagram with mathematical accuracy for a real-time animation is not really feasible. I found this Processing hack that takes advantage of graphic acceleration to draw an approximate Voronoi diagram. It works by drawing 3D cones at the points of interest of the diagram and rendering a top view — the regions are drawn automatically as the Voronoi edges sit on the intersections between the cones.

Using this hack, it is possible to make a real-time Voronoi diagram animation, albeit with a limited number of points and a restricted applet area. This video was rendered with 364 particles (= sum of powers of 3 from 0 to 5).