Wishful Coding

I’m making a clay tablet library with media from around the 20th century, to preserve our culture for the ages and answer the question: What do we want the distant future to know about us?

A lot has happened since the first part:

• I renamed the project after learning about lithopedion
• I had a private lesson from ceramic artist Ilse Scholten
• I rewrote my text to gcode scripts
• I made a bunch of tablets and had them fired
• I started working towards a website for the project

Let’s start from the result and work back through the details. I made a bunch of clay tablets, had them fired by Ilse, and put them up for sale on my Etsy store. Here is a photo album to check out:

The reason it took so long to get the second update out is that I wanted to build a proper website with the concept, motivation, tutorials, a gallery, and a webshop. But as a suprpise to no one that’s quite a big project on its own, so I finally decided to write another update on my blog meanwhile.

The first key element to the new proccess is my newfound gcode swiss army knife: vpype. With vpype-gcode turning an SVG or text file into gcode is a one-liner, you just need a config file for your CNC and a few command-line flags.

vpype --config vpype.toml pagesize a5 text --position 1cm 1cm --wrap 12.5cm --size 22pt --hyphenate en --justify "$RANDOM_PAGE_TEXT" linemerge show gwrite --profile cnc random.gcode

But the biggest change was in the preparation of the clay slab itself. I abandoned my failing attempts at making a mold, and followed Ilse’s advice to roll the clay between strips of wood.

Tutorial

Materials needed:

• clay (0.2mm chamotte)
• clay wire cutter
• clay rib
• dough roller
• plasterboard
• hardwood strips (5mm to 10mm thick)
• some old bedsheet
• knife

To make a clay tablet you obviously need clay. It is important that the clay contains chamotte, which makes it less likely to explode in the oven. It’s also nice if the chamotte is small to get smooth writing. Clay with 0.2mm chamotte has worked the best for me.

We need a very flat surface, we’re aiming for sub milimeter precision to get consistent writing. Plasterboard is the surface that Ilse recommended, which has worked well for me. (unlike wood which will warp) I cut off roughly square sheets and taped the edges so we can safely move the drying tablets around.

It is very important to work on top of a smooth non-strechy cloth. I use a cut up cotton bedsheet. This allows us to flip the tablet over, inspect it for air bubbles, and prevents it from sticking to the plasterboard and warping while drying.

Now we can get to work. Cut off a piece of clay with a wire cutter, place it on the cloth betweent the wood strips, and use the dough roller to flatten it out. If you’re reusing scraps from a pervious tablet, first knead the clay into a ball, while making sure not to knead any air bubbles.

After rolling it flat we can cut off the excess clay with a knife. I use a folded piece of paper as a reference. Then take the rib and smooth out the surface, making it nice and shiny.

An important step at this point is to slightly lift the fabric, bending the tablet. If there are any air bubbles they will show up as little blisters. Poke them with a knife and flatten the tablet again.

Now cover the tablet with a cloth and flip it over, taking care not to leave fingerprints. Then take the rib and smooth the other side. Then flip it to whichever side looks nicer to become the front.

With my current process I put the entire board with the wet clay tablet right under the CNC. I give it a final roll with the dough roller because clay has a little bit of memory. Then I zero the CNC on the wood strip to get the correct height without leaving a mark. For the CNC bit I actually use a thick needle in a 2mm chuck at 0 RPM, I found that the stationary sharp point produces the finest writing in the wet clay.

A sneak peak at my current experiments is that I’m trying out what happens if you let the clay dry a little bit. Maybe there is a sweet spot where you can CNC it without accumulating or chipping, but I’ve not yet found it. I’m also experimenting with V-carving to be able to engrave more complicated graphics such as mathematical equations. My current goal is to engrave Maxwell equations on a tablet, so that’s a whole new can of worms.

I built my own electro-mechanical music instrument by combining ideas from some of the coolest instruments I know of:

A theremin is an electronic instrument that you play by moving your hands in the air. It uses an analog circuit with two tuned oscillators, one of which is modulated by the antenna impedance which is perturbed by the presence of your body in the near field. The slight frequency differences are fed into a mixer to produce an audible frequency.

A singing bowl is a very old insturment that is usually played by rotating a suede covered mallet around its outside rim. The stick-slip motion of the mallet excites vibration modes of which the nodes are pushed around by the mallet. Some more experimental musicians also play singing bowls by drawing a violin bow across the rim.

A hurdy-gurdy is a string instrument, which uses a hand-cranked wheel with rosin on it rather than a bow. It also has other unique features like drone strings and a keyboard on the neck.

So here is the idea: what if you used a theremin to drive a hurdy-gurdy wheel and use that to play a singing bowl? Magic theremin singing bowl!

For the theremin I built myself a copy of the Thierrymin (using J113 jfets), which I fed into a comparator, stepper motor driver, and stepper motor. From there the only things I had to tweak were a few resistors to add a little hysteresis, and I played around with the microstepping pins to change the speed of the stepper motor. Here is a rough schematic:

That was the easy part. Then I did a bunch of experiments with different types of wheels. I tried rosin, suede, wood, plastic. I tried to spin the wheel on a static bowl, or to spin the bowl against a static baton. It kind of worked, but nothing worked quite the way I wanted it. And then life got rather busy and the project sat dormant for a while. So that’s when I decided to just write a blogpost with my progress and shelve the project. Maybe I’ll get back to it one day, or inspire someone else.

The other day I was helping my brother with the second version of his performance installation DEMARRAGE, which involves serving a web page from an ESP32 that displays the energy produced by two dynamo bikes.

For this page we wanted a simple gauge, so I figured a solution would be an internet search away. But all the examples I found seemed really complicated, with verbose markup, opaque CSS, and sometimes an entire JS library. So I decidede to make my own.

My goals were

• Very minimal HTML without any extra dummy elements.
• CSS that is easy to understand and modify.
• Easy to update the value from JS.
• A gauge of 270° rather than a semi-circle.
• (browser compat was not a goal)

The HTML is as simple as it gets, just a div with custom properties and the textual value.

<div class="gauge" style="--value:0.3; font-size:2rem;">30%</div>

Conceptually, the CSS isn’t very complicated either.

• set the size of the gauge div
• set a border-radius to make a circle
• draw a conic-gradiant to make a pie-chart
• draw a radial-gradient to cut out the center
• center the text with text-align and line-height

The code CSS makes use of calc and var, primarily to adjust the conic-gradient angle based on a custom property, but also to parameterize the dimensions of the gauge. This means you can override --size and friends to style the gauge without changing hardcoded values.

.gauge {
  --size: 200px;
  --cutout: 50%;
  --color: red;
  --background: white;
  width:var(--size);
  height:var(--size);
  border-radius:calc(var(--size) / 2);
  background:
    radial-gradient(
        var(--background) 0 var(--cutout),
        transparent var(--cutout) 100%),
    conic-gradient(from -135deg, 
        var(--color) calc(270deg*var(--value)),
        grey calc(270deg*var(--value)) 270deg, 
        transparent 270deg);
  text-align: center;
  line-height: var(--size);
}

The JavaScript for changing the gauge value is pretty simple too, given some gauge DOM element el you can change the gauge value and text content by simply doing

el.style.setProperty("--value", 0.8)
el.innerHTML = "80%"

Below is a codepen to play with the code. I hope it’s useful to someone.

See the Pen Pure CSS gauge by Pepijn de Vos (@pepijndevos) on CodePen.

After a bit of chatting on the Recurse Center Zulip, I came up with the following alternative gradients that provide a 3D effect or that goes from red to orange to green. The 3D one works by adding a transparent black gradient to the radial part. The colourful one works by making a fixed backdrop and a transparent-grey gradient on top that reveals the underlying one.

  background:
    conic-gradient(from -135deg,
      transparent 270deg,
      white 270deg),
    radial-gradient(
      var(--background) 0 var(--cutout),
      #0002 calc(var(--cutout)),
      #0000 calc(var(--cutout) + 15px),
      #0002 calc(var(--cutout) + 30px),
      #0000 calc(var(--cutout) + 30px) 100%),
    conic-gradient(from -135deg,
      var(--color) calc(270deg*var(--value)),
      grey calc(270deg*var(--value)) 270deg,
      transparent 270deg);

  background:
    radial-gradient(
      var(--background) 0 var(--cutout),
      transparent var(--cutout) 100%),
    conic-gradient(from -135deg,
      transparent calc(270deg*var(--value)),
      grey calc(270deg*var(--value)) 270deg,
      transparent 270deg),
    conic-gradient(from -135deg,
      red 0,
      orange 135deg,
      lime 270deg,
      transparent 270deg);