Memory Game

Jani | 2010-11-26 | CSS3, HTML5 | 2 Comments

First of all, I’m mainly a web designer, but I was curious about all the buzz surrounding HTML5 and CSS3 so I decided to do a little project.

In this project I made the classic memory game where you have to turn cards and find pairs. The purpose of this project was to test out the basic HTML5 layout with the built in audio tag and some nifty animations with transition in CSS3. Therefore the game only works with modern webkit browsers like Safari and Chrome.

Read more »


WaterFX – a much faster solution

Andreas | 2010-11-22 | Flash | 1 Comment

Yes, the previous water effect I introduced is nice, sure, but it is actually pretty useless as it is eats up way too much processor power. As I still need a fancy effect for my little game I’m planning I had to come up with something else. Simulate water/light distortion IS not an easy task when it comes to processor power but here is an attempt for 800×600. Let’s first check the result:

WaterFX-2

Neat huh? Let’s dig into the code…
Read more »


SmokeFX – An experiment with Bezier Curves

Andreas | 2010-08-26 | Flash, Tutorial | 3 Comments

Since the dawn of the computer people has always created colourful art using curves. Either they have moved around on the screen or just being drawn with small adjustments creating mesmerizing patterns.
Being inspired by the latest PS3 boot menu I decided to create a nice looking (and dynamic) effect using Bezier curves. Here’s the treat:
ColourCurves

Read more »

Tags: , , , , , , ,


Realistic water – Showing off DisplacementMapFilter

Andreas | 2010-07-15 | Flash | 3 Comments

Water
Try moving the mouse over the water and maybe click a few times?

Been playing around with a small idea of a game and for this particular game I would like to have a great top-down watereffect to give a smooth, calm overall feeling.
Read more »

Tags: , , , ,


Auto generated branches

Andreas | 2010-04-28 | Flash, Tutorial | 2 Comments

I want to create a nice 3D-effect with branches growing, flowing and rotating around each other. Just to make sure that my idea is working I decided just to create a proof of concept in 2D. With a few tweaks with the parameters it turned out to be some pretty nice organic trees/bushes.

Trees

I’ll go through the code and explain what it does.
Read more »


ViewportLayers – In depth (Papervision3D)

Andreas | 2010-04-21 | Flash, Tutorial | 14 Comments

The more I see where people get stuck, using PV3D, the more I feel the need to create a good tutorial regarding ViewportLayers.
Lets start with the simple task of NOT using any layers. First the document class that just adds our BasicView.
Read more »


Particle system #1 – Basic particles

Andreas | 2010-04-19 | Flash, Tutorial | 15 Comments

As I am coming from a background of gameprogramming (and originally from the demo scene in the 90´s) am I very fond of small tips and tricks to create nice special effects. There are few project that I see out there that couldn’t be spiced up with a nice particle system so I decided to go through some basics of particle systems and how they can be used to create a variety of effects. In this first “chapter” I will just go through the basics of a system and how it works and then later on create a more flexible system that can be used in oh so many situations.

Now lets look at what we will create today:

Facewarp

Neat right? Let’s dive into the universe of particles…
Read more »


FaceWarp – mess up your face.

Andreas | 2010-04-16 | Flash | 0 Comments

So we’ve probably all seen it somehow. Upload an image of yourself, transform it and then spread it around to your friends.

Here I tried one technique I came up with, using a polygonmesh (using Papervision3D but still keeping it plain without any Z-depth). Using this wired image I can easily string up every vertex in the mesh and move them around, controlling every and each muscle in the face if I want to. For this demo I have two controllers for the eyebrows and lips.
To add some nice extra effect the sliders also control two bitmaplayers alpha. The bitmaps are just wrinkles and dark rings around the eye which is transformed via the UWV so it fits to every image you upload, just move the crosshairs to the center of the eyes and the corners of the mouth.

Enjoy.

Facewarp


Firebird – a sound visualization

Andreas | 2010-01-22 | Flash | 3 Comments

The other day I stumbled upon a minimalistic music video by Peter Gabriel called Der Rhythmus der Hitze. As I’ve never had the chance to experiment with the Spectrum-functionality in AS3 I thought this would be a perfect first example as I found the birdlike visuals were quite nice and mesmerizing. Here’s the result.

Firebird

Read more »

Tags: , , , , ,