Over the past few weeks, I've been experimenting with painting in watercolours using my AxiDraw plotter. Watercolour is a medium I enjoy painting in (by hand) as a personal hobby, kind of separate from my public art making, so it’s been interesting to combine it with code. I’ve thought about trying this for a while but I was finally spurred on to do it after I visited Licia He’s studio in April. This article is not intended as a tutorial, but more of a scrapbook of what I’ve been trying, the results I’ve created and the mistakes I’ve made (and continue to make). Set up There are a variety of ways to control an AxiDraw plotter. I do it by creating svgs using JavaScript. I open the svg in Inkscape and use the AxiDraw plugin to control the plotter. If you’re wondering how to create an svg in JavaScript - I wrote my own class to do this, after finding that other libraries weren’t working as expected for me. My svg builder is on github and you can feel free to use it. An svg is essentially a series of paths. Usually a plotter moves a pen around those paths. When plotting with watercolour, we also need to create paths to pick up paint, swirl the brush in water and dab the brush on paper towel. Here’s what my set up looks like in real life, with all the equipment taped in place next to the plotter. Watercolour set up in real life I’ve mirrored the real world set up in code. Doing this required a bit of trial and error to make sure things were placed in the right place, but it wasn’t as finicky as I expected it might be. There is a decent margin for error since the areas for the paints, paper and water are relatively large. Watercolour set up in code This output would paint a series of vertical wavy lines on the paper. The blues and greens represent the colours that will be painted, while the thin red line represents the path that will be exported as an svg, for the paintbrush to follow. Notice that there are red circles around the paint areas, lines in the water area, and dabs on the paper. These are all added to the svg in order, so the paint brush will: Swish through a long path in the water Dab the paper towel Circle around one of the paints Swish a short path in the water Paint one vertical line This then repeats for each of the vertical lines. Testing testing Here are the very first watercolour tests I plotted. You can see there are issues with the colour fading out, where the paint has not been refreshed often enough. Or with the results becoming uneven and “scratchy”, where the brush does not have enough water on it. I’ve experimented a lot with the order of actions described above, because picking up more or less water before or after picking up paint makes a difference to the effects created. Brushes In those initial tests I was working with a thin brush, with the bristles cut very short. My thinking was that this might allow for detail but, in fact, the bristles spread outwards, creating visible bristly edges, which I hate the look of. I’ve done some testing with different brushes. Brush 1 is the one I cut short, resulting in a scratchy line. Brush 2 and 3 are similar, but 3 performs ‘better’ - note the defined gap in the centre of the ‘a’ and the correct alignment on the start/end of the circles. A long brush can lead to “inaccurate” shapes, due to the way the bristles are dragged over the paper and become pushed around - you can see what I mean in the 4c photograph below, where the bristles are dragged from the left to the right. This effect can be reduced by carefully setting the height of the brush so that the tip only just touches the paper and by using brushes with firmer bristles. Brush 3’s bristles are much more collected than brush 2’s. Many of these brushes are flat and I placed them diagonally in the plotter. Particularly with brush 3, you can see how this results in thinner lines in the / orientation and thicker ones in the \ orientation, creating a calligraphic effect. The last four tests on the first sheet all use brush 4, but I altered other conditions: 4a - Speed 70%, brush placed with tip just touching paper 4b - Speed 20%, brush placed with tip just touching paper 4c - Speed 20%, brush placed lower down 4d - Speed 20%, brush placed lower down and weight applied The difference between the results of a and b shows that a slower plotter speed can help more paint reach the paper and create clearer lines. The difference in height of the brush in each of these is only a few millimetres but the difference in the results is marked, demonstrating how this process is (happily) difficult to control and filled with chaos introduced by the medium. Brush 4 has been damaged a bit by test 4d, where the brush was weighted down. It’s visible in the photo of the brushes above - the bristles were neater before the tests. I do like the smushy effect of the circle though, it could be interesting to play with that. Brushes 5, 6, and 7 are wider but it’s still possible to write readable words, just at a larger size. The diagonal orientation effect of the diagonal flat brush is also more pronounced here. The first shape on Brush 7 uses the same circular path as all the other brushes - the bristles in contact with the paper just haven’t moved that much. Wider brushes generally lend themselves to smoother edges and no risk of scratchy areas, while thinner brushes are obviously necessary to create detail. I’ve been on the look out for brushes in the shape of brush 3, but shorter and narrower. I also haven’t yet experimented much with brushes of different shapes. This is an ongoing exploration! Smooth lines The first “proper” outputs I created were these Perlin noise adjusted rows of lines. It’s interesting that in the tests of the thinner brushes, the colour often runs out before the end of the word or even the short sine wave. Whereas in these outputs, a slightly wider brush manages to continue the full length of a sheet of A4 paper. Even a small difference to the width of the brush seems to make a big difference to how much water and paint it can hold. Watercolour Words I’ve tried a few different ways of creating typographic pieces, using the handwriting I coded in Javascript (you can read about that here). In this first one I simply repeated the same word in different shades, using a large brush. I particularly like the areas where one word bleeds into its neighbours. I’ve also experimented with using a few words or a short phrase, in different layouts. I love aspects of these, but they don’t quite feel like “finished” pieces, due to the amount of white space. One thing I’m particularly liking is the smudged areas of colour. I dripped water onto the paper by hand as the plotter was working, so that the paint would run. In this video you can see the drips of water on the paper and how the colour spreads and distorts as the brush moves through one of them. I love how this takes advantage of the watercolour medium. In some of these next pieces, I automated this by drawing circles (actually I used the letter ‘o’) in water ahead of the main letters in paint. In this video you can see the ‘o’s drawn in water - showing up as pale purple as the water tray had taken on a good amount of paint by then. As the ‘j’ is drawn, the colour spreads out into the water. These single letter typographic pieces are my favourite watercolour plots I’ve created so far. Few things make me happier than a cloudy gradient. Layering In the past couple of days, I’ve been working towards making the sentence/phrase/word pieces feel more complete by experimenting with layering. I feel like there is something interesting here, but much more refinement is needed. Creating these is a time consuming process so experimentation is slow. I’m working on better integrating the layers, so that the words or other foreground content feel naturally part of a painting. Going forward There are some practical things I need to improve upon - I haven’t been pre-soaking my watercolour paper, which means it warps when it gets wet. This is particularly problematic when trying to set the paintbrush to an exact height above the paper, because the paper is not all the same height. I’m finding the painters’ tape, which I use to create nice clean edges, often lifts up during the process. I’m hoping this may improve when the paper is pre-soaked. I need to get some much smaller brushes to try out. I also have lots of ideas for ongoing exploration! One thing I’ve just started doing but am not ready to share yet (the first test is literally in the plotter as I write this) is using photographs as inputs for representational paintings. Currently this feels like something to try out for fun rather than something I’d want to “really” use the process for - but who knows where it will go. I’m mostly thinking about ways I can make the most of the combination of the exactitude of the robotic method with the chaos of the physical medium. 😍 Enjoyed this article? I’d love it if you could give a boost on Twitter, thanks! ✨ And don’t forget to sign up for my weekly newsletter, filled with updates.

Coding my handwriting in Javascript - how I did it and what I’m doing with it.

My current generative artwork-in-progress includes text, but I don’t want to use a font. In browser based art work, using a “web safe” font could produce inconsistent results, while including a font file would mean a large file size. Additionally, I don’t want a visual element of the project to be something I didn’t create myself. Instead of using a font, I made my own path-based alphabet using p5.js and JavaScript. Fonts, how do they work? I started by looking into what the various points on a font are called. (Mad props to whoever decided that one of the heights in the y-axis of a font should be referred to as the “x” height.) I defined my letters around a central point, mid_x and mid_y. In hindsight it would have been better to work from a bottom left point and I’ll be adjusting this at some point, to help improve my kerning, which is currently inconsistent. Within a Letter class, I defined these key locations like x height, cap height etc, in relation to the font size and the mid point. For example, the full height from base to cap is equal to the font size. From y_mid to y_x is 1/3 of the full height. I also defined some small distances I could adjust a point by, in relation to the height. this.adj_1 = this.h_full * 0.05; this.adj_15 = this.h_full * 0.075; this.adj_2 = this.h_full * 0.1; this.adj_25 = this.h_full * 0.125; this.adj_3 = this.h_full * 0.15; this.adj_35 = this.h_full * 0.175; this.adj_4 = this.h_full * 0.2;   Defining a Letter Each letter is defined by a set of initial paths, of just a few points. Creating these paths was an iterative process of nudging them into the right places. I used a font as a vague guide and also wrote letters on paper to see how they “should” look. The results are a bit of a jaggy scrawl. Don’t worry, there’s more. create_a(){ this.paths = [ [ // stem {x: this.x_left+this.adj_2, y: this.y_x + this.adj_4}, {x: this.x_left+this.adj_3, y: this.y_x + this.adj_1}, {x: this.x_mid+this.adj_2, y: this.y_x}, {x: this.x_right, y: this.y_x+this.adj_2}, {x: this.x_right, y: this.y_base-this.adj_4}, {x: this.x_right+this.adj_1, y: this.y_base}, ], [ // round {x: this.x_right-this.adj_1, y: this.y_mid-this.adj_15}, {x: this.x_mid-this.adj_1, y: this.y_mid-this.adj_1}, {x: this.x_left, y: this.y_mid+this.adj_35}, {x: this.x_mid, y: this.y_base}, {x: this.x_mid+this.adj_2, y: this.y_base-this.adj_1}, {x: this.x_right+this.adj_2, y: this.y_base - this.adj_4}, ] ]; } Curving the paths The next step is to smooth out the paths using Chaikin’s curve algorithm. (Shout out to Aaron Penne for making me aware of this algorithm some time in 2022, I think) Let’s look at a simpler path to see how it works. Chaikin’s algorithm is run recursively and, in each round, we create a new path with the following steps: Copy the first point (the ends stay in place) For the rest of the points before the last point: Add a point 25% of the way to the previous point Add a point 25% of the way to the next point Copy the last point. After one round, we have this. The new path is marked in red. Path after 1 round of Chaikin’s curve algorithm Then we apply the same steps to the resulting path. Here are the results after 2 and 3 rounds. Path after 2 rounds of Chaikin’s curve algorithm Path after 3 rounds of Chaikin’s curve algorithm And here’s the final result. Satisfying. Let’s see what that does to the letters. After 1 round of Chaikin’s curve algorithm After 3 rounds of Chaikin’s curve algorithm Curved paths About 3-4 iterations of the algorithm is enough to get a nice curve at small sizes. If the font is to be used larger (with the points further apart), then more iterations will ensure you don’t get pointy edges. Using Chaikin’s algorithm makes it possible to get smoothly curved paths by only defining a few points. Minimizing Defining the paths in relation to the mid point and cap etc helped me figure out how to draw a letter. For example, I found it easier to think, “the stalk of a b starts at the cap and goes to the base”, rather than “the stalk of a b starts 14.1 pixels above the mid point and ends 7.4 pixels below it”. However, the resulting code was verbose and pretty blergh (as above in the create_a function). To slim it down, I wrote a function which went through each letter and generated new code with everything translated into simple numeric values. // Get string of new code let string = ""; for(let l of this.letters){ string += "create_" + l.letter + "(){\n"; string += " this.ip = [\n"; for(let path of l.ip){ string += " ["; for(let p of path){ string += "{x: " + nf(p.x, 0, 1) + ", y: " + nf(p.y, 0, 1) + "}"; if (path.indexOf(p) != path.length-1) string += ", "; } string += "]"; if (l.ip.indexOf(path) != l.ip.length-1) string += ",\n"; else string += "\n"; } string += " ]\n"; string += "}\n"; } console.log(string)   Here’s the resulting code for the letter a. Much smaller. create_a(){ this.ip = [ [{x: -2.8, y: -3.4}, {x: -1.7, y: -6.8}, {x: 2.3, y: -8.0}, {x: 5.4, y: -5.7}, {x: 5.4, y: 2.9}, {x: 6.6, y: 7.4}], [{x: 4.3, y: -1.7}, {x: -0.9, y: -1.1}, {x: -5.1, y: 3.9}, {x: -2.1, y: 7.4}, {x: 2.3, y: 6.3}, {x: 5.4, y: 2.9}] ] } These numbers are based on a font size of 20 and are simply scaled for different font sizes.   Shapifying the path Here’s the whole alphabet so far. It’s looking pretty natural but it’s also a bit spindly. It’s easy to adjust the stroke weight, but handwritten letters are not usually exactly the same width all the way along the strokes. To enable paths with varied widths, I turned the paths into 2D shapes in an algorithm I call ‘shapify’. To see how it works, here’s that zigzag shape again, after it’s been curved. To create the shapified path, we go along this path and, at each point: Find the angle from that point to the next (for the last point, finds the angle to the point before and flip it 180°) Using Perlin noise, choose the width the path will be at that point. Here I’ve drawn a line at each point of the path, to demonstrate those angles and widths. Notice how each of the lines is a slightly different length and their angles follow the curve of the path. From there it’s easy to see how we can draw a path around the inner path to create our variated width path. At the end of the line, it draws a little loop of points around 180° to create a nice round line cap. I did not know I would be making this weird little wormy guy when I started this article. Side note: My ‘shapify’ algorithm is not at all perfect. When the stroke width is wide, these awkward inner loops appear at tight corners. It’s the same issue I explored in this article. Luckily, in this implementation the whole thing is filled anyway, so it doesn’t matter too much. One last thing I did is to jitter all the points slightly using Perlin noise. This adds another layer of natural feeling to the letters as well as giving them variety. Here’s how the whole alphabet looks: Aesthetic edits Now that the system is set up, it’s possible to play around with all kinds of settings to create different effects. For example, instead of altering the line width with noise, we can do it based on the letter placement. (Thanks to Piter Pasma for the suggestion.) Or we can mess around with higher resolution noise for more jitteryness. What does it weigh My letter class is now 9.7kb. This includes: Path definitions for all letters A-Z in lower and uppercase, and 7 punctuation marks. Letter spacing (although I’m still fine tuning this) Function to resize paths for font size. Function to create the smooth path by calling Chaikin algorithm (but not the algorithm itself, as that’s a function I also use elsewhere) Functions to create and draw NaturalLine objects which handle jittering the path points and shapifying the path etc (but not the NaturalLine class itself, as that’s used all over this project) There are definitely ways I can cut it down more as well. (I am not interested in tips on how to cut down file size at this time, thanks lol.) When I started defining paths, I was a bit worried I was on a fools errand because I pretty much had to define the whole alphabet before I could really test the look of the results in place, but now that I have it on the WIP outputs, the handwritten effect is looking just how I wanted. Enjoyed this article? I’d love if you could give it a boost on Twitter. Thanks!

A long-form generative art project coming to fxhash in partnership with FAB DAO on 11th Jan 2024. This series is inspired, in the abstract, by the images I visualise when reading about quantum theory. Particularly thoughts of particles spreading out as waves and then collapsing into particles again at a moment of interaction. At the quantum scale, classical ideas of space and form come apart, replaced by concepts, probability and mathematics. Yet I cannot help but imagine tiny structures. There are moments when it feels like, if I concentrated closely enough or reached out in just the right way, I could perceive my hand floating through the particle soup. The title is a quote from "Physics and Philosophy" by Werner Heisenberg These example outputs demonstrate all the palettes in the collection. Grey Rainbow Elf Buzzzz Gem Avocado Amethyst Punch Chalk Tangerine Fading light Rough seas Space dust Slice Space waltz Bright ochre Highlighter A strange kind of physical reality opens with a limited allow list for FAB DAO members at 6pm on 11th Jan 2024 and then opens for full release on 12th Jan.