One of my New Year’s resolutions for 2017 is to do more creative projects.

I love generating art with code. As a software engineer who has always loved to draw, paint, and create, it’s one of my favorite ways to be creative. One of the most inspirational pieces I came across early on online was Golan Levin’s “Yellowtail” on his site flong.com. I loved the simple style and playful interactions.

yellowtail

Yellowtail (1998-2010: Golan Levin) is an interactive software system for the gestural creation and performance of real-time abstract animation. Yellowtail repeats a user’s strokes end-over-end, enabling simultaneous specification of a line’s shape and quality of movement. Each line repeats according to its own period, producing an ever-changing and responsive display of lively, worm-like textures.

Yellowtail - Interactive Art by Golan Levin and Collaborators

I decided that I wanted to use Levin’s Yellowtail as inspiration for my first project of the year. I would recreate it using javascript, a scripting language that works in any modern web browser including mobile devices.

The following details my process in recreating my version of Yellowtail from scratch.

Simple User Interaction

000

The first thing I did was set up a canvas in javascript, capture the movement of the user’s mouse (or finger gestures) and draw dots on the screen.

Version 0 (Source)

Tail Objects

Instead of just drawing dots on a screen, we needed to create individual tails. A new tail is created when a user presses down on the mouse button, a trail of points is recorded as the mouse moves, and the tail is saved when the mouse button is released.

Using this data we can now draw lines to represent each tail.

001 Version 1 (Source)

Animation

Now that we have our tails and data recorded for each one. We can begin to animate them. To animate a tail, we take the last recorded point and move it to the front of the line. This gives it the effect of animating away from the mouse. We then redraw the line with the updated points, giving us the basic form of the yellowtail effect.

002 Version 2 (Source)

Looping Tails

As you can see in version 2, once a tail moves off-screen we never see it again. In Levin’s version each tail will come back on screen as it leaves. If it goes off-screen on the right it will appear on the left, etc. We achieve this by checking each point in a tail. If all of the points are off-screen in a direction we subtract the size of the screen so that it appears to loop back in to view.

003 Version 3 (Source)

A Bit Of Style

We have the basis of our functionality but need to start working on visuals. Instead of thin white lines, I started incorporating color in to our tails. I also added a “pause” functionality which you can invoke by pressing the space bar.

004 Version 4 (Source)

Taking Shape

What gives each Yellowtail its worm-like texture is the variability in shape. Levin’s yellowtail’s thickness is dependent on how quickly one draws a shape. Drawing faster will create a thinner, quicker tail. Drawing slowly will create a slower and fatter shape. Each shape tapers off to a point at the end.

In my version I take a simple approach and use a sine wave to create the tapered .ooks.

005 Version 5 (Source)

Sound Improvement

Although number 5 is a complete version of what I was trying to achieve, I couldn’t help but continue to play around and create 2 more versions.

Version 6 adds in some basic sound as you draw. The frequency or tone is based on how high or low you are drawing on screen.

Version 7 takes it a step further and adds a “string” in the center. When a tail passes over the string it will vibrate and play a note.

[Back to Top]