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.
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
Then, call the function twice. Before each function call, change the stroke color and stroke weight with
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!
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);