At first, there was the idea to use metaballs for the creatures, we wanted to give this jelly surfaces some wobbling/round forms. After some testing we decided not to, as i did not see any advantage specially in performace,  so we went with a more “traditional” method.  The creatures were generated from 2 steps. The body and the head.

The body: Create a skeleton line and generate a deforming cylindrical body from the line. After some time and tweaking the body right. After just had to start playing with values to get the animation going. Some trig + using creature’s motion parameters worked just fine, we got it right, but, there was still a problem, the creature’s heads. The head: Well i tried different methods, interpolating the body’s end with some spherical shape wish ease on, but it did not work out. The head textures just didn’t look good, “pinched” as Jody said several times.  We ended up creating the head as a second step, building an hemisphere and then “attaching”  it to the body’s end. Good news is later on, it came handy, as it made things alot easier to map the head’s texture. Some things just come handy sometimes. I had to tweak a bit to get the head and body animation get along, but in the end it turned out to look pretty good.

As for the lighting side, a kind of “ambient light” + phong lighting + cubemap reflections made it to the final version.

This is an awesome project and i really enjoyed working with the team. As said before this should not be a closed project, it was projected to live and change so it can fit other ambients, so expect to see more from the *mighty* Grazing Jellies.

Some videos on the development blog.

Full article on the festival @ Wired.

The technique used is called ‘off-axis frustum’ a.k.a the “right way”, courtesy of Paul Bourke. If you want to read more about it you should pay a visit to his website.

2 images are rendered from 2 different point of views, creating two images with some little differences between them. The off-axis frustum means the point of view might not lie on the perpendicular line to the ‘view-area’.  These 2 images are then sent to a simple shader that takes the R channel from the left-eye buffer, the GB channels from the right-eye buffer and then mixes it into a single stereo image. This is the color glasses compositing method, but it sure is possible to just send both images down the two adapters of your videocard and get the same 3d feeling (with colors) using an Head-Mounted Display or a multi-projector system of some kind.

Source code available here.

You will need ‘Vitamin’ library. Just copy it to processing’s libraries folder as usual, and then run the project.

based on md5 reader

track: NNY – bdybag.

Anyway, i just took those videos and i have uploaded some of my favourites to vimeo’s account. I believe it’s a good place to keep record of some of the oldies, so check it out if you’re in the mood.

get class here

( this is the updated version of the effect. new scene with more growing things )

I took option 2 and made an example in processing. It uses my own library, Vitamin. Its in the zipfile, make sure it is in the right place.

Download: http://www.pixelnerve.com/downloads/processing/intersectRaySphere.zip

Explanation:
First i already had my mouse position in 3D. Just had to convert it to world-space and put it in  the magic function that would tell me if the ray has hit anything, in this case a sphere. Magic function below:

// This function is part of the VRay class.
// Takes a point and a radius and returns number of hits
int intersectRaySphereHits( Vector3 center, float radius )
{
  // Solve quadratic equation
  float a = _direction.lengthSqr();
  if (a == 0.0)  return 0;
  float b = 2.0f * (_point.dot(_direction) - _direction.dot(center));
  Vector3 tempDiff = Vector3.sub( center, _point );
  float c = tempDiff.lengthSqr() - (radius*radius);
  float disc = b * b - 4 * a * c;
  if( disc < 0.0f )
    return 0;
  int numIntersections;
  if (disc == 0.0f)
    numIntersections = 1;
  else
    numIntersections = 2;
 
  return numIntersections;
}