Creative Coding Term 1 Final Project

Introduction

In my project I am presenting three different animation sources. 

The first is a circular sine wave depiction that grows and shrinks over time, using the sine function to control that growth and give the illusion of an outward or inward wave pulse depending on whether the number of tiles is increasing or decreasing. The tile colouring is produced by an interpolation between colours based on their distance from the centre.

The second is an illustration of a perlin noise field, using interpolation and lava-like colours to give the illusion of a lava liquid surface.

The third is an attempt at an optical illusion using the shape that we will project onto as the basis for the surface illusion effect. The idea is to create a number of floating platforms that move up and down giving the illusion of three dimensions despite consisting only of two dimensional shapes and surfaces.

Concept and Background Research

I was very conscious when approaching the project that I wished to make use of the shapes we were going to be projecting onto, the squares were going to be the primary driver of my animations. As such I tried to distictually engage with the objects surface, breaking them up into the perceived cubes in one, faking depth in another, and having the third animation snake over and pass between the surfaces and fbos.

I didn’t have any specific inspiration I was trying to emulate or work from, but looking back I can see the influence of an artist such as Carsten Nicolai and the design of the disco movement in the early 80s in my circular wave piece. And for the other two, early 3D video game graphics definitely bleed into the look.

Technical Implementation

Sine and Sine’s Ability


I had some difficulty initially with the growing grid of tiles as they would grow from the top left of the fbo and leave a black bar. I managed to solve this when moving the origin to the centre of the screen and translating everything accordingly. The use of abs(sin) keeps everything in sync so the waves seem to flow from one cube to another.

The circles were left offset as it gives a lovely effect when they overlap rather than just being circles inside rectangular tiles.

Pump Action


I wanted to give the illusion of depth into the cubes with one of my scenes. Which had minor success with the floating platforms. I tried to create an effect to suggest “floating” a little more, but I found it very difficult to work out the angles properly to form the illusion underneath.

(left is an illustration of how the side simulates the look of half a square at 45 degrees. The top is a rectangle that grows and shrinks from the corner at the same rate)

Brief Lava Fair


(Left is a still while using the FindContours method)

With the lava object I had initially used an edited version of the openCV FindContours() method. However, as I was doing a simple threshold for noise, I changed to using an ofImage object, going through the pixel values and using that to create thresholds for blobs and lerp values for colours.

Reflection and Future Development

I struggled with coming up with successful ideas that made use of the shapes that we had chosen. I had wanted to create a source that would give the illusion of passing along a vine or a worm or some similar animation to give the sense of surface.

The bouncing platform was a victim of this as I really wanted to make a 3Dish solution work but was unable to get it properly going.

The lava object could be used as a template to have a look at using contours taken through the measurement of the pixel value of the noise, and then rotating that to create a sense of depth, which had been my original idea, but I had trouble while I was initially working with the FindContours method. This object is also very slow, so adding more images may not make a watchable experience.

I was pleased with how the circular wave scene turned out, lots of good colours and an expandable template for the future.

References
Nicolai, Carsten. 2022. “Carsten Nicolai”. Carstennicolai.De. https://carstennicolai.de/.

Categories: Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s