I have been messing around a bit with HTML5 Canvas lately, trying to see what all the hub-bub was about. I must say, it is pretty neat and Javascript (V8) runs quite fast on Google Chrome. V8 is not as fast as native code generated from C/C++, but it is also not as slow as many scripting languages like Lua or Gamemonkey.

My first test while learning HTML5 was to produce a retro underwater visualizer. I was heavily inspired by the beautiful aesthetic of aquariums and wanted to capture its 8-bit nature. The art assets were taken from my game. You can flick/move the screen with your mouse and the camera moves with physically modeled momentum. This visual has been tested on Firefox 5, Safari iOS 5.0, Google Chrome, Opera 11.

This project took me about half a week to create. Most of the art assets were made by Mike Hussinger.

[ View Here (HTML5) ]

It is currently being shown in the Startle Reaction exhibit and will last from October 2011 to January 2012.

The site says:

The exhibition will feature new commissions alongside significant works from the past decade, including Misshapen Pearl (2003), a wistful investigation of the streetlamp’s function in consumer society. Skipping Over Damaged Areas (2010) shows a series of film titles narrated by a voice-over artist, creating a new and unexpected narrative from the appropriated footage.

Below is a short video of the visualizer in action:

The beat shatters the sphere and ripples the vertices in hues of magenta and cyan. Fragments on screen become audio-reactive and dance to the wonderful music of Rei Harakami.

This new visualizer was developed in my own personal 3d engine. It is coded in C++ and uses OpenGL for the graphics. The fmod sound library provides FFT spectrum data of the song. I enable certain elements of the visualizer to react to the frequencies which causes it all to dance wonderfully.

It’s been over a month now since I’ve started working as a programmer at Q-Games. And indeed, it has been very exciting, satisfying and educational. I am currently stationed on the PixelJunk team, doing mostly graphics for the upcoming PS3 title, PixelJunk LifeLike.

It’s hard to describe what Lifelike really is. Baiyon, the musician and visual designer of the title, described Lifelike as an “amoeba of life, reacting to your music”. I would not consider it a “game” in the traditional sense of the word — it’s more like an organic musical instrument that grows and responds visually to the sound. But regardless of what genre you want to place it in, Lifelike is one badass title.

I wanted to spread the word and announce that LifeLike was voted 1up’s Most Innovate Game in E3! Very exciting news indeed! Below is a recording of the game in action at an E3 press conference:

Above is a short video that I captured during my first week in Kyoto, Japan. The footage was recorded using my Nikon D90 with a 50mm lens. Enjoy!

Yesterday, I landed in Japan to embark on my new life as a programmer for Q-Games, an independent video game studio located at the heart of Kyoto, Japan.  Q-Games is perhaps best known in the states for their Pixeljunk series of games (such as Eden, Monsters, Shooter) on PlayStation 3′s PSN platform.

Kyoto is indeed a beautiful city. It is alive with the wonderful colors from the spring season’s bloom of cherry blossoms. As the former ancient capital of Japan (before it was changed to Tokyo), Kyoto is a exquisite blend between ancient Japanese heritage and modern digital life.

I am extremely excited to be in the game industry. And to be part of the famous Q-Games studio is truly a dream come true. Nevertheless, I will keep you all up to date on my endeavors. Cheers!

Two of my digital arts pieces were recently accepted to be shown at GAFFTA (Gray Area Foundation for the Arts), an interactive digital arts exhibit located in San Francisco. The specific exhibition that my work will be shown in is called TRANSMUTATIONS and is being produced by sonicSENSE and GAFFTA.

The website states: “TRANSMUTATIONS builds upon an electronic information ecology framework consisting of a complex series of sound sculptures, machines, video projections and sensors that employ viewers’ reactions as one of the interface systems.”

The grand opening of the exhibit is on March 26, 2011 at San Francisco. The specifics of the venue are:

• Date: March 26, 2011
• Time: 7pm -12am
• 998 Market Street @ Taylor St
  San Francisco, CA 94102

The exhibition will show several interactive works as well as pure visualizers. My two pieces that were accepted are both purely visualizers. Both of them are coded in C++ using the Cinder library.

Black Star

I’ve always been fascinated by the beauty of space. This piece, which I titled “Black Star” draws inspiration from two concepts: the black hole and the neutron star. The black hole’s gravity is so intense that not even light can escape. Its gravity absorbs nearby matter, causing the system to be perturbed from its dynamical equilibrium. The system must apply restoration force which causes the system to oscillate back and forth as it endeavors to reach an equilibrium state.

Digital Star

Digital Star is a stylized abstraction of a star undergoing nuclear fusion. Fusion reactions power the stars and produces all natural elements in the world, including the elements that make up the human body.

A picture I took a few months back when I used to live in Plano, Texas.

As I wait patiently for work to begin, I’ve been noodling around with 3D visuals. I have always been intrigued by the beauty of space, so I tried to model a scene based on my conception of a neutron star. The video above shows a pulsating neutron star that glows brighter as it grows.

All the art assets in the simulation are procedurally generated. The light rays are rendered by sampling a 2D Perlin noise function. The function uses the angle and time as the 2D parameters to get the height of the ray. The time parameter causes the light rays to animate naturally. The motion of the torus is generated by rotating the object by its x and y-axis.

The visualization is programmed in C++ using the Cinder library. Music by Newton Faulkner.

[ Download | Screenshot ]

Lately, I’ve been mega-engulfed in simulating flocking behavior using the Boids algorithm. I’ve implemented it before, but this time, I wanted to take it to the next level by adding a trailing ribbon system that caches the previous positions of the boids and renders them out as connected line segments.

The positioning of the boids not only follow traditional flocking rules (separation, alignment, cohesion) but are also influenced by pseudo-random vectors provided by a 3D Perlin noise function. Adding Perlin noise gives the boids real-life “emergent” behavior as they swarm and swirl in random directions. The boids also have a tendency to lean towards the origin so that the boid simulation stays confined within a volume.

The cool blue geometry in the center is simply a triangle fan (GL_TRIANGLE_FAN) that uses the positions of the boids as its vertices. The vertices are offset by the center of the boids so that the object continually stays in the origin of the 3D system.

The camera is implemented using a mass-spring physics system. I wanted the camera to continuously follow the boids and point towards its center. However, I didn’t want the camera to move around erratically and make the viewer nauseous. Adding this mass-spring system allowed for smooth camera movement while following the flocking system nicely.

The simulation was coded in C++ using the awesome Cinder library. Music by Toe.

[ Download (.exe) ]