During the winter break, I took some time to play around with the Processing language. (See also: A code sheet on every lock screen.) My current opinion of it is that, despite a few people doing amazing things with it, it sits somewhere above Logo/Turtle-Graphics but below a real/regular/popular language. It’s good for a few specific problem domains: mainly, graphics. It’s not that great outside that domain.
I took a few hours to play with the in-browser JavaScript implementation of Processing, Pjs. It is almost a drop-in replacement for Processing. They’ve reimplemented most of the core Processing language in JavaScript, departing from the base language in only a few specific places.
I needed a simple task to base my Processing JavaScript project around. I recently ran across a Puzzled Pint “seal” in the Game Control materials. We used it many months ago, when we had only five cities. I only have the final rendered file, so I don’t know who made it or where the original resides. Probably Curtis.
Since our city list has expanded greatly since this seal was created, I thought it would make a fun target to implement in Processing. Aside from a little bit of angular math, it turned out to be pretty easy to make an interactive logo. You can play with it here:
https://netninja.com/fun/pplogo/
All the Processing source code is right there in the file. Just view the HTML source.
The seal image live-updates as you type cities in the text box at the bottom of the page. And as a side bonus, you can right-click the logo and save it as a PNG file at any time.
My original naïve design used the same font size for the dark text and the light city list, locking the bold arc of text to 90°. This looks okay when stretching out text: the letters get pushed apart, like a really loose kerning. It looks… less good… when cramming a lot of text into the arc. The compression uses something like kerning (just negatively). It’s easy to get a big jumble of illegible overlapping letters.
We’re up to eleven cities now, which looks horrible if keeping this exact style (even dropping to lowercase letters, which are generally more narrow than the uppercase equivalents).
Twiddling with both the font size and the angle of the arc of bold text lets you achieve a reasonable looking logo with the long list of cities.