Code as art

6 examples. Each block is the grid as the app loads it (a . is an empty cell). Open in Chipgrid opens it ready to play; or pick it from the app’s EXAMPLES menu.

Clockwork

Five wheels, and the grid is the score. Left and right are mirror images: ) turns clockwise, ( counter-clockwise. The top wheels take 16 ticks, the bottom ones 24, the centre 32, so they keep falling in and out of phase. Each corner plays what touches it. Watch the corners flash: you are seeing the rhythm. Z2 mirrors the picture too, so the screen is as symmetrical as the code.

......................# CLOCKWORK #
.
......1R5.......................................1R5
...?Q86.7.N010...............................?Q46.b.N010
...)>_____)..................................(_____<(
...|......|..................................|......|
...|......|..................................|......|
...)______)..................................(______(
...B2C2...%..................................P5C12..%
.....................?L00gc9
.....................)>____________)
.....................|.............|
.....................|.V0..T2..Z2..|
.....................|.............|
.....................)_____________)
.....................?H0cg8........K
.
.?O4453...P4G12..............................?Oa25e...N5
.)>_______)..................................(_______<(
.|........|..................................|........|
.|........|..................................|........|
.|........|..................................|........|
.|........|..................................|........|
.)________)..................................(________(
.B1C2.....?/9................................P4E12...?/9

Open in Chipgrid ↗ · 132 BPM

Spiral

A single track, wound up. Every 35 ticks an arrow sets off from the corner and follows the spiral inward, and because each lap is shorter than the last, everything speeds up: the rings shrink, the notes climb, the colours turn faster, until it reaches the centre, wipes the screen, and hits the bass. With a new arrow every 35 ticks, several are on the way at once, a round played by the shape of the code.

......................# SPIRAL #
.....................................................N01
zE___________________________________________________)
....?Qgck3...........................................|
....)______________________________________________).|
....|.?Qgcg4.......................................|.|
....|.)__________________________________________).|.|
....|.|.?Qgcc5...................................|.|.|
....|.|.)______________________________________).|.|.|
....|.|.|.?Qgc87...............................|.|.|.|
....|.|.|.)__________________________________).|.|.|.|
....|.|.|.|.?Qgc41...........................|.|.|.|.|
....|.|.|.|.)______________________________).|.|.|.|.|
....|.|.|.|.|.K.....# the end of the line #|.|.|.|.|.|
....|.|.|.|.|.|B1C8.T2..V0..U11............|.|.|.|.|.|
....|.|.|.|.|.)____________________________).|.|.|.|.|
....|.|.|.|.|.P4G14........................%.|.|.|.|.|
....|.|.|.|.)________________________________).|.|.|.|
....|.|.|.|.P4E14............................%.|.|.|.|
....|.|.|.)____________________________________).|.|.|
....|.|.|.P4C14................................%.|.|.|
....|.|.)________________________________________).|.|
....|.|.P3G14....................................%.|.|
....|.)____________________________________________).|
....|.P3E14........................................%.|
....)________________________________________________)
....P3C14............................................%

Open in Chipgrid ↗ · 240 BPM

Invader

The picture on the screen is the picture in the code. The block of digits in the middle is the sprite: each digit is a colour, each empty cell is see-through. Change a digit while it plays and the invader changes. 4Wr marches it from side to side, Z0 makes it a pair. Two arrows orbit the frame, opposite each other, and its corners play the beat. The frame is 64 ticks round: 2 × (21 + 13) − 4.

......................# INVADER #
.
.
.
.................N010.................P5C12
.................)>___________________)
.................|....................|
.................|....4Wr.............|
..Ug1............|....$.ab8...........|
..T2.............|......5.....5.......|
..Z0.............|.......5...5........|
..V3.............|......5555555.......|
.................|.....552555255......|
.................|....55555555555.....|
.................|....5.5555555.5.....|
.................|....5.5.....5.5.....|
.................|.......55.55........|
.................|....................|
.................)___________________<)
.................B2C2.................?Lgg0c7

Open in Chipgrid ↗ · 126 BPM

Snake

One track, wound back and forth across the whole grid, with an arrow leaving every 24 ticks. ) turns it right at one end, ( turns it left at the other. Every corner it passes plays or draws what touches it, and at the end of the line it wipes the screen and hits the bass. Lengthen the track and everything slows down: here the layout really is the rhythm.

......................# SNAKE #
.
V0..T41
....................................................N01
oE__________________________________________________)
....................................................|
....................................................|
..?H08w3............................................|
..(_________________________________________________)
..|.................................................%
..|
..|.................................................N71
..(_________________________________________________)
..P4C14.............................................|
....................................................|
..?Hogw7............................................|
..(_________________________________________________)
..|.................................................%
..|
..|
..(_________________________________________________K
..P4G14............................................B1C4

Open in Chipgrid ↗ · 220 BPM

Mandala

Eight wheels in rings around the centre, each the mirror of its neighbours, the way a mandala is built: outer wheels of 20 ticks, inner ones of 8, drifting against each other. Z2 folds the picture the same way, so the screen and the code share one symmetry. Move a voice from one corner to another and listen to the pattern turn.

........................# MANDALA #
..P4C14...?Q5437..............................P4G14...N0
..)>______)...................................(______<(
..|.......|...................................|.......|
..|.......|...................................|.......|
..|.......|...................................|.......|
..)_______)...................................(_______(
.
....................N01.?Xa4b...B2C1
....................)>__).......(__<(
....................|...|.......|...|
....................)___).......(___(
.
.........................V0.T2
.........................Z2
..........................# 20 and 8 ticks #
....................(__<(.......)>__)
....................|...|.......|...|
....................(___(.......)___)
....................?Hc1a4......?Qcc29
.
.
..(______<(...................................)>______)
..|.......|...................................|.......|
..|.......|...................................|.......|
..|.......|...................................|.......|
..(_______(...................................)_______)
..P4E14...?O2a5e..............................P3A14...%

Open in Chipgrid ↗ · 124 BPM

Circuit board

It looks like a printed circuit, and it behaves like one. The block on the left is not code at all: { and the lowercase letters do nothing, they are the drawing of a chip. Four emitters at its edge send pulses at 7, 5, 9 and 6 ticks along traces of rails. Each bend draws a ring, each trace ends on a voice. Decoration and program are written in the same cells.

......................# CIRCUIT BOARD #
.
..........V3..T3
.
..{{{{{{
..{{{{7E__________)
..{{{{{{..........|
..{{{{{{..........(__________________________P5C12
..{{{{{{..........?Q6831
..{{{{5E________________)
..{{{{{{................|
..{{{{{{................(____________________P5E12
..{chip{................?Qg843
..{{{{9E______________________)
..{{{{{{......................|
..{{{{{{......................(______________P5G12
..{{{{{{......................?Qog45
..{{{{6E____________________________)
..{{{{{{............................|
..{{{{{{............................(________N010
..{{{{{{............................?Hkw77
..{{{{{{

Open in Chipgrid ↗ · 124 BPM