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.
The following details my process in recreating my version of Yellowtail from scratch.
Simple User Interaction
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.
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.
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.
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.
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.