Go type a painting

I live in beautiful, downtown, Tacoma but I work in overrated, overpriced, Seattle. I spend a lot of time on the train. I try to make the most of my time commuting by reading, listening to music and podcasts, and doodling on my iPad. I have been doodling desktop images for a while - big high-resolution square format images that can serve as a phone, iPad, or desktop wallpaper.

Letters and numbers and more in Sketch Letters and numbers and more in Sketch

In April of this year I hit upon the idea of drawing the alphabet. I used Sketch to lay out a square and position a big Bodoni A, B, C, and D and got started. I exported those images from Sketch to my iCloud drive, placed them into Procreate on my iPad, and painted.

Painting the 'M' in ProCreate Each image uses the same color palette.  Painting the ‘M’ in ProCreate Each image uses the same color palette. 

I didn’t layout all of the letters at once. I probably should have. I learned in July that “Q” doesn’t fit the square as the little descending tail falls off the page. I also discovered that W is too large for the page. Whoops. I guess it’s a painting of a typographical error.

I started thinking that it would be fun to text these images to people. Once I had the alphabet complete, I stole a weekend to write Shtacks.com

Type something

In the text field at the top you can type letters and some punctuation. You can also get a heart icon with <3, data-preserve-html-node="true" :heart:, or _heart_. The letters are laid out based upon the size of the screen. So resize your browser window or rotate your device for a different layout.

On desktop browsers you can download the image with the download button at the bottom. Currently I don’t have image downloads working on mobile devices. But I hope to fix that soon.

As you type the text becomes part of the URL. So you can share what you’ve typed with friends by sharing the URL using your browser’s share function, or just by copying and pasting the web address. When the shared page loads, it will capture the text in the URL and regenerate your image.

Or at least mostly. It may be a different layout because the viewer my have a differently sized screen or device. Also the (typographic) spaces are multi colored and selected at random.

And how

After researching HTMLCanvas, I spent about two days building the web site. I wanted to write something very slim and functional. My day job relies on big, object oriented web frameworks. Building something fast and light with a singular focus was refreshing.

You can see that the main program is quite simple.

After collecting references to the page elements, the piece…

  1. Collects any text any the query string and sets it as the current text
  2. Writes the image out using the URL text, or the default
  3. Creates two methods to rewrite the image, and to set the URL text
  4. On resize of the browser window, rewrites the image
  5. On input of text, rewrites the image
  6. On input of text, sets the URL state
  7. On a history event (clicking the back button), extract the previous text from the previous URL and rewrite the image

Writing the image is also a straight-forward algorithm. With a reference to the text input and the drawing canvas…

  1. Set the square dimension for each letter
  2. Prepare for drawing by getting the canvas drawing context
  3. Get the current text
  4. Get the width of the window, minus scrollbars
  5. Calculate the dimensions of the drawing surface based upon the window and text
  6. Clear the drawing surface and resize
  7. Break the text up into a table, rows and columns of letters
  8. Calculate the position of each letter, in each row
  9. Load and place the letter at its position in the canvas

Iterative

Working on Shtacks was the first time I realized that both art and software are iterative practices. Shtacks is the first artwork I have done with release notes.

Painting each letter, I refined my process and got faster at getting the effect I wanted. Writing the site, I worked writing small building blocks to add up to the complete piece. I started by simply loading the images by letter. From there I worked on getting and setting the text. Then handling the heart icon. And so on. Small iterations leading to releases leading to the work.