Portfolio

Welcome to my online digital art portfolio. My name is Miguel Tjon-Kon-Fat and I’m currently living in the Netherlands. For more information about me or this website go to the About section. My portfolio features different type of projects. Most projects, however, are visual effects clips and thus consist of 3D renders of still images and animations. All 3D elements were created and rendered using Alias Maya. I used Adobe After Effects to composite everything together. Also a 2D motion graphics project done with Adobe After Effects is included in the portfolio. Some projects are Macromedia Flash MX 2004 applications and thus the interactivity was programmed using ActionScript 2.0. Finally the remaining projects are Web sites I’ve worked on for various small businesses. Have a look at some of the work I’ve done. Click on the accompanying images to view a high-resolution render of the still images, or in the case of animations to download the animation and for the Flash applications to download and execute the application. Click here to view a low-res demoreel of my work.

Pixie dust

This is my first visual effects shot using a photographed backplate. Magical pixie dust flies around through the scene and finally brings the computer-generated ball to life. It’s kinda like what you see in the Walt Disney intro animations or in TV series where you have witches and magic like Sabrina, the Teenage Witch and Charmed. The first thing I did was remove the warm yellow orangy color cast from the photo. I also adjusted the gamma to darken the image in order for the pixie dust, which is essentially a bunch of tiny points of light to be more clearly visible. This was done in good old Photoshop because the backplate was just a single photograph.

I then used the photo as a reference by importing it as an image plane in Maya and tried to match the perspective of the 3D scene in Maya to the perspective in the photograph. The next step was creating hold-out mattes for the table top, the carton cube-like thingy and the pyramid-like structure. These would serve to occlude the pixie dust and the ball as they move behind these objects, reflect light emitted from the pixie dust and receive shadows from the ball. This is crucial to making the CG elements look more integrated into the scene as this makes the CG elements interact with the real-life objects. The pixie dust, the light emitted by the pixie dust, the ball, both it’s shadows were rendered separately. The pixie dust was rendered using the hardware render buffer and the pixie dust light, the ball and both it’s shadows were software rendered. The live-action backplate and all the CG elements were then composited together and post-processed in Adobe After Effects.

The light emitted from the pixie dust was simulated using a point light attached to the same motion path used for the pixie dust emitter. The trick was setting up the expression for the light’s intensity. I used a noise function offset and scaled to give a nice range of values for randomizing the light’s intensity. I also used an inverted linstep function in the expression to make the light fade out over a certain amount of time after the emitter stops emitting particles into the scene.

As the pixie dust spirals around the ball, it somehow comes to life and starts bouncing around the scene. Finally the ball mysteriously changes properties and becomes more liquid-like and ends up as a puddle of jello on the table top. This was done by first modeling the target shapes the ball will morph into and then using those as morph targets by applying Maya’s blend shape deformer on the original ball.

Character dodging balls

This animation once again features our poly character as the lead actor. This time he’s ducking to avoid one ball and then barely jumping over the second ball as it passes by. While in mid air during the jump, time stands still and the camera rotates allowing us to see the action from a different angle. This was of course inspired by the “bullet time” shots made famous by the Matrix movies.

Polygon Character Rig

The character is very simple and light. It is built from polygon primitives. A poly sphere was used for the head and poly cylinders were used for the extremities and the character’s waist and chest. The hands and feet were built from poly cubes. As for the rigging, a simple skeleton was bound to the geometry. Inverse kinematics was used for the legs and arms. The feet have controls built into them for ball roll, toe roll, toe bend and the twisting of the leg. Here are some pose tests:

Character Jump

This is a simple animation of the character jumping up and down on the spot. The character’s shadow was rendered separately. A slight blur was added and the opacity was adjusted in Adobe After Effects. The character and it’s shadow were composited against a green background in Adobe After Effects.

Character Moonwalk

The same poly character was used for the moonwalk animation. Of course the character had to have a hat to be a smooth criminal just like Michael Jackson. The hat was modeled out of NURBS surfaces. No changes were made to the rig for this animation. The character, the character’s drop shadow, his reflection cast on the ground and the ground itself were all rendered separately and put together in Adobe After Effects.

Torus Tower

In this project the focus was on lighting a scene. I tried to keep the geometry as simple as possible. Using three-point lighting as a starting point, I tried to make the scene more interesting. By making the keylight cast shadows the objects are planted on the ground and do not appear to be floating in space. I also added a slight yellowish hue to the key light to warm up the scene. Fill lights were added to simulate bouncing light from the ground and the rings and rim lights were used to pop the objects off of the background. The forms of the objects are clearly visible because of the variation in shading caused by the lights. All of this together makes the scene feel much warmer and moodier than with just the boring and flat default lighting. Click on the image for a higher resolution render.

Lotus Art & Dance intro animation

For the Lotus Art & Dance website which features belly dance video clips, an intro animation was required. The design and implementation of the website was already in place so the animation had to be designed based on the website’s color palette, fonts and graphics to fit in with the overall theme. Just by looking at the Lotus text the L screamed for a write on effect. The L basically consisted of three separate strokes, so they had to be split up in Photoshop. Once split up each individual stroke was animated in After Effects using the Paint effect’s Write On option for the stroke’s duration. The clouds background image was slowly animated to give the illusion of the clouds moving. The Egyptian hieroglyphic symbols which are used throughout the website were added to the background and animated to add more interest to the background. Finally the image of the lotus flower and the text “Art & Dance” pop on and float around for the user to read.

Celsius Fahrenheit Temperature Converter

The Celsius Fahrenheit temperature converter was my first attempt at using ActionScript 2.0. The conversion from Celsius to Fahrenheit and vice versa was the easy part. Getting the thermometer to update based on the temperature input by the user was a little trickier. By setting the center point of the thermometer “mercury” appropriately in it’s coordinate space I was able to get the scaling to work correctly. More important was getting the “mercury” to scale between 0 and 100 but displaying a scale between -15 and 40 on the Celsius scale and between 5 and 104 on the Fahrenheit scale. The lessons learnt from this might come in handy when doing effects animation. I also wanted to experiment with procedural animation in Flash by doing a simple animation of both the text Fahrenheit and Celsius at the bottom by incrementing or decrementing their x coordinate over time.

Color Translator

The color translator was totally inspired by Maya’s Instancer. The concept of a symbol in Flash is kind off like instancing in Maya. The pattern of color swatches on the main stage is generated randomly each time the user goes to the main stage. The number of swatches, the color of the swatches, the position and the scale of the swatches are all generated randomly. Does this sound familiar to Maya users who have used the Instancer? By clicking on the Teach button the application teaches the user the translation of the colors and by clicking on the Test button the application tests the user’s knowledge of the color translations. I also wanted to make this application as flexible as possible. The language and the translation of the colors are all read from an external text file. By changing the contents of this text file the application can easily be modified to teach translating colors in different languages.

Websites

These are some of the websites I’ve worked on:

• Ray's Hair Care Cosmetics I did the Flash intro animation, all the html/css, image editing, Flash music player. The colors and logo were NOT designed by me
• Scott International I did all the html/css, image editing. I did not do the Flash intro animation, the colors and logo were NOT designed by me