From JavaScript to paper: a linocut adventure

One of my favourite kinds of art to make involves taking nature and seeing it as simple shapes. Buildings are cubes, flowers are circles, hills are curves. Shells are spirals. Tree rings are weird circle bois, and they are some of the best. I’ve wanted to make a generative art of a tree ring for a long time, but everything I made kept sucking (scroll to the bottom if you don’t believe me. Shit was bad bad). I finally made something I like, I thought it might be neat to write a little bit about The Process™️, since it involves both JavaScript and murderous little knives.

Let’s talk trees

My friend Kyle has a ranch, and in the summer he lets his friends fulfill the burned out millenial dream of having no cell signal and sleeping in a tent. He has infinitely many trees, and sometimes he lets me do a craft with some of the trees he chops down. I’m “currently” (read: I started last year and I’ll probably finish in 2026) making a side table. I also made these coasters:

a photo of a small section of a tree ring

Trees are rad, yo. Young trees have very regular and evenly spaced rings because much like human children, they haven’t had a lot of life to live. However, as trees get older, they get jobs they don’t like, have to start making dinner every night, start having back pains from literally just being trees and their rings get wonkier. Here is what I’m making my table from:

a photo of a bigger section of a tree ring

Trees can grow unevenly because of droughts or insects or capitalism building shit where it shouldn’t. They get visible scars from forest fires. You can map the entire life of a tree (and tbh, of everything that was happening around the tree) by looking at its cross section. There’s something called a ghost forest that indicates at some point, something happened (like an earthquake), which caused salt water to rise, killing all the trees that lived there. Here’s a photo (ref) of a knotty tree (heh heh) that has fire scars:

a photo of a section of a tree ring that is very elongated and has a lot of dark blobby spots, that are labelled with years.

So you know, if you want a tree ring, you can’t just draw some concentric circles and call it a day.

Generate some tree rings

Montage time: the Rocky-runs-up-the-stairs song is playing in the background. I am hunched over a laptop because I have the posture of a pretzel and the willpower to change that of a golden retriever left alone with a burrito. I am furiously typing for-loops in an editor; my cat is trying to drink from my water glass even though there’s a perfectly nice pet bowl of water next to it. I save these files to my computer to document what I think is going to be a cool progression of generated art. It is, in fact, not.


some close concentric circles, each with jagged edges

I drew some concentric circles and tried to call it a day. They looked stupid. The circles are kind of jaggedy because I didn't even try to use Perlin noise, that's how lazy I was. If you don't know about Perlin noise, Varun's article is 😘🤌 and fun.


concentric rings of small strokes

I tried to throw away the circles and just paint their shapes with strokes. This certainly looks interesting, but it doesn't do tree rings justice. Don't worry: I'll end up using these painty-strokes in a different project.


close concentric circles, some of which are overlapped by randomly positioned small strokes

"What if you keep the rings AND the strokes but you randomize them more".

No.


small concentric circles like in the first image, but with some black triangles

"Maybe go back to the first circles and add some cracks. Maybe that's what's missing".

Narrator: it was not. So this definitely looks like a tree ring! But it also 100% looks like a for-loop generated it and that is not a thing I'm sticking my name on.


smoother concentric circles, of different thicknesses and greyscale colours, with some black lines overlapping

"Perlin noise. Didn't I say Perlin noise fixes everything? This will fix everything".

Better, but it still looks like someone in CS-101 drew it, let's be honest.


smoother concentric circles, of different thicknesses and greyscale colours, with some black lines overlapping. they are pretty regular towards the center, but much wobblier towards the outermost circle

Play with the noise parameter, making the outer rings noisier than the inner ones. Don't play with it too much though or it will steer rapidly into drippy Dali clock territory.

This was okay. The shape looked like a believable tree ring; it was just kind of...boring.


This, dear reader, is where I realised this wasn’t going to end well, and here’s why: after all these explorations I had a fairly good idea of what I wanted the tree ring to look like, but I didn’t know how to say it in JavaScript. All of this is drawing pixels and curves in the html canvas, and that shit is hard. I have no idea how to start adding textures and stuff to it, and the point is: I don’t want to learn. For me, that isn’t what generative art is about, that’s what traditional mediums are about.

Carve ‘em up

In parallel, I also started making linocuts. Linocuts are a lot like stamps – you carve the mirror image of what you want to see, usually into a piece of linoleum using a sharp v-shaped knife. With stamps you press the stamp into an ink pad; with linocuts you roll the ink onto the block, and press the paper onto the inked block to make the impression.

For context, the scene is: March 2021, in the middle of the pandemic. I am bored senseless, and stabbing squishy rubber with a sharp knife sounds like a great way to spend a Saturday. Also, there’s something poetic about literally bleeding for your art because as a very clumsy person you best believe I accidentally (and sadly more than once) jammed a knife in my thumb.


a printout of a wobbly set of tree rings

I started with this generated tree ring. I don't have the digital file anymore because this part went so poorly and made me so mad I probably threw it out after a tantrum. I drew some random lines to "represent texture" on the printout and went in with the misplaced attitude of "I'll figure the rest when I carve it", because despite this never working for the last 35 years of my life, it's still something I insist on trying.


a really bad and messy print of alleged tree rings an even worse and messy print of alleged tree rings

The linocuts and the prints were a mess, and here are some samples. I can't stress this enough, linocutting is not a medium for improvisation. I tried this chaos approach THREE more times, as if time was going to help (it didn't). It was truly bad. I'm only showing you this to make you feel better about whatever projects you have in progress and don't feel great about.


a photo of a bigger section of a tree ring a photo of a bigger section of a tree ring

I finally took a step back and made a plan, like I should've done in the first place. I imported the generated tree ring in Procreate, drew a bunch of other lines and cracks on it until it looked right. At this point it looks *very* different than what we started with, but the foundations are all there: the edges and rings have the same shapes, the cracks are mostly in the same places.


What a ride, eh? I’m happy that I did all the generative explorations, because now I have a PILE of JavaScript I can just pull up whenever I need to: noisy circles, paint strokes, blobby stroke lines. I am also happy that I ended up finishing this as a linocut: it now feels like the human-for-loop collaboration of my dreams.

I’ve put up these prints for sale in my store – they are all hand printed by me, either using black ink on white deckle paper, or with gold ink on a black paper.

a photo of a bigger section of a tree ring
a photo of a bigger section of a tree ring
« Fixing typedoc's generated TOC if your code is using ES6 modules I redesigned my site »