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:

- The red blob logo is \(r = 5 + \sin(5\theta)\).
- The mouth can be drawn with my face generator.
- 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:

- It's not vertically centered.
- 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 +\).

- Calculate the unaltered shape.
- For a
*circle*: multiply by radius to fit - 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)

flex =

size = line =

bri =

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.