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:
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)
size = line = bri =
I used this to generate new icons for Safari, Github, Twitter, etc.