Skip to main content
Ungathered Thoughts

Sunset over Wakari

Te Whanaupaki / Flagstaff, Wakari, and Saddle Hill
As viewed from Pine Hill Road, 7 December 2024.
(Source: JS, CSS)

I appreciated finding the One O'Clock Jump: British Linocuts from the Jazz Age exhibition at Christchurch Art Gallery, and even timed it right to watch the curator intro - lucky!

One thing that caught my eye was artists highlighting distant hillside edges with a stroke of sunlight - might have been Rhona Haszard's "Spring in the Marne Valley" or some other piece, I was all eyes and agog in the exhibition - go see it if you can :)

The exhibition website above has a good selection of the pieces online but not all when I checked, and I couldn't find the piece I exactly recall seeing this on.

Arriving back in Dunedin we were out collecting elderflowers for cordial and I saw a similar effect looking across towards Wakari as the sun set.

I thought the image would be cool to try and produce a sketch of that using the Web Canvas API in the style of such a lino cut; I hadn't had a play with Canvas API before and I figured that this style would lend itself well to a first attempt. The time will be well spent getting familiar with some javascript interfaces and geometry.

Also in mind for me was the natural shapes which start to emerge when you have a Grafana dashboard in the corner of your eye.

Grafana CPU usage chart looking like mountains

I worked out how to draw a line across the screen and a linear gradient vertically from that to shade the hillside, then how to make the line randomly walk up and down a few pixels to give it an organic shape.

I then removed the jitter and shaped the lines with a couple of crude mathematical functions that could approximate two distant hills, one peeking from behind the other. I started with simple functions to define these shapes at first, then introduced wave and cubic functions so I could lift nicer shapes from maths magic.

I repackaged things so that I could paste drawHill() calls into the browser console to try different strokes. You can do this: open your browser console (Ctrl + Shift + K / Option + ⌘ + J) and paste this to add a new hill in the foreground of the image:

drawHill({
    initialY: 325,
    stepSize: 5,
    shadowY: 800,
    strokeStyle: '#cfc',
    lineWidth: 2,
    shape: wave(2.5, 0.6, -2),
});

Pasting again will draw a new stroke with a new hill in the foreground. If the canvas is redrawn (you can kinda do that by hitting reload now) it produces an animation not unlike a 2D flight sim valley.

Then I added a couple more functions to paint a gradient in the background for the atmosphere and fill a circle for the sun.

Along the way I ran into some interesting and amusing unexpected outputs when I tried numbers that didn't output normal-looking scenery, that was fun too :)

I hadn't had a phone with me when I saw the sunset, which meant I didn't have a reference for the colours of the scene I saw yesterday. Attempts to find it by nudging a colour selector about were unsatisfactory, and I like the reduced if flat greyscale palette I'd kicked off with, so I'm leaving it there. It has a 1990s Classic Mac feel I appreciate, even if it's an impossibly wide (to the smaller Mac displays of that era) 720 pixels.

Is it Wakari as seen from Pine Hill? It's far more a gestural sketch from my imagination, and it's a little mathematical in arrangement and tone, but I am happy with it!

This is the first piece of procedural art I've made in a long time and it's been fun.

Thinking forward: