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.

Daniel OhanessianMarch 5, 2015 at 11:50 amThis 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 YeoMarch 5, 2015 at 12:06 pmThanks, Daniel! Nice to meet you!

What’s this about Pinterest?

Isaac EssendropMarch 13, 2015 at 6:45 pmcool I love it. btw I’m here.

Darryl YeoMarch 13, 2015 at 6:46 pmThanks!