For my final project for Computational Approaches to Typography, I wanted to make a sigil#Chaos_magic) generator. In chaos magic, a postmodernist, D.I.Y. system of occult practices dating back to the 1970s, a sigil is a magically charged symbol that helps the magician realize a desire or intent.

Why am I talking about chaos magic in a class on typography? Well, it turns out that the most common process for creating sigils involves layering and deconstructing letters.

Here’s a short passage from Grant Morrison’s Pop Magic that explains the technique:

“The sigil takes a desire or intent - let’s say ‘IT IS MY DESIRE TO BE A GREAT ACTOR’ (you can, of course, put any desire you want in there) and folds it down, creating a highly charged symbol. The desire is then forgotten. Only the symbol remains and can then be charged to full potency when the magician chooses.

…

First, remove the vowels and the repeating letters to leave a string of consonants - TSMYDRBGC.

Now start squashing the string down, throwing out or combining lines and playing with the letters until only an appropriately witchy-looking glyph is left.”

When I first read this, it struck me that this process could be done algorithmically without necessarily invalidating its magical purpose. Once a sigil is made, the magician needs to forget its associated intent before it can be properly charged with power, which might actually be a little easier if the sigil wasn’t made by hand.

In fact, someone else already had this exact idea and made sigilscribe.me. But, as far as I can tell, that generator doesn’t actually use letter glyphs from a font in its sigils.

So, I wanted to try generating sigils by layering letter glyphs from opentype.js and then removing or combining segments of each glyph’s path until I got something that looked sigil-esque.

To be honest, I didn’t have enough time to figure out a good algorithm for this. I got as far as layering the glyphs on top of each other and playing with randomly removing segments from the glyph paths, using Rune.js and a approach adapted from a gist on splitting SVG paths into pieces.

The results…don’t look great. I think with a few more days to play around with this project, I could get something that actually looks like a sigil, but I just came up with the idea a bit too late. I think there’s some potential here, and I’d like to keep working on this after the semester’s over.

Source Code

For the third week of CompTypo, we were asked to make a concrete poem using HTML, CSS, and JavaScript. I ended up making a few sketches for this assignment.

I was really drawn to Alyson Provax’s poem Untitled (I don’t know what I’m going to do), both because of its form and because I relate strongly to its content at this particular moment. I re-made it in p5, incorporating a small amount of randomness without straying too far from the original.

While trying to figure out how to erase and redraw the HTML elements, I accidentally made a version of this sketch that would layer over itself each time you clicked the mouse. I liked the resulting aesthetic, so I made a version that draws itself 30 times. This averages out the cumulative effects of each iteration’s random offsets.

I didn’t want to only reproduce someone else’s work this week, so I made a third sketch exploring a spiral layout. I wasn’t really sure where it was going at first, but then a friend reminded me of Junji Ito’s Uzumaki, a manga in which spirals figure as a sort of symbol of cosmic horror. So I tried to push the sketch in a more “unsettling” direction by adding some random vertical offsets to each character, although this also made it much harder to read.

For the second week of CompTypo, we were asked to create a program that produces asemic writing. I really wanted to do something novel for this assignment, either designing a new asemic script or experimenting with converting asemic glyphs generated by p5 into OpenType fonts using opentype.js. But, in the end, I had a huge deadline for NIME due the night before, so I didn’t get to spend as much time as I wanted on this. Such is life at ITP.

As a sort of warm-up exercise, I ported Anders Hoff’s Spline Script algorithm for cursive handwriting to p5.js.

First, I generated the glyphs in a grid, following the pattern set by Allison’s example sketches. I should note that I used the d3-delaunay JavaScript library to help me generate Voronoi tesselations that I could then use to generate multiple permutations for each glyph.

Here, you can left click to generate new permutations on the same glyph alphabet or right click to generate a new alphabet entirely.

Then, I sort of guesstimated what Hoff meant by “concatenate the spline of a single glyph with the neighbouring characters in the word” and ended up with a decent-ish result. I added some additional parameters for controlling kerning, spacing between words, and spacing between lines. I used a page from Italo Calvino’s Invisible Cities as source text to get word lengths that felt like English.

As I worked on this, I felt like I was re-inventing a lot of the tools that HTML and CSS give you for controlling typography, so I think one next step with this would be to try to turn these asemic glyphs into OpenType/TrueType fonts and leverage those browser technologies more effectively.

As above, left clicking generates a new permutation on the same glyphs and right clicking generates a new set of glyphs.

For our first assignment for Talking and Storytelling, we were asked to record ourselves talking to two people, one that we knew well and one that we didn’t, and to transcribe a minute of one of these conversations.

I recorded conversations with my partner, Rita, and her roommate, Akmyrat. Here’s a transcription of my conversation with Akmyrat:

---

Oren: No no no, it’s just odd to listen to yourself, right? It makes me very self-conscious about your speech mannerisms and all that stuff, you know?

Akmyrat: It is, it is weird. I mean, I think it’s also weird because we hear ourselves through our inner ear vs. our outer ear.

Oren: Yeah, and so when you hear yourself recorded, it never - you always - it doesn’t sound like your voice, or it sounds exactly like your voice, but how everyone else hears it, not how you hear it.

Akmyrat: Exactly.

Oren: Like, um —

Akmyrat: It’s like —

Oren: Whenever I hear myself, like, recorded, I always kinda think like, “Oh, man, I sound like a jerk.” Like, because my voice has a certain quality to it that I don’t hear when I speak normally, right?

Akmyrat: Yeah. I think it’s interesting how singers actually get over that. Um, because I know a couple of people that sing, and they, um, have no problem listening to themselves.

Oren: Yeah, well I imagine that it’s like anything — you do it enough and it just kinda loses all weirdness. Like it just becomes normal and you accept that, you know?

Our first assignment for Computational Approaches to Typography was to create a text-based sketch using p5.js and xterm.js, a JavaScript terminal emulator.

Initially, I wanted to make some generative ASCII art, but none of the visual ideas that I came up with were satisfying. So, I decided to take a page from Allison’s Ghost train sketch and re-implement one of the visual poems from bpNichol’s First Screening.

I chose Self-Reflexive No. 1, mostly on a whim. The hardest part to reproduce was the endless scrolling, because by default xterm.js would just scroll to the bottom of the terminal every time a new line was added. To get the scrolling looking something like the original piece, I used the xterm.js scrollLines() function to scroll down by a single line each frame, and then trigger a call to scrollToTop() once the scrollHeight of the xterm.js container div got larger than the height of its canvas element.

There was probably a less hacky way to do this that didn’t involve looking at HTML elements generated by xterm.js, and I feel a bit like I’ve violated the spirit of the assignment, but I couldn’t figure out another solution.

Anyway, here’s the link to the p5 sketch.

Here’s a breakdown of the patch that I made for the 3-minute performance assignment for Live Image Processing & Performance.

All of the effects that I’m using are implemented using jit.gl.slab and shaders written as .jxs files. I wrote some of the shaders myself, while others are taken from the Max forums and this super-helpful GitHub repo.

For the interface, I’m using Leafcutter John’s MrMatrix patch to dynamically change the order of my video effects.

Description

Key switches, also sometimes referred to as lock switches or keylock switches, are electrical switches that are activated by inserting a physical key into a lock and turning it.

Key switches rely on a lock mechanism that only allows a unique key with a specific pattern of notches cut into it to rotate freely, such as a warded lock, pin tumbler lock, or disk tumbler lock. Most switches only come with one or two keys that will fit, although lower quality key switches probably have a higher chance of being keyed-alike.

Variations

There are a wide variety of key switches out there.

The most common type of key switch is on/off and has only two terminals, but there are also rotary key switches with three or more terminals. Some rotary key switches have an “off” position where no terminals are connected, while others are always on.

Some key switches will allow you to remove the key in any position, while others will only allow you to remove the key in the “off” position.

Key switches can be latching or momentary, and some key switches even combine the two types, e.g. an off-on-momentary switch.

Another variation is the type of key - some switches use flat keys, while others use tubular keys.

Data Sheets

TBD

Example Uses

The most common place you’ll find a key switch is in the ignition system of a car, although increasingly these are being phased out in favor of pushbutton switches. Key ignition switches are typically off-on-on-momentary, with the momentary position used to start the engine and the latching positions used to keep the engine running or put the car in accessory mode.

In a darker example, key switches were also used as the launch controls for the Minuteman and Titan nuclear missiles, with some launch systems requiring two or even four operators to turn their keys simultaneously.

Strengths and Weaknesses

Key switches are difficult to accidentally manipulate; activating a key switch requires the user to both insert and turn the key. This makes them well-suited for situations where it’s important that a control is only operated deliberately, which is why you often find them in cars and other heavy machinery where safety is crucial. However, this same property makes key switches less well-suited to expressive interfaces that require quick gestures, e.g. musical instruments.

Key switches are also difficult to tamper with, because only someone with a working key can turn the switch on or off. A key switch could be a good choice as an on/off switch for a publicly displayed project that you want to prevent strangers from messing with. The downside to this is, of course, that you could lose the key, rendering the switch useless.

Key switches can also introduce a social aspect to projects, in that you have a limited number of keys and can only give them to certain people.

Example Circuit Schematic

TBD

Example Microcontroller Code

TBDm

Citations & References

Overview of the Key Switch, RS Components

Keylock Switches Information, IEEE GlobalSpec

For the 2nd Tangible Interaction Workshop assignment, we were asked to make a MIDI controller. I made a controller for sustaining chords on a synth pad. I wanted to try to make a controller that would play notes in a consistent key signature and that would make it easy to build chords out of individual notes.

Controls

The controls are:

• seven slide potentiometers, each of which controls the velocity of a single note of a scale or chord (depending on how you want to think about it)
• a 3-position toggle switch for shifting the notes up or and down by an octave
• a 4-position rotary switch that changes the note mapping of the slide potentiometers
• an accelerometer that controls pitch bend using y-axis movement

Components

• 7 slide potentiometers
• 14 M2 x 12mm phillips screws
• 3PDT toggle switch
• 4 position rotary switch
• Teensy 3.2
• LISD3H accelerometer
• MIDI jack
• Adafruit Perma-Proto Half-sized Breadboard PCB
• female headers
• black nylon hex standoffs
• 1/8” white matte acrylic

Enclosure

I used the same materials and techniques (laser cut matte white acrylic with black painted text, black nylon hex standoffs) for this week’s enclosure that I did for the Lunar Lander controller. This was partly out of convenience and partly because I like the idea of making a matching series of controllers for my assignments for this class.

Circuit

Code

Playtesting

Files

Arduino source code
Illustrator file for laser cutting the enclosure
Fritzing sketch for the circuit diagram

Here are a few Max patches that I worked on over the last week. The first two are smaller patches that explore specific concepts and effects, and the last one is a video playback system that I made for a performance at the 1+1=3 series that happened last Friday.

I feel like I’m starting to understand the ins and outs of Max a lot better, but I’m still struggling to effectively organize my patches. Moving forward, I want to start using send and receive more often, and try to break up my patches into self-contained areas.

That said, I’m really excited about programming in Max - coming from a sequential coding paradigm, it’s so nice to be able to connect inputs and outputs and visualize data flow in real time.

Randomized Grid

This patch demonstrates how to use the matrixctl and router objects to randomize the mapping between jit.scissors and jit.glue, which creates a sort of randomized grid effect on a source video. This is actually an improvement that Matt made on my original patch, which used a non-standard mxj object to interleave 3 lists at once. Matt rewrote the patch to use a combination of zl.lace and zl.group to accomplish the same effect.

# Shaders in Jitter This patch demonstrates the bare minimum setup for applying a shader to a video texture in Jitter. I'm using `jit.gl.gridshape` to apply the shader and texture to the `jit.gl.render` context, but I think I might actually be better off using `jit.gl.slab` in the future. The thing that can be a bit confusing about this workflow is that many of the `jit.gl` objects are connected via a shared namespace, rather than inlets and outlets.

1+1=3 Performance

This patch is a video playback system that I built for my performance at 1+1=3 last week. This patch includes playback of GIFs using jit.movie, switching between a microphone and recorded audio samples, a glitchy downsampling effect controlled by beat tracking on audio, and the jit.chromakey video feedback effect that was demonstrated in last week’s class.