Tuesday, November 14, 2017

wrapping text on a curve path in processing

I made a Processing app to help generate this tuba bell cover for my band BABAM!:



Slightly hackier than usual (I was watching football and hanging out with my Aunt), I used Processing vs p5.js (like I did for my Halloween skull bell cover) because of some fumbling getting p5 to load the font I needed. (Gill Sans Ultra Bold)

Source and supporting files here.

My code started from this Processing forums post but improves it by having the top go around clockwise and the bottom counter clockwise, rather than just do a full 360 around a circle and making people strain their neck to read it. Then there was a lot of fiddling by hand to get the circle sizes to look right and the words to be in the right place.

A better version would take the actual letter width into account - this one is implicitly acting as if it were a monospace font, but I just wanted to get through it.

UPDATE: I improved the program a bit (including a trick to let me use the mouse to fine tune some of the positioning) for the New Magnolia Jazz Band:
Source and Supporting PDE files here.

UPDATE TO THE UPDATE: I further fixed the file to let me make a transparent background for it, so I could more easily do the coloring. (The trick is to use Processing's PGraphics to make an offscreen version. And when you do that remember your dang .beginDraw() and .endDraw();, along with moving all the actual drawing functions to be references to the offscreen graphic.)

PROTIP FOR THE UPDATE TO THE UPDATE: I admit this is kind of obvious to everyone whose head isn't stuck in old school pixels like mine can be, but if you use layers properly, color the layer behind the art rather than try to floodfill in the layer itself..

No comments:

Post a Comment