Red Blob logo generator

As Twitter and Github and some other sites have switched from square icons to circle icons, I needed to update my logo to fit. I had cropped the previous one, but I decided I should generate new ones from scratch. The main ingredients:

1. The red blob logo is \(r = 5 + \sin(5\theta)\).
2. The mouth can be drawn with my face generator.
3. The eyes will have to be drawn separately, as my face generator uses circles and my logo uses tall ellipses.

 1  Circular frame#

I need to figure out how to size and position the blob so that it fits inside a circle. Since the blob shape is based on polar coordinates, it fits quite nicely!

I had thought it wouldn't. Why? It's because when I tried using my square logo on the sites with circle frames, it didn't fit. I assumed it was because of the circle. However, it was actually because I had previously adjusted the logo to fit in a square.

 2  Square frame#

The logo doesn't fit properly in a square.

There are two problems:

1. It's not vertically centered.
2. It's not as large as it could be.

The blob is centered at 0,0 but because its feet are out at an angle and the head is not, the extent of y values is not centered at 0. The hands are also at an angle so the extent of x values doesn't fill the box.

To find the extent (min/max) analytically, I could take \(r = 5 + \sin(5\theta)\), calculate the coordinates \(x = r \cos(theta), y = r \sin(\theta)\), and then calculate min/max from the derivative of \(x\) and \(y\) with respect to \(\theta\).

Instead of calculating the dimensions analytically, I calculated them in numerically. For a box with range -100:+100, the blob's x range is -96:+96 and y range is -100:+85. That means I can lower the center by (100-85)/200, or 7.5%, and increase the blob's radius by 200/max(96+96, 100+85), or 4.1%. I also need to decrease the blob's radius by the line width. Let's try it:

Looks much better positioned than before!

However I think it's better to stretch the logo a little bit:

 3  Generators#

Oops, the formula I've been using on my site is actually \(5.88 +\) instead of \(5 +\).

1. Calculate the unaltered shape.
2. For a circle: multiply by radius to fit
3. For a square: stretch, then adjust y position and size to fit
   • autostretch: (ymax - ymin) / (xmax - xmin)
   • y += (ymax + ymin) / 2
   • y *= autostretch
   • size *= (side - linewidth) / max(ymax - ymin, xmax - xmin)

I used this to generate new icons for Safari, Github, Twitter, etc.

 4  Inventory#

These are some of my generated logos. I want to see how they look against different backgrounds.

{{filename}}