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.

I’m coding a system in JavaScript that generates sentences of “meaningful nonsense”. Here are some examples. I set off on this path because I’m working on a series of generative diagrams and I wanted them to have titles. Immediately I was drawn in by the effect of the diagrams next to the semi-nonsensical words. Since then, I have developed these diagrams a lot, including using my sentence generating system to add scribbled notes to the sides of them. Here’s an early example and one of where my diagrams are up to now. I have also been using this system to generate “truths” and to provide content for typographical artworks. All of this is an ongoing experimental work in progress but I’d like to share how it works so far. Sentence Structures My system consists of sentence structures, curated word lists, and various rules for how to fit words together. Here’s a small sample of my current sentence structures for titles and for truths. // Diagram titles [ ["gerp", " ", "noun", " - ", "nouns"], ["nouns", " and their ", "adj", " ", "nouns"], ["gerp", " ", "nouns"], ["noun", " ", "verbsp", " ", "nouns"], ["intro-0", " ", "verbp", " ", "noun"], ]; // "Truths" [ ["The purpose of ", "noun", " is to ", "verb"], ["nouns", " begin when ", "nouns", " end"], ["You must ", "verbp", " ", "noun"], ["You should ", "verbp", " ", "noun"], ["noun", " is the key to ", "gerp", " ", "nouns"] ];   When generating a title, the system randomly chooses a structure and the words that fit into it. For example, these structures could lead to these outputs. nouns of adj nouns noun as noun: nouns Word lists I have created lists of: Adjectives - abstract, liminal, timeless Verbs - think, change, manifest Nouns - time, dream, information Side note: For the majority of my life I have had to recite from Massive Attack’s Teardrop - “Love, love is a verb, love is a doing word” to remember which ones verbs are but, since doing this project, I think I’ve finally dialled the information in. I’ve carefully chosen the words in my lists to be the “right” kind of word for the effects I’m going for. I’ve been browsing through wikipedia articles and academic papers for ideas, as well as copying down words that come up here and there and strike me as suitable. In the sentence structures above, you’ll also notice some other things like “gerp” and “verbp”. These are different grammatical versions of the verbs and nouns in my word lists (adjectives are always the same). There’s also “intro-0” which is a phrase, I’ll get to that later. Let’s look at how nouns and verbs are altered for different contexts. Nouns Here’s a small sample of entries in my noun list. // 0 - no plural // 1 - can be pluralised with s [ ["tone", 1], ["wonder", 1] ["fire", 1], ["cognition", 0], ["weather", 0, "the"], ["hierarchy", "hierarchies", "a"], ["compass", "compasses", "a"] ] The first position in the array is the singular form of the word. The second position in the array contains information about how to pluralise it. 0: Some words are not included in plural, e.g. we would hardly ever refer to cognitions or weathers. 1: Most words can be pluralised simply by adding an ‘s’, e.g. tone ➡️ tones. String: Some words are spelled differently in plural, so a string can be provided to handle this case. e.g. hierarchy ➡️ hierarchies The third (optional) position in the array allows me to define articles (e.g. a, an, the) for the singular version of the noun. Some words don’t need an article - usually when they can be interpreted as a concept, or general idea of that thing. But many words feel more like they are referring to a specific item or an instance of a thing, so they need an article. Some words don’t work in plural Some words need an article. When the code runs, it goes through the list of nouns and creates two new lists, one of singular nouns and one of plural nouns, using the specified rules. Then the sentence structures can call for either ‘noun’ (a singular noun) or ‘nouns’ (a plural noun). When the sentence structure puts an adjective ahead of a noun, the adjective must be put after the article. i.e. we say ‘a curious cat’ not, ‘curious a cat’. This creates an additional difficulty, because we now need to use ‘a’ or ‘an’ based on the sound at the start of the adjective instead of the noun. (TIL this is called allomorphy!) For example, if we’re describing ‘a fire’ as ‘enigmatic’, we need to change the article to ‘an’ accommodate the ‘e’ in ‘enigmatic’ - we say ‘an enigmatic fire’ not ‘a enigmatic fire’. To handle this, the sentence generator looks at whether the adjective starts with a vowel and adjusts the article accordingly. There are also a few exceptions coded in specifically, for example ‘universal’ which starts with a vowel but is pronounced with a y sound and therefore would go with ‘a’ not ‘an’. Thanks, English. Verbs Verbs have a few more versions to handle. Here’s a small sample of entries in my verb list. // 1 - can be made gerund with ing // 2 - can be made gerund with -e and ing // -- // 1 - can be made past tense with ed // 2 - can be made past tense with d [ ["manifest", 1, 1], ["move", 2, 2, [2, 11, 12]], ["think", 1, "thought", [6]], ["flow", 1, 0, [2, 11, 17] ]   The first item in each entry contains the verb in base form, e.g. ‘manifest’ The second position contains information about how to turn it into a gerund: 1: Just add ‘ing’, e.g. manifest ➡️ manifesting 2: Remove the ‘e’ at the end and then add ‘ing’, e.g. move ➡️ moving The third position contains information about how to make the verb past tense: 1: Add ‘ed’, e.g. manifest ➡️ manifested 2: Add ‘d’, e.g. move ➡️ moved 3: String to define an irregular verb, e.g. think ➡️ thought That’s all we need for some verbs, like manifest. But for others, like flow, it doesn’t quite work. Some verbs are usually paired with a preposition (e.g. through, towards, about). Alongside the list of verbs, I have a list of prepositions, which will fix those awkward sentences. Here’s a sample of them. [ "", "with", "into", "in", "to", "for", "about" ]   The optional fourth position in the verb array points to entries in the preposition array, indicating which ones that verb can be paired with. Here are some examples once the prepositions are paired with flow and move. From the list of verbs, the system creates 5 different lists: “verb” - base form of verb - manifest, move. “verbsp” - verbs with preposition for singular nouns - manifests, moves towards “verbp” - verbs with preposition for plural nouns - manifest, move towards “gerp” - gerund with preposition - manifesting, moving towards “pastp” - past tense with preposition - manifested, moved towards A question of Sense Some verbs, like think or learn present a deeper question. There is nothing grammatically wrong with the following sentences but… do they make sense? A moment can flow into something for sure, but can it think about something? Well, it’s kind of a judgement call. I definitely could add additional information to my word lists to ensure that certain verbs can only be paired with “appropriate” nouns. But I think something would be lost. Technically no, gravity does not learn about regret. But isn’t the idea kind of beautiful? In general, there is perhaps a meaning-nonsense continuum that sentences can be placed along. Phrases In addition to the word lists, I also have lists of phrases which include: Intros - Thoughts on, A system of, The role of Questions - Is it possible that, are we to infer that, what if Happenings - Patterns suggest that, we’re coming to realise that, it’s been suggested Occasions - Sometimes, in some cases, almost always Connections - is a pathway to, is a sign of, is a component of These are used in specific contexts in the sentence structures. For example, Intros are specifically to be used in diagram titles while Questions were created for the notes written at the sides of diagrams. Connections are used between two nouns. Examples of connections, occasionals, happenings and intros. Semantic similarity I experimented with semantic similarity for labels on diagrams - using words that are related to the title. I won’t go into detail about the process here, but I used a Python library called gensim and a model called glove-wiki-gigaword-100 to analyse my word lists. For each word, I generated a list of the most related other words. Here’s an excerpt of the results: {word: 'time', similar: ['start', 'beginning', 'chance', 'life', 'moment', 'thought', 'doing', 'experience', 'mind', 'future', 'stage', 'idea', 'hope', 'attention', 'action', 'matter', 'effect', 'thinking', 'problem', 'process', 'middle', 'goal', 'system', 'reality', 'dream']}, {word: 'cognition', similar: ['consciousness', 'psychology', 'perception', 'reasoning', 'emotion', 'creativity', 'computation', 'phenomena', 'semiotics', 'behaviour', 'learning', 'imagination', 'processes', 'simulation', 'metaphysics', 'theory', 'vibration', 'logic', 'cortex', 'cues', 'theories', 'morality', 'understanding', 'nature', 'knowledge']}, {word: 'tone', similar: ['contrast', 'emotion', 'pattern', 'gesture', 'mind', 'image', 'moment', 'narrative', 'language', 'clarity', 'perception', 'matter', 'perspective', 'effect', 'feeling', 'letter', 'balance', 'understanding', 'harmonies', 'attention', 'idea', 'action', 'imagery', 'thinking', 'meaning']}, {word: 'space', similar: ['energy', 'time', 'dimension', 'system', 'dimensions', 'environment', 'life', 'land', 'experience', 'laboratory', 'experiment', 'gravity', 'reality', 'future', 'idea', 'nature', 'box', 'vision', 'mind', 'existence', 'problem', 'image', 'moment', 'simulation', 'element']}, {word: 'motion', similar: ['action', 'effect', 'process', 'gravity', 'stage', 'reasoning', 'system', 'image', 'matter', 'idea', 'time', 'mind', 'space', 'human', 'narrative', 'reality', 'tone', 'sequence', 'letter', 'processes', 'theory', 'contrast', 'vision', 'moment', 'experiment']}, As words are chosen for the diagram title, a list of related words is generated and labels are chosen from that list. Here’s an example showing a diagram with unrelated labels and then with related labels. Unrelated, random labels Semantically related labels I was excited about this when I first got it working but I am not sure if I will use it in the final version of the diagrams because I think often it’s more interesting if the words and ideas are a bit scattered. To some degree, I feel like all the words are “related” because they are all in the category of “words I thought would work in this project”, and that might be enough. However, it could be worth experimenting more with semantic similarity within sentences or paragraphs in the future. A conduit for truth In addition to the titles and notes on my diagrams, I’ve been using this system to generate “truths”. In April, I created the first series of “56 Truths”. I plotted them with my coded handwriting, using gold ink on small black cards which were placed into gold envelopes and stamped with their number. I handed the majority of them out at the Venice Biennale/Bright Moments weekend (I have about 8 left!) To generate these “truths” I used an adapted list of sentence structures and I created a system for joining sentences together using connectors like ‘and’, ‘-’, ‘because’ and ‘when’, to create longer sentences. I have since created a new, more bespoke set of sentence structures for these kinds of outputs and I look forward to releasing more “truths” into the world 😉 Handwritten artworks I’ve also been using this system to generate content for my handwriting outputs. I wrote about these in more detail here. Here are a couple of examples, drawn by my Axidraw plotter. Some of these artworks are now available in my shop - with more being added regularly. A journey of meaning I mentioned earlier the idea of a meaning-nonsense continuum on which these sentences could be placed. This metamodernist oscillation between sincerity and irony is at the heart of this system (and of my generative diagrams). I simultaneously hold two quite contradictory feelings towards them. Firstly that obviously they are nonsense. It’s just an algorithm, they’re made up, almost a joke. Obviously, obviously it’s meaningless. But, on the other hand - they do mean something. As is often the case, even when no specific meaning is intended, it is possible to find or infer a meaning. Let’s take the first sentence, “The beginning is essential for consciousness”. Nonsense. Gibberish almost. But actually, what if the beginning is essential for consciousness? What’s meant by “the beginning”? The big bang? Is it saying there is some element of the first microseconds after the start of existence that is the key to understanding consciousness? Or perhaps it means the moment of conception? If you don’t enjoy reading and contemplating these sentences like this, we are simply very different people. A third, quieter feeling - if the universe was to communicate some message, who’s to say it would not choose this as a conduit? Perhaps I can take a leaf from Hilma Af Klint, who received instructions for her work in séances, and trust the meaning is intrinsic. Work in progress This system is an ongoing work in progress. Here are some things I have on my nebulous To Do List: Add weighting between common and uncommon words. If too many ‘fancy’ words are used, we stray a bit further into word-salad than I’d like. Words like thixotropic are fun to scatter around but (as in most writing) understandable words are usually more impactful. Add possessives In some contexts it would be great to talk about “your memory” instead of “a memory” or “our fears” instead of “fears”. Develop the system for labels Currently diagram labels use the noun list, but I plan to create a specific wordlist for them and/or to create short sentence structures for labels. More, more, more I’m really enjoying these outputs already but, like many generative systems, there are almost infinite ways in which I could expand and improve upon it. I’m continuing to add more sentence structures and more rules for increasingly complex outputs and to create opportunities to uncover deeper meanings. 😍 Enjoyed this article? I’d love it if you could give a boost on Twitter, thanks! 🎨 Have a look at my shop to see currently available outputs (more being added regularly!) ✨ 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.