Yellowtail

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 (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.

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

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.

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.

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.

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.

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.

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 look.