Infinity Runner Logo

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

Animated logo requested by Khan Academy user Infinity Runner, featuring a sinusoid, a parametric equation, and repeating modulus rainbows! Featured in games such as BLOCK and Domino Brainer, this logo was even made into a custom T-shirt!

Updated

Programming Language

Infinity Runner Logo

A logo for a user named “Infinity Runner” would need to have something with an infinity symbol. And how better to do that than with a parametric equation!

x = 200 + cos(a * 15) * 160
y = 200 + sin(a * 2 * 15) * 40

// Use HSB colors
colorMode(HSB);

// Parametric equation - angle range is 0° ≤ a ≤ 360°, step 6.1°
for(var a = 0; a < 360; a += 6.1){
    // Set HSB fill color - use a different hue based on the angle
    fill(((a + 160) * 200/360) % 255, 255, 255);
    // Draw an ellipse using the parametric equation for the position and a single sinusoid equation for varying the size
    ellipse(200 + cos(a * 15) * 160, 200 + sin(a * 2 * 15) * 40, sin(a / 15) * 20 + 3, sin(a / 15) * 20 + 3);
}

To vary the size of the ellipses, I used the angle to make a sinusoid model. Note how it is repeated twice in the ellipse() call to account for both width and height.

sin(a / 15) * 20 + 3)

The angle range of the parametric equation goes from 0 to 360 degrees. The To achieve the rainbow color effect, I used the angle, represented by the variable a. In an HSB (hue-saturation-brightness) color, hue values go from 0 to 255. We make transformations to the angle value, to fit 4 cycles of color and add an offset.

(a + 160) * 200/360

We then use the modulus operator (%) – that is, we take the remainder of whatever’s to the left of the % divided by whatever’s to the right. This ensures the hue parameter of the fill command does not go above 255, but instead wraps back around to restart the color cycle.

((a + 160) * 200/360) % 255

Infinity Runner put his logo to good use, featuring it in many of his programs, including BLOCK and Domino Brainer. In his games, I noticed some resemblance to elements I used in the user interface of Transcolors 2.0, which I thought was really neat.

I have been told that he may or may not have made his own T-shirt featuring the logo I made him…



I was looking back into the code for this logo one day, and modified it to become animated within about thirty seconds. I think he was pleasantly surprised to find out about it.

Really, it was as simple as making new angle variables (a1 and a2) that increased the a by a fraction of frameCount. frameCount counts the number of frames that have passed since the start of the program, and increases by 1 each frame.

for(var a = 0; a < 360; a += 6.1){
    var a1 = (a + frameCount / 10) % 360;
    fill(((a1 + 160) * 200/360) % 255, 255, 255);
    var a2 = (a + frameCount / 15) % 360;
    ellipse(200 + cos(a2 * 15) * 160, 200 + sin(a2 * 2 * 15) * 40, sin(a2 / 15) * 20 + 3, sin(a2 / 15) * 20 + 3);
}

As a future project, the “I” and “R” on the logo might make for a good MyFont by expanding the character set.

By | 2016-10-14T16:06:02+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. Daniel Ohanessian March 5, 2015 at 11:50 am - Reply

    This is so cool. It’s me, Infinity Runner. That’s my real name there, Daniel Ohanessian.

    BTW, how did you get my shirt on Pinterest? LOL

    • Darryl Yeo March 5, 2015 at 12:06 pm - Reply

      Thanks, Daniel! Nice to meet you!

      What’s this about Pinterest?

  2. Isaac Essendrop March 13, 2015 at 6:45 pm - Reply

    cool I love it. btw I’m here.

Leave A Comment

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

Go to Top