Somē's Blog

Atomic Counters in OpenFrameworks

Sat, 27 Mar 2021 00:00:00 GMT

Since OpenGL 4.2, atomic counters have been a core feature. They help solve a variety of problems, like counting the number of red pixels in a fragment shader or acting as a form of shared memory that can be altered by shaders.

The use case I’m interested in is to create a particle system using compute shaders. This means that I need to keep track of the number of particles that are alive or dead at any given time. To do that in the GPU, I can use atomic counters.

Looking online, there were only a handful of tutorials that taught how to use atomic counters in OpenFrameworks like this one. But it required the use of the verbose OpenGL api. This writer even says that OpenFrameworks doesn’t have an API for it. But as I found out, there is! This article is just a short and sweet walk through on how to set that up.

Setting up the buffers

There is only one data type used with atomic counters and that is atomic_uint . The data type that maps to this is GLuint. So we need to create a GLuint vector of size 1.

vector<GLuint> counter;  
counter.resize(1);

The reason we’re using a vector is because OpenFrameworks’ ofBufferObject class allows us to allocate a buffer with the data itself. So let’s create an ofBufferObject and allocate it. After allocating it, we bind it, telling OpenGL that it is an atomic counter buffer at the binding point 0.

ofBufferObject counterBuffer;  
counterBuffer.allocate(counter, GL_DYNAMIC_DRAW);  
counterBuffer.bindBase(GL_ATOMIC_COUNTER_BUFFER, 0);

Setting up the shader

I’m going to make a particle system, so I will be using compute shaders. The setup looks like this:

ofShader compute;  
compute.setupShaderFromFile(GL_COMPUTE_SHADER, "shader.comp");  
compute.linkProgram();

For this article, I’m making a fake particle system with 69 particles.

compute.begin();  
compute.dispatchCompute(69,1,1);  
compute.end();

Writing the shader

Since we bound the atomic counter buffer to the binding point 0 earlier, we can access it in the shader. To access data at binding points, we can use the layout qualifier in GLSL. One thing to note is that the atomic counter type is opaque. This means that we need to declare it as a uniform in the shader.

After doing this, we increment the counter. We can only use special functions for the atomic counter. A full list is found here.

// fragment shader

layout(binding = 0) uniform atomic_uint counter;  
layout(local_size_x = 1, local_size_y = 1, local_size_z = 1) in;
void main(){  
    atomicCounterIncrement(counter);  
}

This is our fake particle.

Reading the data from ofBufferObject

For debugging, we might want to check the counter in our host application. Since we created 69 particles, we expect that the counter reads 69 since we incremented it 69 times.

There are many ways of reading data from an ofBufferObject, but the easiest way I’ve found is this:

GLuint result[1];  
glGetNamedBufferSubData(counterBuffer.getId(), 0, sizeof(GLuint), result);

The method glGetNamedBufferSubData loads the data from the GPU into RAM. Since we only have a buffer with a single unsigned integer (4 bytes), this shouldn’t affect our performance. But if you’re reading a lot of data, this can bottleneck your application!

Anyways, the method gives you a pointer to the data. I’ve found that initializing the output data as an array instead of pointer works best. After calling the method, we can read the data with a simple cout << result[0] << endl;. The output should be 69.

Summary

That’s it for atomic counters! This is a simple way to get atomic counters working without resorting to the verbose OpenGL API. I hope this has helped!

The Best String Compression in JavaScript

Mon, 22 May 2023 00:00:00 GMT

edit: 23.05.22 - add benchmarks of gzip, zlib and deflate via wasm-flate

Lately, I needed to find a decent algorithm to compress strings in JavaScript so that I could encode it as a URL param. Since the strings to be encoded where p5 sketches that ran in the p5.cljs web editor, it was important that the compressed string was short enough to enable longer sketches to be written.

The algorithms

After some searching on the web, I found some algorithms that I could use for this purpose. These are:

u-lzss - an algorithm created by Google
lz-string - an LZ-compression based algorithm
lzw - another algorithm also based on LZ-compression
gzip - this, and the next two algorithms, are a part of wasm-flate
zlib
deflate

If you don't know what LZ compression is, well, I confess ... neither do I. What I noticed was that LZ-based compression is rather ubiquitous.

Hiccups

There were many more compression algorithms that I could find for JavaScript. However, many of them were either only for Node.js, using the Buffer api, or just didn't work. For algorithms using the Buffer api, wasm implementations are a godsend.

The benchmark

Since the only thing that mattered to me was the resulting base64 string at the end of the compression process, the benchmarks I ran only measured the length of the resulting string. The compression process looks like this:

compress the string using the algorithm
encode the resulting string as a Uint8Array
convert this the Uint8Array to base64

I the following string sources to test the algorithms.

sketch - an example sketch for the p5.cljs web editor. Lines: 42.
simplexNoise - a GLSL snippet for 4D simplex noise. Lines: 92.
quil - a part of the Quil source code. Lines: 191.
triangle - a JS wrapper for the C triangulation library triangle. Lines: 391.
modele - a part of Open Music's source code. Lines: 588.

Since triangle contained template literals, I had to modify the source to escape the backticks and $.

The results

character count

	sketch	simplex noise	quil	triangle	modele
no compression	1320	2936	7745	9112	23766
Base64	1760	3916	10328	12152	31688
u-lzss	1276	2768	5572	5224	15980
lz-string	1100	2244	4444	4876	12292
LZW	1404	2968	6096	6936	19100
GZIP	864	1708	3196	2808	7776
ZLIB	848	1692	3180	2792	7760
DEFLATE	840	1684	3172	2784	7752

ratio

	sketch	simplex noise	quil	triangle	modele
no compression	100%	100%	100%	100%	100%
Base64	133.33%	133.37%	133.35%	133.33%	133.33%
u-lzss	96.66%	94.27%	71.94%	57.33%	67.23%
lz-string	83.33%	76.43%	57.37%	53.51%	51.72%
LZW	106.36%	101.08%	78.70%	76.11%	80.36%
GZIP	65.45%	58.17%	41.26%	30.81%	32.71%
ZLIB	64.24%	57.62%	41.05%	30.64%	32.65%
DEFLATE	63.63%	57.35%	40.95%	30.55%	32.61%

The base 64 conversion of the string always expanded the length. This is just how base64 works.

From this mini-benchmark, we see that the deflate algorithm performed the best, reaching almost a compression ratio of around 30% for the largest source text. That said, gzip, zlib and deflate have almost the same results.

For all three algorithms that were tested, the compression ratio improved as the length of the source string increased. But beyond a certain size, it seems to go back down.

Reversibility

	sketch	simplex noise	quil	triangle	modele
Base64	✅	✅	✅	✅	✅
u-lzss	✅	✅	❌	❌	❌
lz-string	✅	✅	✅	✅	✅
LZW	✅	✅	✅	✅	✅
GZIP	✅	✅	✅	✅	✅
ZLIB	✅	✅	✅	✅	✅
DEFLATE	✅	✅	✅	✅	✅

Testing the reversibility of the algorithms, I was surprised to see that Google's u-lzss wasn't 100% reversible. For longer source strings, the decompressed string contained corrupted and malformed strings towards the end of the file.

Snippet of original string

class TriangulateIO {
    static get LENGTH() { return 23; }
    constructor(props = {}) {

Malformed output of u-lzss

lass TangleuleMoIO
cstr ic         etTy LENGTH({
eturn nu23; }   const tctor =(prop= pt{}{

Conclusion

Compression is probably better done elsewhere than a browser environment. But sometimes you just need to have a handy compression tool, like in the p5.cljs editor, which shares sketches by storing them as a url param instead of in a server somewhere. In this situation, I'll be choosing deflate for my use case.

If you want to checkout the benchmark, it's on github. Also, I don't have a deep understanding of compression and maybe missing out on something. If you know better, do reach out on my socials or email!

How to brick (and prevent bricking) an STM8

Mon, 03 Nov 2025 00:00:00 GMT

There's an option bit on the STM8S001J3 that, when enabled without precaution, bricks the chip.

The Device

The STM8S001J3 is one of the cheapest 8-bit microcontroller currently on the market. I bought a reel of 10 for 0.60€ a piece. It's a serious ATTINY85 alternative, but you'll need a SOP-8 adapter.

The STM8S has a few disadvantages. It has 5 usable pins instead of the usual 6 for 8-pinned chips. It doesn't have GCC support. It has no external reset pin. It uses the SWIM protocol.

It's also easy to brick an STM8S if you're careless.

The Brick - Enabling the TIM2_CH1 on STM8S

For one reason or another, you may need a timer. Let's say you picked TIM2_CH1. TIM2_CH1 is the alternate function of pin PC5. To enable TIM2_CH1, the AFR0 bit must be set.

Here's the problem. Setting the option bit AFR0 also remaps pin PC6 to its alternate function. The pin PC6 is physically the same as SWIM, the pin used to program the chip. With the SWIM pin now overriden, the chip is no longer programmable. Since the STM8S does not have an external reset pin, this change is permanent.

In this state, flashing the STM8S returns SWIM error 0x04. This means the chip is bricked.

The Method

The official recommendation to prevent this from happening is surprisingly straightforward. The application note suggests adding a 5 second delay at the beginning of the firmware before assigning other functions to the SWIM pin.[^1]

[^1]:Application note AN5047

Creative Coding with Circles

Fri, 30 Sep 2022 00:00:00 GMT

This article was originally published here.

Right around the beginning of May, in the last few days of April, I began learning OpenRNDR. As a way to learn the framework, the first things I tried to code were circles. And lots of them! I coded circles in such profundity as I’ve never had in my life.

With that impulse, I found myself coding every single day and most of the work I produced involved circles. I would like to share what I found with you!

Trails

By varying the size and the position of the circle, then drawing it as it moves, taking care not to erase its path, the outcome is something that resembles pulled candy. The animation at the beginning of the article was created using this technique.

You can always store previous positions in an array and then continue to vary the size and color as new circles get drawn. You end up with something funkier!

Another technique is to have multiple trails being drawn at the same time. In the animation above, it looks like the camera is panning, following the pulsing circles. But it actually isn’t!

The circles calculates its size based on the size of the circle above it. In other words, the radii of the circles are propagated down the circle stack. It’s a technique that artist Zach Lieberman — who I absolutely revere — uses. By doing so, you don’t end up with a gigantic array of circles and only have to deal with a finite number of circles.

Soddy Circles

Please don’t ask me who coined the term Soddy Circles. But let me explain it anyways. Given three mutually tangent circles — that is, three circles touching each other — a soddy circle is a circle that is tangent to all three circles at the same time.

The construction of soddy circles begins with the construction of three mutually tangent circles! Given three arbitrary points, you can always construct three circles such that they are mutually tangent and where they don’t contain one another.

There are a algebraic methods to solve this problem, but since my math is bad, I opted for the geometric method. The blue lines you see above are the intermediate construction geometries that you need to first draw in order to find the solution.

Working on this problem felt like I was back in primary school, with a compass, ruler and a piece of paper, working out what I could and couldn’t draw.

With that problem solved, it’s now time to find the soddy circles! You could read up about it before hand, but in trying to solve this, I discovered a property about soddy circles that freaked me out. It turns out, given the constraints, you could always find an inner soddy circle. In fact, the previous geometric constructions help you find it!

However, there isn’t a clear formula for finding the outer soddy circle. Logically, I thought that if there could always be an inner circle, then there should always be an outer circle! But this assumption is wrong.

While there can always be a larger circle mutually tangent to all three, there are times where it overlaps and thus negates the solution. Finding this out was pretty neat but it wasn’t really artistic…yet.

It starts to look better with a little color and a trailing effect! The trailing effect is the very same technique as the one mentioned in this article.

Adding some transparency and shortening the trails as new ones are drawn gives a more interesting result.

And lastly, I added some interaction. If you’d like to play with it, click here!

Trees

One technique I explored with circles was the idea of trees. I formulated the problem this way:

Start out with a circle in the center
Spawn a circle that doesn’t intersect or contain another existing circle
Repeat until the screen is filled

I animated this to solve one step of the problem per frame and coded up my own tree structure to store the relationships. Every time a circle is spawned, it stores a reference to the circle it is tangent to and vice versa.

Varying the size gives you patterns with different qualities. Drawing the lines between the circles shows you a root like structure.

Again, combining this circle tree technique, I can now draw a circle trail to show the relationship between the circles!

I wrote some code to traverse my circle tree so that I could draw a pulsing trail.

It’s not obvious in this highly compressed gif, but I added some post processing — from within OpenRNDR itself — to lend some pizazz to the final output. Some bloom goes a long way!

Doing Poisson fill on it yields satisfyingly smooth gradients. Click the image to see the original one on Instagram as GIF compression kills it!

Other Techniques

Here are some other circular ideas I tried out.

Spirograph

Another idea that took me back to my primary school days was the spirograph. One of those mathematical drawing kits where you traced the path of a smaller circle rolling within a larger circle.

Fortunately for creative coders, we don’t have to simulate everything so that it represents physical reality! You can tweak how fast the inner circle rotates around its own center as well as how fast it rotates around the larger circle. Varying this yields different patterns. In fact, I made an interactive version where you can do exactly just that!

Physics

I have never really explored physics in creative coding before so I decided to try my hand at it!

What you see at your left is a bunch of circles whose radii vary over time. They are all trying to chase the moving dot but they get pushed around by each other as they do.

Doing this simulation, I noticed something. The circles naturally form some kind of local optimum for packing themselves, with the smaller circles always somewhat in the interior.

As usual, I always try to see if I can iterate an idea and combine techniques I’ve already developed. An interactive version of these can be found here.

"Always be iterating."

Zach Lieberman’s 2017 Motto

Another physics technique was to use spring forces!

You can manually create a circle mesh and then connecting all the vertices with a spring.

By varying the spring’s stiffness and damping, you alter the behavior of the circle significantly.

For the interactive version, click here.

Vertex Transformations

This technique is a bit niche, but it’s based on the way the graphics card draws things on the screen — specifically, the way OpenGL draws things on the screen.

Without, getting too much into detail, you can feed OpenGL a bunch of vertices, tell it to draw a circle and it will draw a circle. But why do this manually when you can just circle() in any good creative coding framework?

The answer: vertex attributes.

Vertices aren’t just point on a screen. They contain data such as normals, texture coordinates and color. By manually feeding the data, you can get OpenGL to do stuff for you that normally would be too tedious to do yourself.

One such thing would be gradients!

The interactive version can be found here.

Webbing

Another reason to think in vertices is webbing!

By defining my circles as a set of vertices, I have access to these vertices. I can do maths over them. I can iterate over each vertice and check how close they are to the vertices of other circles. If they are near enough, I draw line.

Dubin Paths

Dubin paths are a specific kind of curve. Long story short, they can be defined with circles.

The algorithm for this is simple:

Trace along the circumference of a circle
At an arbitrary point, spawn a circle that is tangent to the current one
Repeat

Summary

Thanks for reading this article all the way until the end! I hope some of these techniques inspired you somewhat. I encourage you to give it a go and try it out yourself. If you create something you feel worth sharing, reach out to me on Instagram or Twitter!

It can’t be said enough how important it is to iterate and look for combinations. There are quite a few artists doing daily art—Alexis Andre, Zach Lieberman, Saskia Freeke, Erika Anderson, Jason Ting, just to name a few — and they all do just that: iterate.

Creative Coding with Generative Colors in 3 Levels

Fri, 07 Oct 2022 00:00:00 GMT

This article was first published in a medium article.

Prelude

Alright, I’ll be honest, I’m not an expert. But I’m no spring chicken either. Still, having started creative coding in 2019, my understanding of color hasn’t grown much.

With so many generative techniques out there like jumpflooding, cellular automata, river erosion, mold slime simulation and so on, it’s easy getting caught up in the challenges of implementing them, getting blown away by the super ultra mega cool visuals that they create and forgetting about color, if not outright avoiding it.

In Tim Rodenbröker’s short blog post ‘Thoughts about Color’, he admits to using his comfort palette of black and white because he feels that the color systems he created were cold and mechanical.

"I have thought a lot about the subject of color during my work as a designer and also during the development of my courses, although I have always intuitively avoided any kind of colorfulness."

Tim Rodenbröker

I share his views too. At least until I came across Quayola’s Transient, a work whose stunning visual effects isn’t just attributed to its crazy algorithms, but to beautiful interplay of colors. Since then, I’ve thought about the work everyday, especially those colors, which have much in common with impressionistic paintings.

Intro

This article is somewhat of a documentation of the journey I’ve made thus far, but also a brief overview of the generative color techniques. I’ve split these techniques up into 3 levels. The word ‘level’ has other connotations too. So to clear things up, I don’t mean that the next level is always better than the last. I draw on the analogy of buildings, where the next level is built on top of the previous.

Level 1: Randomness

Early on in my creative code journey, I learnt that colors on the computer screen are represented by three values: red, green and blue. The next thing I learnt about colors is to randomize these values!

It’s the easiest way to come up with an assortment of colors. You can call a random color function literally a thousand times and you will get a thousand colors. But these thousand colors don’t have anything to do with each other, both visually and conceptually. They’re just … random.

Random RGB does have its merits though. Owing to its ease of use, it’s the technique I most often fallback to when debugging. When multiple objects have wildly contrasting colors, their form is more obvious and has an in-your-face vibe to it. When my school teachers said ‘Watch the colorful language!’ (in the context of me swearing in primary school), THIS is the colorful they are talking about.

It’s not that difficult to add some context to random colors though. Instead of using the RGB color space, we can use the HSB colorspace. By restricting the ranges of the random values we plug into the hue, saturation and brightness channels, the colors will be closer to each other in visual proximity. You can get different shades of the same hue by only varying saturation and brightness, or get analogous colors by only varying the hue a moderate amount.

The advantage of using random colors is the ease and variation that it creates. However, the disadvantage, which I think outweighs its advantage, is the lack of control over the values. You’re at the mercy of the RNG gods. You could mitigate this by choosing a Gaussian distribution (bell curve) so that you know which values are more likely to appear. But in the end, there’s no way to map a random value to something like time or position in space.

Level 2: Procedural

Phase Shifting

After a while of using black/white and random color schemes, I came across this article by Inigo Quilez. In it, he describes a technique to procedurally generate colors. He didn’t name the technique, but I believe it’s called phase shifting.

The colors generated by this technique are limited, depending on the parameters. You can generate the rainbow, but you can also generate palettes of complementary colors or monochromatic colors by tweaking the parameters.

When I want to reliably produce a color scheme that is coherent and aesthetically pleasing, I use this technique.

Other techniques: Sampling and Displacement

This isn’t a technique to generate colors per se, but it’s a delightful way of mixing up a visually attractive blend of colors. Below is an example where feedback displacement of the RGB channels in a fragment shader creates crazy colors.

Another way to do this is to use a source video and have the underlying video data displace the colors.

The colors stay in the same palette as the source video, so much of the result depends on the original composition of the video. Practicing this technique has led to me practicing other endeavors like videography and video editing.

Other techniques: Mapping

One more way of procedurally generating colors is to use mapping. For example, a trick I love to use, for example when I’m working with particles, is to map the angle of movement to the hue. The result is vibrant and funky:

Mapping is a powerful technique with the right combination of parameters and clever usage of color. My choice for using angles of movement and a hue mapping makes the result resemble a normal map. With imagination, these colors will be visually coherent and attractive and still preserve some internal logic.

Procedurally generating colors has saved me the footwork for doing the critical thinking and reflection. At the same time, it has helped me create easily beautiful color compositions with the help of a few parameters. Except for one thing.

I still don’t know how colors work together.

Level 3: Color Theory

I’ve come so far with procedurally generating colors, but it still hasn’t gotten me closer to understanding why Quayola’s Transient looks amazing (seriously, go see it if you haven’t by now).

I decided to revisit art class in primary school. I read up and watched videos on color theory. One concept is central to this: color harmonies. The idea that different colors can form different color harmonies based on their position on the color wheel wasn’t new to me, but it never occurred to me explore these combinations.

Until (there is always an until) I came across an addon for OpenFrameworks (the framework I use) called ofxColorPalette, which enabled me to explore these theoretical combinations. I wrote my own addon ofxSwatch to create palettes (it can create gradients too). With my addon, I created color tables, with multiple rows of different color harmonies to get a better grasp of color relationships.

It was such a simple idea! Just like there were multiplication tables to aid understanding the relationship of numbers, I could now make my own color tables to aid my understanding of colors. I was really pleased at this, because when I saw a color combination I liked, I could use that color to generate another color table. Now with two color tables, I could mix and match or even interpolate for a wide variety of tonally matching colors.

While it was still algorithmic and generative, I know had the choice to pick my own colors and not rely on the math. This basis of color selection was, to me, a more artistically satisfying choice.

What’s the next level ?

So far I’ve only written about how to generate this colors as general approaches. They’re all only techniques. To add to that, these techniques aren’t mutually exclusive. I could easily generate a color palette with color theory but then still resort to using randomness to select them.

There has to be some sort of overarching hierarchy.

One really good rule to follow (it comes from the world of design), is the 60–30–10 rule, where you use your primary colors 60% of the time, secondary colors 30% and accent colors 10%. The terms primary, secondary and accent refers to the color scheme, not color theory.

There are countless rules out there, I’m sure, but they all aim at balance. A proper balance of colors, in their usage and meaning, can lead to a more pleasing composition.

Color is subjective. We are all built different and grew up different. The way we see colors are different. For this reason alone, it’s safe to say that there are no right or wrong ways to use colors. It depends on the context.

The How/Why dilemma

Then there’s also the why. These techniques are only the how. It’s still important to think about the why. There is no way to avoid it. One way or another, we will have to face that colors mean different things in different cultures too. Color is cultural.

For example, red is such an auspicious color and black such an inauspicious one in Chinese culture, that I was forbidden to wear black clothes as a kid during auspicious events such as Chinese New Year or my friend’s granny’s 90th birthday.

Color is political too. In Myanmar, where a coup took place in February earlier this year, green is a hated color as it represents the military. Red, again, represents the NLD (National League for Democracy) party of Myanmar. Since the coup, the meaning of these colors have been heightened. It would be wrong to use the color green in a pro-democracy demonstration in Myanmar.

But these are not reasons to shy away from thinking about colors. Knowing not only the how, but also the why we use colors will bring more depth to our artistry and craft. The things we make will not be cool empty graphics, but will also be creations which mean something to ourselves and others.

Closing

I hope you could get something out of this article! Much of it is personal, but many of the things I’ve learnt has also been personal musing of other artists I respect and admire.

Free Continuous Deployment for Reagent Apps with Glitch

Sun, 18 Jun 2023 00:00:00 GMT

Edit (18.09.2025): There are now many ways to setup continuous deployment for some of the more niche stacks out there with the most widely used platforms like Netlify or Vercel. The information in this article is outdated.

So you have a Reagent application you want to deploy somewhere. Probably, you have experience deploying frontend applications on platforms like Vercel, Netlify or Render. You try this with your ClojureScript application and quickly find out that none of these platforms support building ClojureScript applications, because the build environment lacks Java.

This article walks you through creating a simple continuous deployment setup using Github Actions and Glitch.

Setting up a Glitch project

Create or login to your Glitch account, then create a new 'glitch-hello-website' project. You should now have a simple static site project with an index.html, script.js and style.css.

Next, open up the Glitch project terminal and run this command:

git config receive.denyCurrentBranch updateInstead

This allows you to later push updates to your Glitch project. You only need to run this command once.

The Glitch Git repository

Your Glitch project has a Git repository which you can access. To find the URL of the repository, click 'tools' then 'Import and Export'. You should now see the URL. Take note of this URL for now. You will need this later when writing the Github Action.

Setting up Github Actions

Secrets

Since the Glitch Git URL is a private URL, you should create a repository secret. To set this up, navigate 'settings' -> 'Secrets and Variables' -> 'Actions' -> 'New repository secret'.

Action

Create a main.yml file in a directory .github/workflow/ in your project directory. In main.yml, use the following code.

# main.yml

# the name of the action
name: deploy

# when this action should be run
on: [push, workflow_dispatch]

# the jobs this action contains
jobs:

  # the name of the job as a key
  deploy:

    # the name of the job as a string
    name: Deploy to Glitch

    # the image that is used to run this job
    runs-on: ubuntu-latest

    # the instructions this job will execute
    steps:

        # checks out of the main branch and cd into the directory
      - name: Checkout Repo
        uses: actions/checkout@v3

        # sets up Java since Clojure/Script requires Java
      - name: Setup Java
        uses: actions/setup-java@v3
        with:
          distribution: 'adopt'
          java-version: 17

        # sets up Node since Shadow CLJS requires node
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: lts/hydrogen
          cache: 'npm'

        # install node dependencies
      - name: Install Dependencies
        run: npm install

        # Now all my project dependencies are installed,
        # it is time to build the project. You should customize
        # these steps to suit your project

        # Build project
      - name: Build project
        run: npx shadow-cljs release app

        # Here you clone the Glitch repo and reference the
        # URL you saved as a repository secret
      - name: Clone Glitch Repo
        run: git clone ${{ secrets.GLITCH_REPO }}

        # Now you need to copy your assets, replacing
        # the files in the Glitch repo. Make sure to copy
        # all the assets that you need for a working application.
        # Once done, commit and push your changes
      - name: Update and push changes
        run: |
          cd project 
          git config user.email "YOUR@EMAIL"
          git config user.name "YOUR NAME"
          git pull --rebase
          cp ../public/index.html .
          cp ../public/main.js .
          cp ../public/style.css .
          git add .
          git commit -m "build and deploy"
          git push

Take Away

Now whenever you push changes to your repository, this action will run, build your project and push the public assets to your Glitch repository! I use this setup for my project Mayfly.

Emulating I2S on STM32F103

Sat, 08 Nov 2025 00:00:00 GMT

I like building audio and music related things. Recently, I've acquired an INMP441 as an addition to my slowly growing rack of electrical and digital components. The INMP441 is cheap digital microphone that uses transmits data via I2S.

With this and an STM32F103C8, I set out to make an LED react to audio as a "Hello, World!" of sorts.

Method

I2S is not available on low and medium density STM32 devices[^1], but is easily emulated, as AN5086 demonstrates. With the INMP411, which transmits a 32-bit dataframe comprising 24-bits of audio data, the challenge is aligning the data as it comes.

Here's the approach:

Configure SPI in receive-only master mode
Configure the DMA to continuously read the SPI Data Register
Use SCK to trigger a timer
Use another channel on the same timer to generate the WS signal
Process the DMA buffer in halves

Step 1 - Configure SPI in receive-only master mode

In receive-only master mode (RXONLY = 1, MSTR = 1), SCK generation begins as soon as SPE=1[^2]. The SPI transmitter is also disabled. This is handy as there is 1 GPIO pin less to configure and trasmission doesn't have to be handled.

SPI2->CR1 = SPI_CR1_MSTR |              /* Master mode */
            SPI_CR1_SSM | SPI_CR1_SSI | /* Force NSS high */
            SPI_CR1_DFF |               /* 16-bit Dataframe */
            SPI_CR1_RXONLY |            /* Receive-only mode */
            (4 << SPI_CR1_BR_Pos);      /* SPI SCK Prescaler: 32 */
SPI2->CR2 = SPI_CR2_RXDMAEN;            /* enable DMA for RX */

SCK Frequency

I've chosen SPI2 here because the pins are physically closer to where the microphone is on the breadboard. SPI2 uses the APB1 clock, which has been configured to 36MHz. The prescaler is 32, giving an SCK frequency of 1.125Mhz.

Step 2 - Configuring the DMA

The DMA is configured in circular mode to continuously transfer data from SPI_DR to rx_buf, the buffer that is used later for processing.

volatile uint16_t rx_buf[RX_BUF_LEN] = {0};
// ...
DMA1_Channel4->CPAR = (uint32_t)&SPI2->DR; /* read from SPI_DR */
DMA1_Channel4->CMAR = (uint32_t)rx_buf;    /* write to rx_buf */
DMA1_Channel4->CNDTR = RX_BUF_LEN;
DMA1_Channel4->CCR = DMA_CCR_MINC |    /* Increment rx_buf index */
                     DMA_CCR_CIRC |    /* Circular mode */
                     DMA_CCR_PL_1 |    /* High priority */
                     DMA_CCR_PSIZE_0 | /* 16-bit Peripheral */
                     DMA_CCR_MSIZE_0 | /* 16-bit Memory */
                     DMA_CCR_TCIE | /* Enable transfer complete interrupt */
                     DMA_CCR_HTIE | /* Enable half transfer interrupt */
                     DMA_CCR_EN;    /* Enable DMA */

NVIC_EnableIRQ(DMA1_Channel4_IRQn); /* Enable IRQ */
NVIC_SetPriority(DMA1_Channel4_IRQn, 1); /* Set IRQ priority */

The ISR sets status flags and returns.

void DMA1_Channel4_IRQHandler(void){
  uint32_t full_transfer_complete = DMA1->ISR & DMA_ISR_TCIF4;
  if(full_transfer_complete){
    DMA1->IFCR |= DMA_ISR_TCIF4;
    flags |= FLAGS_HALF_A_COMPLETE;
    return;
  }
  uint32_t half_transfer_complete = DMA1->ISR & DMA_ISR_HTIF4;
  if(half_transfer_complete){
    DMA1->IFCR |= DMA_ISR_HTIF4;
    flags |= FLAGS_HALF_B_COMPLETE;
    return;
  }
}

Step 3 - Configuring the timer to generate WS

The timer is configured to starts on the falling edge of SCK. The PWM signal that drives WS is inverted, starting low to send the left channel first.

#define WS_PERIOD 64     /*!< 64 SCK cycles for every stereo data-word */
#define WS_PRESCALER 64  /*!< Prescale TIM1 to the same frequency as SPI_SCK */
#define WS_DUTY_CYCLE 32 /*!< 50% duty cycle */
// ...
TIM1->ARR = WS_PERIOD - 1;
TIM1->PSC = WS_PRESCALER - 1;
TIM1->BDTR |= TIM_BDTR_MOE; /* TIM1 is an advance timer, this is needed to
                               enable output */
TIM1->SMCR |= (6 << TIM_SMCR_SMS_Pos) | /* Slave mode: Trigger */
              (6 << TIM_SMCR_TS_Pos);   /* Trigger source: TI2 */
TIM1->CCMR1 |= TIM_CCMR1_CC2S_0; /* Configure channel 2 as input and map to
                                    TI2 */
TIM1->CCER |= TIM_CCER_CC2P; /* Triggered by falling edge of input signal */
TIM1->CCMR2 |= (7 << TIM_CCMR2_OC3M_Pos) | /* PWM Mode 2 */
               TIM_CCMR2_OC3PE;            /* Enable preload */
TIM1->CCR3 = WS_DUTY_CYCLE;                /* comparator */
TIM1->CCER |= TIM_CCER_CC3E;               /* Enable capture/compare */
TIM1->EGR |= TIM_EGR_UG;                   /* Update registers */

Step 4 - Aligning and Processing the Data

void process_buffer(uint16_t start, uint16_t len) {
  static int32_t audio_buffer[AUDIO_BUF_LEN] = {0};
  uint32_t sum_squares = 0;
  for (uint16_t i = 0; i < len / 4; i++) { // 1
    uint16_t i0 = (i * 4) + start;
    uint16_t i1 = i0 + 1;
    uint16_t w0 = rx_buf[i0];
    uint16_t w1 = rx_buf[i1];
    uint32_t s = ((uint32_t)w0 << 16) | w1; // 2
    s = (s >> 6) & 0xFFFFFF; // 3
    if (s & 0x800000) { // 4
      s |= 0xFF000000;
    }
    audio_buffer[i] = (int32_t)s;
    sum_squares += (uint64_t)(audio_buffer[i] * audio_buffer[i]); // 5
  }

  uint32_t mean = sum_squares / AUDIO_BUF_LEN; // 6 
  uint32_t root_mean = mean >> 1; // 7
  TIM2->CCR2 = (uint16_t)(root_mean >> 8); // 8
}

(1) rx_buf is iterated over in groups of 4: 2 uint16_t pairs for the left channel and 2 for the right. The right channel is ignored.

(2) The pairs are ored together in a uint32_t. The data is not yet aligned.

Bit 23—the MSB—of the received 24-bit value ends up in bit 29 of the reconstructed value.

But wait! Why is the offset 2 when SD is supposed to have an offset of 1 with respect to WS? This timing chart shows what happens in the emulation.

a - When SCK starts, data is sampled on the leading edge. This corresponds to bit 31.
b - On the trailing edge of SCK, TI2 detects a falling edge. The timer is started and T1C3 starts generating WS.
c - INMP411 sends MSB 1 SCK period after WS is driven low. By this time, the DMA has already moved on to bit 30.
d - On the leading edge of the 3rd SCK, the MSB gets sampled. This corresponds to bit 29. This is why there is an extra SCK in the offset.

(3) To align the data, the value gets right shifted by 6 bits.

(4) The sign bit (bit 23) is checked. If it is 1, the top byte is set to all 1's to extend the sign and get a 32-bit signed integer.

(5-7) RMS is calculated.

(8) The RMS value is converted to a 16-bit value and used as the duty cycle for the LED's PWM.

Summary

This is all that is necessary to emulate I2S with SPI and a timer. The setup is straightforward, but aligning the data required careful consideration of where the MSB actually ended up in the data buffer.

👉 The full code to this example is in this Codeberg repository.

[^1]:Chapter 25.1, RM0008 [^2]:Chapter 25.3.5, RM0008

Fastest GPIO Read Speed on STM32F103 (Tight Loops vs DMA)

Thu, 06 Nov 2025 00:00:00 GMT

When I was building Lookshi—a portable mini logic analyzer—I asked myself: How fast can you read GPIO on the STM32F1?

I needed to figure out the maximum GPIO read speed on the STM32F103. I ran four benchmarks and measured the number of CPU cycles needed to perform 128 consecutive GPIO reads. This small experiment taught me quite a bit about the limitations of the STM32F103 but also the ins-and-outs of DMA.

Setup

I used the ARM Cortex-M3 DWT (data watchpoint trigger) cycle counter to measure how long it took for each method to perform the benchmark. The benchmarks were compiled with arm-none-eabi-gcc with -Os. The STM32F103 was clocked at 72MHz.

CoreDebug->DEMCR |= CoreDebug_DEMCR_TRCENA_Msk;
DWT->CYCCNT = 0;
DWT->CTRL |= DWT_CTRL_CYCCNTENA_Msk;

Benchmark 1: Tight-Loop GPIO Reads

To begin with, I wanted to know how fast it would be if I just read from GPIO in a simple for-loop.

volatile uint32_t dest[128] = {0};
uint32_t t0 = DWT->CYCCNT;
for(uint8_t i = 0; i < 128; ++i){
  dest[i] = GPIOA->IDR;
}
uint32_t t1 = DWT->CYCCNT;

Results

Total number of cycles: 1540
Cycles/read: 12.03
Effective read frequency: 5.98 Mhz

Reading GPIO in a tightloop allowed for reading speeds of just under 6 Mhz. That's quite low for a logic analyzer.

Side note: It's faster to use an unsigned 32-bit buffer than a 16-bit buffer because the processor performs an uxth instruction if we store IDR as a 16-bit value. This instruction throws away the top 16 bits.

Assembly

; setup
mov     r1, r4
ldr     r2, [r5, #4]
add.w   r4, r4, #1073741824
add.w   r4, r4, #67584
; read GPIOA->IDR
ldr     r0, [r4, #8]
; write buffer
str.w   r0, [r3, r1, lsl #2]
; loop exit condition check
adds    r1, #1
cmp     r1, #128
; exit loop
bne.n   8000320 <main+0x44>
; read DWT->CYCCNT
ldr     r3, [r5, #4]

Looking at the assembly, it's actually quite a fast operation. 4 instructions to setup the benchmark (loop and t0 assignment), 2 to read from GPIO and write to buffer, 2 to check the loop exit condition, 1 to exit the loop and 1 to store DWT->CYCCNT to t1.

APB2 Peripheral Access Latency

There are only 4 instructions per read, yet it takes 12 cycles to complete. I learned that this is because APB2 peripheral access takes quite a few cycles. To read from GPIO, the CPU has to cross AHB into APB2 to access the peripheral. Considering this, we're at the physical limit of the chip.

Benchmark 2: Tight Loop in RAM (RamFunc)

This is same loop, but placed in RAM to reduce possible flash wait states.

__attribute__ ((section(".RamFunc")))
static inline void read_gpioa(void){
  for(uint8_t i = 0; i < 128; ++i){
    dest[i] = GPIOA->IDR;
  }
}

Results

Total number of cycles: 1699
Cycles/read: 13.27
Effective read frequency: 5.42 Mhz

Surprisingly, this method took longer! Only 1.2 cycles more, but that's half a megahertz in performance. The assembly was even 1 instruction less. I'm not sure why this is the case, so if anyone knows, let me know too.

Benchmark 3: Timer-Triggered DMA Sampling

The previous 2 methods tried to read GPIO as fast as possible but there were 2 obvious problems. The first problem is that there was always 2 instructions of for-loop overhead. The second problem is that the sampling rate cannot be controlled.

A solution to this is to use the DMA triggered by a timer to directly transfer GPIOA->IDR to memory.

uint16_t dest[128] = {0};
// enable peripheral clocks
RCC->AHBENR |= RCC_AHBENR_DMA1EN;
RCC->APB2ENR |= RCC_APB2ENR_IOPAEN;
RCC->APB2ENR |= RCC_APB2ENR_TIM1EN;
// setup timer to trigger a DMA request on an update event
TIM1->ARR = 9;
TIM1->DIER |= TIM_DIER_UDE;
// setup DMA
DMA1_Channel5->CPAR = (uint32_t)&GPIOA->IDR;
DMA1_Channel5->CMAR = (uint32_t)dest;
DMA1_Channel5->CCR |= DMA_CCR_MINC |
                      DMA_CCR_PSIZE_0 |
                      DMA_CCR_MSIZE_0;
DMA1_Channel5->CNDTR = 128;
DMA1_Channel5->CCR |= DMA_CCR_EN;
// benchmark
uint32_t t0 = DWT->CYCCNT;
TIM1->CR1 |= TIM_CR1_CEN;
while(DMA1_Channel5->CNDTR > 0){
}
uint32_t t1 = DWT->CYCCNT;

Results

With this method, there's a new variable: the timer period. So this benchmark was ran with different timer periods.

Timer Frequency (MHz)	Timer Period	Total Cycles	Cycles/Read	Read Frequency (MHz)
6	12	1569	12.25	5.87
7.2	10	1314	10.26	7.07
12	6	1309	10.22	7.04
24	3	1306	10.2	7.05

Much faster. With DMA, the peak reading speed is 7.05 MHz. Still low if you're looking for an industrial logic analyzer, but I think it is good enough for hobbyists.

The DMA cannot be pushed to read faster than 10 cycles/read. Comparing the results with the previous 2 benchmarks, removing the for-loop overhead brings a full megahertz of performance.

Note that actual sampling rate with DMA is a couple of kilohertz behind the timer frequency. 16-bit/32-bit DMA sizes did not matter here.

Now the limit of how fast we can read from GPIO on an STM32F103 has really been reached.

Benchmark 4: DMA with Interrupt on Completion

Although unlikely, I wondered if using an interrupt instead of polling CNDTR would improve performance. There is atleast 10 cycles or more of latency associated with interrupts.

Results

Timer Frequency (MHz)	Timer Period	Total Cycles	Cycles/Read	Read Frequency (MHz)
6	12	1596	12.46	5.77
7.2	10	1340	10.46	6.88
12	6	1336	10.43	6.9
24	3	1333	10.47	6.91

Each run took longer exactly as expected, incurring 25~30 extra CPU cycles.

Wrapping up

As a beginner to embedded microcontroller programming, it's not easy to go from datasheet and reference manual stats ("This chip runs at 72MHZ!", "The formula for DMA service time is Ts = Ta + Trd + Twr!", ...) to a definitive conclusion of how fast things can really go. So I encourage those like me who do not yet have practical field experience to carry out these little benchmarks and experiments to test your hypotheses.

👉 The code for these benchmarks can be found in this Codeberg repository.

Learning ClojureScript with P5.js

Sun, 25 Dec 2022 00:00:00 GMT

It's December and you know what this means. T'is the season to learn new languages! Lately, I have been learning ClojureScript and have been having a blast creative coding with it. I think you should give it a try.

Who this tutorial is for

In order to follow this tutorial, you should be familiar with coding in P5 already. If you are, great! It will be a breeze to follow along. Let's get started setting up.

Please note that I am not an expert in ClojureScript. Still, I'd like to share this with you.

Setup

I've created a P5-CLJS template. Go ahead and clone the repo to your machine and follow the instructions on the README.md. Once the terminal shows Build completed, you can open localhost:3000. You should see a red screen. I recommend using VSCode with the plugin Calva. With this, we're now ready to code.

First steps

Our sketch is located in the file src/sketch.cljs. It looks like this:

(ns sketch
  (:require [goog.object :as g]
            [p5 :as p5]))

(defn setup[]
  (js/createCanvas js/window.innerWidth js/window.innerHeight))

(defn draw[]
  (js/background 255 0 0 ))

(doto js/window
  (g/set "setup" setup)
  (g/set "draw" draw))

It looks a lot like our familiar P5 sketch, with the setup and draw functions. Go ahead and try to change the background of the sketch! You can do so with this line:

(js/background 100 180 180)

Syntax

This line looks a lot different than Javascript. ClojureScript is a dialect of Lisp. You can compile it to Javascript so that you can run it in the browser.

Being a Lisp, everything is an expression and every expression is surrounded by parentheses.

(+ 420 69) is a valid expression but + (420 69) is not.

By now you would have noticed, or you may already even know, that the first item within the parentheses is a function. This syntax is called prefix notation. The operation or function which we want to use comes first in an expression. The syntax we are used to, like 1+1 is called infix notation.

JS Interop

You can call global Javascript functions from within Clojure by prefixing functions with js followed by a forward slash. For example: (js/console.log "Oi!") calls console.log("Oi!"). You'll find that you don't need the console logs, because (println "Oi!") does the same in ClojureScript.

Here's an article about JS Interop to find out more about how to call and use JS from within ClojureScript. For us, this would be enough to continue coding.

Rotating Rectangle

I've changed my sketch to look like this:

(defn setup []
  (js/createCanvas js/window.innerWidth js/window.innerHeight)
  (js/rectMode js/CENTER))

(defn draw []
  (js/background 0)
  (let [x (/ js/width 2)
        y (/ js/height 2)]
    (js/translate x y)
    (js/rotate (* js/frameCount 0.01))
    (js/fill 250 0 0)
    (js/rect 0 0 100 100)))

You should see a rotating square. Notice that whenever you change and save your code, the sketch updates immediately! It's not immediately apparent, but the state of your program remains. For example, frameCount continues incrementing, even when you update your code. Go ahead and print it to the console to see for yourself. This is a feature about ClojureScript I really love.

However, if you make changes to the setup function, you'll have to refresh the page manually. For code that executes only absolutely once (like creating the canvas), put this in setup. For code you'd like to execute once every time you change the sketch, just put it in global scope.

The `let` block

let is a special form. It's used when you want to have local variables. There are three parts to let. First is the let keyword itself, followed by bindings, and then the expressions you want to run.

(let [a 50 
      b 100]
  (+ a b)) 
;;yields 150

The bindings are put in square brackets and are variable-value pairs. Basically, in the example above, a takes the value of 50 and b 100. Once the bindings have been defined, you can use the variables in your expressions. Here is the official documentation for ClojureScript's let.

Tubes

Let's try this:

(defn draw []
  (js/background 0)
  (js/noStroke)
  (doseq [i (range (/ js/width 4))]
    (let [x (* i 4)
          y ( js/height 2)
          time (* js/frameCount 0.05)
          theta (+ (* i 0.05) time)
          r (* (+ (* (Math/sin theta) 0.5) 0.5) 255)]
      (js/fill r)
      (js/circle x y (+ r 50)))))

You should see a row of red circles growing towards the left. This is an example on how to use loops in ClojureScript

DoSeq

To do loops, we can use the doseq special block. Like let, it has three parts. It starts with the doseq keyword, followed by bindings in square brackets and then by the expressions to be evaluated/executed. However, the bindings here are a bit different. The value of the variable-value pairs needs to be a sequence or a collection. This simply means an array or a list of items. In the example above, our collection is (range (/ js/width 4)), which basically is an array with numbers from 0 until 1/4th of our screen's width. Go ahead and print it out in the console to see what it looks like!

Check out the official docs about DoSeq for more info.

Too many parentheses!

There was a really gnarly line in our last example, when we were calculating the radii of the circles. Three nested parentheses! Luckily, there's a feature in ClojureScript called threading (not to be confused with concurrency). If you're familiar with the command line, it's similar to piping! Let's take a look at what that looks like.

(-> theta 
    (Math/sin) 
    (* 0.5) 
    (+ 0.5) 
    (* 255))

The expression starts with ->, followed by our initial value theta. This gets plugged into the next expression (Math/sin). The output of this gets plugged into (* 0.5) and so on. This, to me, is really beautiful, because you can easily shuffle, insert and append operations if you need to without worrying about the parentheses or operation order.

Here's the official documentation to ClojureScript's ->.

State

At this point, we've been doing everything statelessly. We don't have any global variable which stores some data that we update. This is because ClojureScript is by default immutable. Every expression returns a new value and never modifies the values or variables you plug into it. This makes it really easy to reason about the logic of our programs.

However, this doesn't mean that ClojureScript cannot handle state. It does so with something called atoms. Here's a good article about using state and atoms in ClojureScript.

About our template

We've gone this far without really talking about the template that we are using. The build tool that we are using is ShadowCLJS. It basically acts like a code hot reloader. In my opinion, it's the best build tool to use if you use a lot of NPM packages.

In your sketch, you'll also see that it starts out with ns sketch, followed by a couple of requires. This declares the namespace of sketch for the entire file and pulls in the dependencies that we need: p5 and goog.object.

Goog.object is a module from Google Closure's library for working with JS objects. Here's the API for it. Google Closure library is incidentally a great library with many other modules for the DOM, maths and more.

At the bottom of our sketch file, you'll see this code block:

(doto js/window
  (g/set "setup" setup)
  (g/set "draw" draw))

This just sets the global variables of "setup" and "draw" to our setup and draw functions, which is how P5 works. The syntax may look a bit strange, since it is using the doto special form.

(g/set js/window "setup" setup)
(g/set js/window "draw" draw)

This is exactly the same as above. Since js/window gets called twice, we use the doto special form to reduce this. You may later want to add your keyPressed, mouseClicked, windowResized functions. Using the doto special form means you don't have to type js/window each time.

What next?

This is it for this tutorial! It may seem like we covered only a little, but actually, it's quite a lot. ClojureScript, being a Lisp, has very simple syntax. This tutorial covers everything you might need to use for basic sketches.

If you enjoyed this tutorial, I recommend going through a more thorough document about the ins and outs of ClojureScript. This online ebook is a great resource.

It's also worth trying out different tutorials using different build tools. For me though, this can be rather confusing. I stuck to learning about shadow-cljs instead, which has been sufficient for my needs so far.

With #Genuary2023 just around the corner, I challenge you to follow along in ClojureScript!

One of my favorite texts

Thu, 16 Apr 2026 00:00:00 GMT

The Trees by Philip Larkin[^1] was one of my favorite texts when I was doing A-Levels literature and it remains one of my favorite poems.

It has straight forward structure: three four-lined stanzas, each with eight syllables, with one exception. Reading it over and over again, the repetitive syllabic structure, the verby lines and sparse use of adjectives make it memorable.

In particular, the image of trees as "unresting castles" is deeply ingrained in my mind. When I am in Brunei, Malaysia or China, the thick lush forests leave a deep impression on me. I look upon the masses of green and feel drawn to their opaqueness.

Their leaves form opaque walls, enshadowing the undergrowth. On windy days, they behave like oceans, their branches undulating. On hot days after rain, mist rise out of them like a steaming basket. But every day, they are unrevealing, contradicting Larkin's trees by remaining green.

It was only after moving to Germany that I felt the weight of "Their greenness is a kind of grief". Every spring this grief grows on me in a dimension I cannot explain. It reminds me of some kind of unescapable Samsara-like cycle, not mortality, the theme that occupies most interpreters of literature[^2].

Comparing myself with the trees, I wonder: am I different from last year, or am I the same? Do I also have "rings of grain", proving that I have grown, or am I doomed to repeat my years until the day I don't? Even if I had "rings of grain", are they actually signs of growth, or just a "trick of looking new"?

In my youth, when my life was still anchored in tropical lands, there was no "yearly trick of looking new", just perpetual "fullgrown thickness". I read the poem in a more optimistic light back then. I saw the trees as a perpetual unstoppable growth. If one fell, another would take its place, rising up to the opening in the sky it had just created.

Having arrived back in Germany after a holiday, I notice that the trees in the parking lot are "coming into leaf", where they were still bald only 3 weeks ago. There's this small feeling of betrayal, as if they went on with life without waiting for me. When I look at them, I can't help feeling trapped. Like them I am unresting, but I am not a castle. My "recent buds relax", but do not spread.

The grief comes not from knowing that one day, as all living things eventually do, you will die. It comes from knowing that you will live the same life, year after year, regardless of underlying cycles, and trying to escape it anyways.

[^1]: Link to full text: https://poetryarchive.org/poem/trees/ [^2]: The View of Death in Philip Larkins The trees and The Building

Programming AVR chips with an Arduino

Tue, 07 Oct 2025 00:00:00 GMT

This is a quick reference on programming any AVR microcontroller using any Arduino as an ISP.

Required Materials

Hardware

An Arduino
An AVR microcontroller

Software

Arduino IDE
avr-gcc
avr-objcopy
avrdude

Step 1 - Flashing the Arduino

This step sets up the Arduino as an ISP. The easiest way to do so is with the Arduino IDE. Simply load the "ArduinoISP" sketch and upload it to the board. This can be found in the examples. Otherwise you can simply copy and paste it from this gist.

Step 2 - Wire AVR microcontroller to the Arduino

Here's a table of the connections. Refer to the pinouts from the respective datasheets to findout which pins correspond.

Arduino	AVR
VCC	VCC
GND	GND
SCK	SCK
CIPO	CIPO
COPI	COPI
SS (Pin10 on UNO)	RESET

Step 3 - Compile

Below is an example command to compile a C source file into an ELF to the attiny85.

avr-gcc -Os\
    -ffunction-sections -fdata-sections\
    -Wl,--gc-sections\
    -DF_CPU=1000000UL\
    -mmcu=attiny85\
    main.c -o main.elf

Explanations:

-ffunction-sections -fdata-sections tells the compiler to split up functions and data into their own distinct sections.
-Wl,--gc-sections is a passed to the linker to tell it to remove unused sections. Because of the previous -f flags, the linker can tell what to remove.
-mmcu tells avr-gcc which AVR instruction set to use. A complete list of possible arguments can be found on the gnu website.

Step 4 - Convert ELF to HEX

The command below transforms the compiled ELF into an intel hex binary format, removing the .eeprom section in the process. This is the format required by AVR chips.

avr-objcopy -O ihex -R .eeprom main.elf main.hex

Step 5 - Flash

This is the last step. The command below uses avrdude to flash the hex file onto the microcontroller.

avrdude -c avrisp -p t85 -P /dev/ttyACM0 -b 19200 -U flash:w:main.hex:i

Explanations:

-c avrisp - the programmer. avrisp and stk500v1 are both acceptable. See this list of programmers.
-p t85 - the part number. Differs slightly from -mmcu. See this list of part numbers.
-P /dev/ttyACM0 - the port where the Arduino is located. On Linux, this is usually /dev/ttyXXXX. This can differ from system to system, even within Linux.
-b 19200 - the baud rate. This differs from programmer to programmer. When none is given, it will default to the one listed in the configuration file.

Note: depending on your system, you may have to specify an avrdude.conf file with the -C flag. On my system, installing avrdude created an avrdude.conf in /etc. Installing the Arduino ide created one in /usr/lib/arduino/hardware/tools/avr/etc/avrdude.conf. If you're on a UNIX based system, you can use find / -iwholename "**/**/avrdude.conf" to find this file. This file is essentially a mapping of programmers, part numbers, baud rates and so on.

It is also in this step where you can set the fuse bits to change the clock divider of the AVR chip's CPU.

Resources

This AVR project template uses CMake to make these steps easier.
This youtube video covers these steps and contain more detailed information not covered in this article. It also covers how to set fusebits. The video creator uses Mac so it could be useful for Mac users.

Remapping a third-party Switch Controller

Sat, 20 Sep 2025 00:00:00 GMT

I love rhythm games. I grew up on Guitar Hero. A while back, I bought a third-party taiko controller for my partner so that we could play Taiko no Tatsujin together on the Nintendo Switch.

In the product listing photos, the controller looked like it was wireless. Spoiler: it wasn't.

You had to connect the controller via the USB cable to the Switch and via a wifi connection. This inevitably led to a poor Taiko experience and the novelty quickly wore off. Despite this, my partner was still able to adjust her timing to the latency and beat me many, many times.

Osu!

Around the same time I came across Osu!. It has a mode that resembles Taiko no Tatsujin. PC players usually use the keyboard, typing f or j for the drums and d or k for the rims.

I wanted to play with the Taiko controller. The first thing I tried, quite predictably, did no work.

While Osu! seems to have settings for detecting and playing with controllers, it didn't quite work out of the box like playing Steam games with Xbox or Nintendo controllers.

Remapping

Using libxdo, I quickly hacked together a remapper, mapping the event codes the controller emits to keystrokes libxdo sends.

If you're on X11, have a third party controller lying around and want to play Osu! (like me), check out the remapper repository.

This is quite a simple solution as it delegates the sending of keystrokes to libxdo. In the process of hacking up the remapper, I learned that quite a few layers sit in between the physical action of pressing a key and the keystroke happening in a Linux computer.

I don't fully understand it yet, but atleast I now have a highly responsive controller to play Taiko with! 😋

Testing the p5.cljs editor

Thu, 25 May 2023 00:00:00 GMT

There was never a time where I the JavaScript ecosystem more than when I tried to write tests for the p5.cljs web editor. Things broken left and right, missing plugins, babel, transpiling, modules, npm. Disclaimer: I don't hate the JS ecosystem in earnest. Just ... sometimes.

This article is about why I chose Jest as the test runner for the p5.cljs editor and the steps necessary to get it working with third-party components I was using.

Why not Vitest?

Because of this issue. I love Vite. With a previous project that used Vite's Env Variables (import.meta.env.VARIABLE), the only way to set up tests without a headache was to use Vitest. Needless to say, if you can use Vitest to test your Vite-React project, you should. It was made for that.

But now and then you hit a deadend, like the issue mentioned above with CodeMirror. From what I understand, the issue is due to how Vitest bundles dependencies. I'm not sure how, but if you have a clue, do reach out!

And this is why I switched to Jest.

Setting up Jest

My first distaste with Jest started with just how many dependencies you needed to install for Jest to work.

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

I also needed @testing-library/react and jest-environment-jsdom.

With the installation out of the way, I got started writing my first test. The first test rendered the base app, just to check if I got everything setup correctly.

The First Trial - ES Modules

Let's go yarn test and ...

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Some more details:

Details:

/re/dac/ted/p5-cljs-web-editor/node_modules/react-markdown/index.js:6
export {uriTransformer} from './lib/uri-transformer.js'
^^^^^^

SyntaxError: Unexpected token 'export'

> 1 | import ReactMarkdown from 'react-markdown'
    | ^
  2 | import hljs from "highlight.js"
  3 | import { useEffect } from 'react'

After much researching, I learned that Jest has limited support for ES Modules. Many encountered this issue and the solution was to prevent Jest from transforming the react-markdown module. I went a head and created a jest.config.cjs which contained this configuration:

/** @type {import('jest').Config} */
const config = {
	"transform": {},
	"transformIgnorePatterns": [],
};

module.exports = config;

The Second Trial - JSX

Let's go yarn test round 2 and ..

Details:

/re/dac/ted/p5-cljs-web-editor/src/App.integration.test.jsx:5
import { render, cleanup, screen } from '@testing-library/react'
^^^^^^

SyntaxError: Cannot use import statement outside a module

The previous error was now gone and I was treated to another error to solve. After some researching (again), the solution was to transform .jsx files so that Jest could consume it. My jest.config.cjs now looks like this:

/** @type {import('jest').Config} */
const config = {
	"transform": {
		"^.+\\.jsx?$": "babel-jest",
	},
	"transformIgnorePatterns": [],
};

module.exports = config;

Admittedly, this is a rookie mistake. Because if you knew how Jest worked (in Node), you would know that .jsx files needed some special treatment. But hey, we are all learning.

The Third Trial - Markdown

Let's go yarn test round 3 and ...

Details:

/re/dac/ted/p5-cljs-web-editor/src/pages/about.md:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){# About

Another unexpected token error. This time for .md files. Learning from my previous mistake, I now know that you need to also transform .md files for Jest. Jest must be some special kid, huh? Just kidding. You generally need some configuration to get markdown loading properly in a JS project.

A quick search allowed the jest-transformer-mdx to reveal itself to me. Last commit: May 26, 2021. Yikes. Two years ago. Jest went through 2 major versions since then. Jest 27.0.0 was released May 25, 2021. I'm on Jest 29.5.0.

I went and yarn add --dev jest-transformer-mdx and updated my jest.config.cjs.

/** @type {import('jest').Config} */
const config = {
	"transform": {
		"^.+\\.jsx?$": "babel-jest",
		"^.+\\.(md|mdx)$": "jest-transformer-mdx",
	},
	"transformIgnorePatterns": [],
};

module.exports = config;

The Fourth Trial - Transformation

Let's go yarn test round 4 and ...

Error: Invalid synchronous transformer module:
  "/re/dac/ted/p5-cljs-web-editor/node_modules/jest-transformer-mdx/index.js" specified in the "transform" object of Jest configuration
  must export a `process` function.
  Code Transformation Documentation:
  https://jestjs.io/docs/code-transformation

Why did I expect this to work on the first go? Okay, it's not so bad though. Jest has made it really explicit here that it's a problem with the transformer. I was not ready to, after spending a few hours on setting Jest up, to go down the rabbit hole of figuring out how transforming files for Jest. Not yet. This is a known issue with the transformer.

The author of the transformer suggested rolling back to @3.0.0-beta.0. I rolled back and ran the test again.

Error: Invalid return value:
  `process()` or/and `processAsync()` method of code transformer found at
  "/re/dac/ted/p5-cljs-web-editor/node_modules/jest-transformer-mdx/index.js"
  should return an object or a Promise resolving to an object. The object
  must have `code` property with a string of processed code.
  This error may be caused by a breaking change in Jest 28:
  https://jestjs.io/docs/28.x/upgrading-to-jest28#transformer
  Code Transformation Documentation:
  https://jestjs.io/docs/code-transformation

A new error, not even more concrete. I went into jest-transformer-mdx/index.js and found this function:

function createTransformer(src, filename, config) {
	const withFrontMatter = parseFrontMatter(src, config.transformerConfig)
	const jsx = mdx.sync(withFrontMatter)
	const toTransform = `import {mdx} from '@mdx-js/react';${jsx}`

	return process(toTransform, filename, config).code
}

It was not returning and object with a code property. I changed the return value to:

return process(toTransform, filename, config)

Then I ran yarn test again.

ModuleNotFoundError: Cannot find module '@mdx-js/react' from 'src/pages/about.md'

Require stack:
  src/pages/about.md
  src/App.jsx
  src/App.integration.test.jsx

    at Resolver._throwModNotFoundError (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-resolve/build/resolver.js:427:11)
    at Resolver.resolveModule (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-resolve/build/resolver.js:358:10)
    at Resolver._getVirtualMockPath (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-resolve/build/resolver.js:619:14)
    at Resolver._getAbsolutePath (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-resolve/build/resolver.js:587:14)
    at Resolver.getModuleID (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-resolve/build/resolver.js:530:31)
    at Runtime._shouldMockCjs (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-runtime/build/index.js:1699:37)
    at Runtime.requireModuleOrMock (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-runtime/build/index.js:1036:16)
    at Object.<anonymous> (/re/dac/ted/p5-cljs-web-editor/src/pages/about.md:8:14)
    at Runtime._execModule (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-runtime/build/index.js:1429:24)
    at Runtime._loadModule (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-runtime/build/index.js:1013:12)
    at Runtime.requireModule (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-runtime/build/index.js:873:12)
    at Runtime.requireModuleOrMock (/re/dac/ted/p5-cljs-web-editor/node_modules/jest-runtime/build/index.js:1039:21)
    at require (/re/dac/ted/p5-cljs-web-editor/src/App.jsx:12:2) {
  code: 'MODULE_NOT_FOUND',
  hint: '',
  requireStack: [
    '/re/dac/ted/p5-cljs-web-editor/src/pages/about.md',
    '/re/dac/ted/p5-cljs-web-editor/src/App.jsx',
    '/re/dac/ted/p5-cljs-web-editor/src/App.integration.test.jsx'
  ],
  siblingWithSimilarExtensionFound: false,
  moduleName: '@mdx-js/react',
  _originalMessage: "Cannot find module '@mdx-js/react' from 'src/pages/about.md'"
}

A big stack for a small error. @mdx-js/react, which jest-transformer-mdx depends on, was not found. I added it as a dev dependency and ran yarn test once more.

Success

PASS  src/App.integration.test.jsx
      renders the app (669 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.249 s
Ran all test suites.
Done in 4.24s.

Finally! Now I can get down to business and write some real tests. Among which is to

mock the cljs compiler function, since it's made available globally by a script and cannot be tested in a component
mock the fetches properly for the markdown files (which I already did with dummy valuesfor this test)

Conclusion

Testing is a destructive act. Well, according to the book The Art of Software Testing anyways. Through the bare act of trying to setup testing, I already found issues with my application that needed my attention.

I'm not a pro at testing. Not yet. But I encourage all, especially frontend developers, to try testing their applications if they haven't already. If you're like me, coming from a background of creative coding, you might not have found the need to test your programs. If it looks good, it must be working. Frontend developers might suffer this too. The act of trying to figure out what does it mean to have a working frontend or even to actively try to break the frontend will make you a more robust developer.

Somē's Blog

Atomic Counters in OpenFrameworks

Setting up the buffers

Setting up the shader

Writing the shader

Reading the data from ofBufferObject

Summary

The Best String Compression in JavaScript

The algorithms

Hiccups

The benchmark

The results

character count

ratio

Reversibility

Snippet of original string

Malformed output of u-lzss

Conclusion

How to brick (and prevent bricking) an STM8

The Device

The Brick - Enabling the TIM2_CH1 on STM8S

The Method

Creative Coding with Circles

Trails

Soddy Circles

Trees

Other Techniques

Spirograph

Physics

Vertex Transformations

Webbing

Dubin Paths

Summary

Recommended reading/watching

Creative Coding with Generative Colors in 3 Levels

Prelude

Intro

Level 1: Randomness

Level 2: Procedural

Phase Shifting

Other techniques: Sampling and Displacement

Other techniques: Mapping

Level 3: Color Theory

What’s the next level ?

The How/Why dilemma

Closing

Free Continuous Deployment for Reagent Apps with Glitch

Setting up a Glitch project

The Glitch Git repository

Setting up Github Actions

Secrets

Action

Take Away

Further Reading

Emulating I2S on STM32F103

Method

Step 1 - Configure SPI in receive-only master mode

SCK Frequency

Step 2 - Configuring the DMA

Step 3 - Configuring the timer to generate WS

Step 4 - Aligning and Processing the Data

Summary

Fastest GPIO Read Speed on STM32F103 (Tight Loops vs DMA)

Setup

Benchmark 1: Tight-Loop GPIO Reads

Results

Assembly

APB2 Peripheral Access Latency

Benchmark 2: Tight Loop in RAM (RamFunc)

Results

Benchmark 3: Timer-Triggered DMA Sampling

Results

Benchmark 4: DMA with Interrupt on Completion

Results

Wrapping up

Learning ClojureScript with P5.js

Who this tutorial is for

Setup

First steps

Syntax

The `let` block