Learning Baseic Codeing Language

We started the class by learning some basic coding concepts in Processing, such as setting up the environment, looping parts of code, changing the frame refresh frequency, and so on. These skills will make our attempts at problem-solving much easier later on during our exploration throughout the class.

1st - Electrical Waves

Interactive Waves

I found art pieces by Desmond Paul Henry, who used interesting lines to compose ordered and eye-catching interactive graphic projects. Inspired by his work, I first attempted to create pane waves in a 3D environment. Then, I added movement in a regulated rhythm to make the visuals more interesting. Changing the perspective added a sense of space to the piece. I also played with color and interactions, making the cursor behave like a highlighter that widens the wave angles.

3D Trefoil Knot

For this project, I applied the same design style but added lines in a 3D form. I began with a slightly twisted sphere, but after several tries, I found it would be more interesting to use an infinite object, the loop of waves could be built with endless strings this way. I chose a trefoil knot because it is both an interesting form, an endless loop, and I could make it into a 3D object.

To make it interactive, I first added wave animations to the loop, emphasizing the loop through the animation. Then, I made the loops accelerate, and light up as it's electrical when the cursor hovered over the shape. 

However, I noticed that it did not react when hovering over the outer part of the trefoil knot. After consulting with Karsten, we fixed the problem by projecting the object onto a 2D plane, allowing the 3D object to react correctly to the cursor's location.

2nd - Dancing Particles Rose

I tried to explore sound integration to make the projects more engaging and enjoyable.

Dancing Particles - Blooming Rose

Here, I first created a particle-based rose where the space between points expands, which looks like a explosion and blooming flower, the color also transitions from blue to neon red as the cursor approaches the object, mimicking the blooming of a rose. Simultaneously, the music volume increases as the rose blooms.

Minim Implementation - Dancing Circle

I implemented the Minim plugin to identify the audio amplitude, causing the form to enlarge and shrink accordingly. I created a test version featuring overlapping circles based on a Minim example, where the size of the circles is determined by the audio file's amplitude linked to the project.

Final

With the help of my friend (shout out to Jean-Pierre), I successfully implemented this function and created a jumping particle flower with amplitude-sensitive visual effects (volume also turn up and down according to the distance of the cursor) :

3rd - Dynamic Bubble Typer

I came across a video by MIT Creative Lab promoting the iconic creative thinker and designer Mariel Cooper. This inspired me to develop a functional project, so I designed a dynamic bubble typer (news ticker). This Dynaimic Bubble Typer allows users to type in texts, and the ticker (screen) displays what they keyed in with an interesting dynamic bubble visual effect.

Dynamic Bubble Visualisation

First, I created the dynamic bubble visual effect, where the circles move organically and interact with each other.

Typer + Ticker

Then, I developed the typer that detects input from the keyboard and displays it on the screen.

Dynamic Bubble Typer

To achieve the bubble visual effect on the typewriter ticker, I output the typewriter's word strings into an image and input it back into the bubble program, allowing it to project the image through bubbles on the screen.

Changing the font type improves the bubble visualization, especially when using a thicker font compared to a relatively thinner one.

By outputting smaller font sizes and projecting them larger on the bubbles, the bubbles appear more dynamic because the outline of the font becomes pixelated.

Here is the final visualization: