By Ben Nitkin on
This is a personal site, for logging the various projects and such that I do. Since it came online last month, I've been working to brand the site to bring it away from default Drupal. Creating a theme helped, but I'm still using default icons. I want some sort of logo to identify things I make as my work, but I'm not sure what. In short: branding a site takes time.
In the meantime, I wrote a short Processing sketch to generate a cool looking favicon, which I may replace after deciding on a logo. The sketch draws a throbber (like the one that YouTube shows as it loads), which is pushed to the left as its drawn. The result is a fading helix.
A static version of the favicon on the left, and the animated version should show on the left side of the address bar or tab.
EDIT: The original looks great against itself, but a black square on a gray tab is terrible. Editing the processing sketch to yield transparency was fruitless, so I went back into GIMP and gave each layer a mask that was a greyscale copy of itself, then inverted all colors. Now the favicon is a black throbber with a transparent background. I much prefer it.
Here's the code.
//Another throbber idea. //A dot traces a circle, //while the background and its trace move to the left int HEIGHT = 32; //Width and height of palete int WIDTH = 32; int RADIUS = 10; //Radius of large circle int THICKNESS = 3; //Thickness of marker int SPEED = 45; //Number of frames per revolution float DX = .2; //Speed that the canvas moves at color OPACITY = color(0, 0, 0, 5); //Color overlaid each step to fade color PEN = color(255, 255, 255); void setup(){ size(WIDTH, HEIGHT); smooth(); noStroke(); fill(PEN); background(0); frameRate(30); } void draw(){ background(0); float stop = abs(WIDTH/DX); //Move the cursor to the proper side of the screen translate(-WIDTH*(DX/abs(DX)), 0); for (int i = 0; i<stop; i++) { translate(DX, 0); blit(i+frameCount); } if (frameCount > 45) noLoop(); saveFrame("f##.png"); } void blit(int state){ float x = HEIGHT/2+RADIUS*sin(2*PI*state/SPEED); float y = HEIGHT/2+RADIUS*cos(2*PI*state/SPEED); fill(OPACITY); rect(0, 0, WIDTH, HEIGHT); fill(PEN); ellipse(x, y, THICKNESS, THICKNESS); }