Light Runner Logo

Logo made for Khan Academy user Light Runner.
Logo made for Khan Academy user Light Runner.

Animated logo requested by Khan Academy user Light Runner, featuring translated Bézier curves, a simple trick to outline composite shapes, and a sinusoidal algorithm for the natural motion of running.

Updated

Programming Language

Typeface Used

Light Runner Logo

Bézier curves make up the arms and legs of this ever-running stick figure. To one who has never coded Bézier curves (which, incidentally, make up every single path of graphics you would make in programs such as Illustrator), the numbers can look pretty daunting.

// Left Arm
bezier(0, 0, -65, -40, -75, 10, -105, 40);

// Right Arm
bezier(0, 0, 45, 50, 55, 10, 105, -20);

The first two parameters represent the coordinates of the starting point of the curve. In the same way, the last two parameters make up the coordinates of the end point. The two sets of x-y coordinates in between make up the control points.

Note that both the curves that make up the arms start at (0, 0). This is where the two arms meet together on our stick figure runner. But wait, you say. That doesn’t look like the origin.

That’s because I translated both curves to be in that spot. That way, I can rotate the arms around that point – if the curve did not start at the origin, it would appear to rotate around some ambiguous point. Probably not what you want (unless you’re going Rayman-style):

So the arms are just static Bézier curves rotating around a point. What about the legs? If you look closely, the curves of the legs are changing. In fact, they’re morphing back and forth, between the same two states.

Here’s the code for the two Bézier curves that each leg is morphing between:

// Left Leg
bezier(-30, 50, -50, 80, -59, 100, -130, 120);

// Right Leg
bezier(-30, 50, 20, 60, 57, 60, 0, 130);

For both of the legs, three of the points change. This means that six coordinates of one curve change to be the corresponding coordinates of the other, then back again.

This was a surprisingly easy effect, which I accomplished by adding a sine wave that takes a fraction of frameCount as its angle parameter. frameCount counts the number of frames that have passed since the start of the program, and increases by 1 each frame. As a result, the sine ratio changes, bobbing higher and lower with a nice easing as it reaches its minima and maxima. By adding or subtracting a sinusoid to each of the six coordinates, adjusting its sinusoidal axis and changing its amplitude to be the difference between the corresponding values, we can achieve this back and forth effect that appears natural and non-robotic.

You can see this easing effect in almost every other aspect of the animation: bobbing the body of the runner up and down, changing the angle of the arms, and even waving the text back and forth in the background. Of course, it’s not the most perfect model for the motion of running, but it does the job without needing lots of variables to keep track of speed and acceleration.

Stroking Strokes

How did I get the stick figure to have a running outline all around? First of all, as you saw before, I used multiple shapes to draw different parts of the stick figure. Second, in Processing.js, you can’t stroke a stroked figure like bezier() in the first place!

The trick is really simple – put all the shape drawing code into a function. All shapes must be stroked shapes, in this case line()s, bezier()s, and point()s.

Then, call the function twice. Before each function call, change the stroke color and stroke weight with stroke() and strokeWeight()!

stroke(204, 167, 0);
strokeWeight(40);
runner(0, 0);
stroke(243, 245, 171);
strokeWeight(30);
runner(0, 0);

Beats drawing custom filled shapes and having to stroke them!

My runner() function already takes two parameters for the x and y position. For ease of use, I called strokeWeight() from within the runner() function and allowed a third parameter to pass it in.

stroke(204, 167, 0);
runner(0, 0, 40);
stroke(243, 245, 171);
runner(0, 0, 30);
By | 2016-10-14T16:10:23+00:00 July 4th, 2016|4 Comments

About the Author:

Darryl Yeo is a young programmer, web developer, computer graphics artist, musician, and composer who hopes to inspire others through his projects and inventions. Read more about Darryl.

4 Comments

  1. Vian Miranda March 5, 2015 at 3:16 pm - Reply

    Cool! I voted up! My profile is at: https://www.khanacademy.org/profile/vianmiranda23/

  2. Isaac Essendrop March 14, 2015 at 7:19 am - Reply

    I don’t know how you do it but your awesome.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Go to Top