Lurking danger

I have just returned from celebrating my 10th anniversary on the achingly beautiful island of Kauai where danger lurks behind every turn.

These signs are at every trailhead and most beaches. They all seem to be saying the same thing: "This isn't Disney World, this is real life".

Why do you like painting?

Limes Painted with ProCreate for iPad

Limes
Painted with ProCreate for iPad

On Labor Day I took a break from painting to go have lunch with my wife. Labor Day requires at least one cheeseburger. She asked me an obvious, straightforward question that I, honestly, have never been asked: “What do you like about painting?”

I had never really considered it, not in those blunt terms. What a good question! I tried to come up with a good answer. I can tell you what I like about a painting. But why do I like to do the thing? I thought about it for a bit and came up with the following.

Shameless pride: It’s really gratifying to do something that most people can’t or can’t do well. This is shallow, but it’s honest.

Magic: Somehow the careful arrangement of colored mud or pixels becomes something else. This is the appeal of painterly illusion: tricking your brain (and other’s brains) into seeing something that isn’t there. If a painting goes particularly well, though, the colored mud or pixels can also create feelings and trigger thoughts or ideas. This is true of any art form, of course, but I personally find pictures particularly powerful in this way.

Meditation: Painting is slow and quiet and methodical. If things are going well I can find myself in a state of flow and lose myself.

Happy accidents: Yes I’m quoting Bob Ross. Come at me. Paintings are constructed. Even when you’re working spontaneously from life, you still have to plan, compose, and strategize. No plan is complete though, and accidents happen. Sometimes they turn out pretty good.

That doesn’t feel complete, but it feels like a good start.

Tacoma Dome Station Construction

Tacoma Dome Station Construction 8" × 8" Acrylic on birch panel

Tacoma Dome Station Construction
8" × 8" Acrylic on birch panel

Spring and summer have gone but the new Amtrak terminal is still under construction. Each day before my morning commute I have watched workers build a retaining wall, pour a concrete passenger platform, rip up the old platform and put it back together, and lately weld the superstructure for a passenger shelter.

It took a couple of weeks to build that retaining wall. Underneath the concrete there are large steel I-beams driven into the earth. Between the beams, fitted into the slots made by the “I” shape, are large slabs of wood. This lumber was stacked in great cubes along the wall. The workmen trimmed this lumber to length by hand, with a chainsaw. Each piece slid down in between the I-beams. Sometimes they would level the pieces out with a small shim. I never saw them make a mistake, even though they completely eye-balled each cut.

At the time this work was going on my work was not going particularly well. I was jealous of the clear and obvious progress these guys made every day. I am sure some days were better than others, but at the end of each day there was more retaining wall than there was the day before. Today the wall is here. Yesterday it was back there. Tomorrow it will be over there. Working on software can often feel abstract and phony by comparison.

This new Amtrak station will be next door to the commuter rail station. Both of these have been grafted into the semi-historic Freighthouse Square which a century ago was a warehouse at the end of a freight railway. Today it’s full of funky shops and fast food. There is a very promising looking Mexican restaurant there. It’s a weird ramshackle place. It’s very Tacoma. Looking forward while holding on to the past.

Back in June I arrived to wait for the train into Seattle and watched workers tying rebar into place so that the new passenger platform could be poured on top. They crouched before the new retaining wall, and above them is the freshly scraped hillside that leads up to a Best Western and the famous Tacoma Dome. I snapped several photos on the sly. For this painting I used elements from a couple of my photos. I used Pixelmator to rearrange the perspective a bit. I like how the under-construction landscape came together as repeating layers of blue and orange. You might have to squint a bit - but the sky is blue - of course, the earth is orangey brown, the concrete is blue-grey, the lumber concrete forms are burnt orange, the asphalt and gravel are blue grey, and the railroad tracks are rusted orange. I liked the contrast between the depth of the landscape layers against their graphical horizontal stacking. Less formally (romantically) I liked the one worker alone focused on his job. He was in a state of flow - I’ve had that. I was slightly jealous of his work, alone, in the morning sun. I was not jealous of his future back-ache.


This painting is acrylic on an 8″ square birch panel. I love the way acrylic paint behaves on these panels. You can apply thin paint and achieve watercolor like effects, or go thick, and build up a heavy impasto. You can lay down a wash of color, which stays damp while soaked into the grain of the wood, then build heavier color on top which blends into the color beneath, but just a little. The birch has a nice warm, but neutral, color so there’s no need to under-paint. The panel is light enough that pencil sketches are clear, but dark enough that you have contrast with lighter colors and whites. I also like the “object-ness” of these little panels. Even though it’s very small and light, it feels like a ‘thing’ in a way that’s different from a store bought canvas.

Work in progress

Work in progress

Overall this painting took about 8 hours to complete from set-up to varnish. It was nice to have a day off.

Shtacks: Type something

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.

Majid likes alpacas who like coffee

Alpacas and coffee

Alpacas and coffee

I have the good fortune to work with an old friend. He works remotely from Portland - but we still chat quite a bit over Slack and see each other when he visits Seattle to work out of our office. He has a deserved reputation for knowing the answer to most questions. We were joking in Slack about how he is a human search engine. His name is Majid so I started suggesting ridiculous web addresses for his human powered search engine - like http://majid.majid - or perhaps more Catch-22-y http://majid.majid.majid - I started posting screen captures of silly domain names available on Hover.com - and found majid.coffee - so naturally I registered it. I have a job; domains are cheap.

Later I popped into my team’s private channel and asked what we should put there. Majid does love coffee. One of my teammates remembered that he was fond of alpacas after seeing some kind of alpaca show in Portland,of course.

So I settled on Alpacas drinking coffee in a coffee shop. I looked at some photos of Matisse’s paintings. I missed that mark by a mile. I ended up somewhere south of David Hockney I think. But it works. I wanted something whimsical and loose. I think I got it. I also wanted to crank this out on a Saturday.

I knew I wanted this to be more than just a JPG on a web page. I found this great parallax effect library and knew just what to do.

I painted my coffee alpacas in ProCreate on my iPad - quickly and loosely - on a few layers. I exported that out as a Photoshop document to my iCloud drive and then grabbed that file on my Mac where I opened it in Pixelmator. I used Pixelmator to export each layer as either a PNG or JPG depending upon where in the stack it was. Some layers didn’t need full 8-bit alpha transparency, so I could save a few bytes by saving those as low-color 1-bit transparency PNG files.

Then I pulled down a copy of the parallax library, created a new Git repository, fired up Visual Studio Code and built a tiny web site. For my small static projects I’ve been using Pug templates - because it’s just a quicker way to write HTML and I can easily include and compile markdown files for blocks of text. I still tend to use Gulp to compile my templates and things - and also to run a little server. I could have probably used https://webpack.github.io for this too, but Gulp was fine.

Once I got everything put together I stacked up all the layers, got the parallax library working, and made some little adjustments. For example, I needed to tweak the scaling and the parallax effect so the edges of the layers didn’t show.

I’m hosting the page using GitHub Pages - which is a fantastic feature. It’s intended to host project documentations, or static blogs. Whatever. It’s an art gallery now.

Ever since I came across Rafaël Rozendaal’s work I’ve been thinking about how to meld my web stuff and my art stuff. This is a good trial run.