p5 and figure-ground reversal fun

I have a notebook from when I was 18, the summer before college.

I had designed T-shirts for my high school's jazz band the years previous, and I guess the band was still the focus of tooling around with some design stuff, and so I made this:

I've always enjoyed handcrafting blockletters, and I believe I made these by drawing the 3D extrusion behind the letters and then just filling in the extruded bits on the page in front.


Anyway, I realized I can now have the mojo to get a computer to do most of the work for me, and so I made fgrtext: figure-ground reversal (the fancy word I saw for it on wikipedia's entry for negative space.) It's a little virtual toy to mess around with the words, colors and other factors.

I made it so you can bookmark creations - here are some designs I made for 222 Street Jazz:

BABAM!

 

and JP Honk:

You can view source on the page to see everything in one file. The core idea is pretty simple - keep drawing the letters repeatedly in the "foreground" color on a diagonal slant, and then switch to the background color and keep drawing the letters a few more times. There were some challenges in the P5 code for it - they have a library for DOM elements and oddly (to me anyway) you set their .parent() after creation of them, otherwise they just end up attached directly to the body of the DOM, which is kind of weird. (Also since they didn't seem to support textareas, it was pretty easy to manually set up the HTML for that and use vanilla JS onkeyup events to call my functions directly, a bit of mix and match.) One drawback to the sliders was I had to only pay attention to mouse moves withing the boundaries of the main canvas - slider adjustments were showing up as background/foreground movements.

Also I made creations in this system bookmarkable by putting all the parameters in a state object and then encoding the JSON stringified version of that as the hash at every draw(), and then reading the hash at start.

Another courtesy I do is using noLoop() to only draw when the state has changed - p5 is great for many things but processor efficiency isn't one of them.