Chipgrid / Documentation / Reference

Screen and drawing

The 160 × 120 screen: palettes, things to draw, the three layers, and the effects that move, fade, mirror and glitch the picture.

V screen

Sets the palette and background, every tick.

Sets the screen’s palette (0 NES, 1 C64, 2 Game Boy, 3 CGA) and background colour, every tick. Everything already drawn changes colour with the palette, so a clock under it gives palette cycling. With several V, the last one typed, edited or banged through a gate holds the screen, and the others are dimmed. A V with nothing after it does nothing.

CellRoleWhat it takes
rightpalette0 NES · 1 C64 · 2 Game Boy · 3 CGA
2nd rightbackgroundcolour 0–f behind the drawing (empty = the palette’s own)

History. The screen memory held colour numbers, not colours: a separate palette said what number 4 looked like. Change the palette and the whole picture changes at once — the cheapest animation there is. The C64 had 16 colours, the NES 54 (4 per area), the Game Boy four greens.

Example

# SCREEN - example #
.
..Qgc81
..Qgc52
..Qgc23
.
...8C4
...V

Open in Chipgrid ↗

Three rings are drawn in colours 1, 2 and 3. A slow clock feeds V’s palette: every 8 ticks it switches NES → C64 → Game Boy → CGA. The picture holds colour numbers, so the same rings change look at once.

Try this

  • Type a background colour two cells right of V, e.g. V.1.
  • Replace the clock’s rate 8 with 1: fast palette flicker.

F flash

Flashes the screen when banged.

Flashes the whole screen in colour (0–f from the palette) when banged. Put it under a snare sequence.

CellRoleWhat it takes
left, above or belowbang *fires it
rightcolourpalette index 0–f

History. Explosions in old games often changed one register — the background colour — for a frame or two. One byte written, the whole screen flashes.

Example

# FLASH - example #
.
..D4
...B3C2o
..F3

Open in Chipgrid ↗

The same bang does two things: it touches B on its left (a kick) and F just below it, which flashes the whole screen in colour 3. Sound and picture in sync from one bang.

Try this

  • Change the colour 3 into 7 or c.
  • Change D4 into D8: a flash every two beats.

~ field

Paints the whole back layer with a moving pattern: plasma, stripes, rings…

A field: paints the whole screen with a moving pattern, every tick. pattern: 0 plasma · 1 stripes across · 2 stripes down · 3 rings · 4 checkerboard · 5 noise · 6 gradient · 7 tunnel. speed is how fast it moves, scale how big it is. Its colours run from colour over span colours; with a span of 1, half the pattern is see-through. It goes on the back layer, so it can never hide what you draw. % on layer 0 makes its colours flow: type [0 above both.

CellRoleWhat it takes
rightpattern0 plasma · 1 stripes across · 2 stripes down · 3 rings · 4 checker · 5 noise · 6 gradient · 7 tunnel
2nd rightspeedhow fast the wave travels
3rd rightscalehow big
4th rightcolourpalette index 0–f
5th rightspanhow many colours; 1 = half see-through

Example

# FIELD - example #
.
.~02318
.
.Ogc77
.T4

Open in Chipgrid ↗

Plasma (pattern 0), speed 2, scale 3, colours 1 to 8. It sits on the back layer, so the sprite stays in front without doing anything special.

Try this

  • Change the first 0 to a 3 for rings, or a 7 for a tunnel.
  • Set the last digit to 1: half of the pattern turns see-through.

X pixel

Draws a 5×5 block at x, y every tick.

Draws a pixel every tick: a 5×5 block at x (0–31) and y (0–23) in colour. Xgc4 = middle of the screen, yellow. Put a clock on its x input and it moves; the layer keeps what was drawn, so it leaves a line.

CellRoleWhat it takes
rightx0–31 blocks (×5 pixels)
2nd righty0–23 blocks
3rd rightcolourpalette index 0–f

History. Early machines drew in blocks: the ZX Spectrum allowed 2 colours per 8×8 cell, the NES 4 per 16×16 area. Artists designed around the grid — that is where “pixel art” comes from.

Example

# PIXEL - example #
.
...1Cw
...X.c4
.
.T3

Open in Chipgrid ↗

A clock counts 0 to 31 (w = 32 values) into the x of X; y is fixed at c (12, the middle), colour 4. The pixel crosses the screen in 32 ticks, and T3 dissolves what it leaves behind: a comet.

Try this

  • Change c into 0 (top) or n (bottom).
  • Delete T3: the line stays.
  • Rate 2 on the clock: half speed.

H bar

Draws a horizontal bar every tick.

Draws a horizontal bar every tick: x, y, width (in blocks), colour. Feed a random into its y for raster bars.

CellRoleWhat it takes
rightx0–31 blocks (×5 pixels)
2nd righty0–23 blocks
3rd rightwidthin blocks (1–32)
4th rightcolourpalette index 0–f

History. Raster bars (copper bars on the Amiga): the program changed the background colour while the TV beam was drawing, line by line. One register, changed at the right moment, gave rainbow stripes.

Example

# BAR - example #
.
....0Rn
...H0.w6
.
.T5

Open in Chipgrid ↗

Every tick H draws a full-width bar (w = 32 blocks) at a random height (0–23) in colour 6. T5 dissolves the old ones: flickering raster bars.

Try this

  • Width 8: short bars on the left.
  • Replace 0Rn by a clock 1Cn: the bar sweeps down.

O sprite

Draws a mirrored 8×8 creature every tick.

Draws an 8×8 sprite (doubled) every tick at x, y. seed picks which creature: random bits, mirrored left-right. Put a clock on the seed and it morphs.

CellRoleWhat it takes
rightx0–31 blocks (×5 pixels)
2nd righty0–23 blocks
3rd rightseedwhich creature
4th rightcolourpalette index 0–f

History. Sprites are small images the video chip moves by itself over the background. The C64 had 8, the NES 64 — but only 8 on the same line: more and they flickered, a glitch players remember.

Example

# SPRITE - example #
.
...1Cw
...O.a57
.
.....8C9
...Oe2.4
.
.T6

Open in Chipgrid ↗

Top: a sprite O walks across the screen (a clock on its x), creature number 5, colour 7. Bottom: a sprite that stays put while a slow clock changes its seed: it morphs into a new creature every 2 beats. Each seed is a random 8×8 pattern, mirrored like a space invader.

Try this

  • Change the seed 5: another creature.
  • Change the walker’s y a into 2 or k.

L line

Draws a line between two points every tick.

Draws a line every tick from (x1, y1) to (x2, y2), in blocks, in colour. A wave on an end point makes it sweep like a radar.

CellRoleWhat it takes
rightx1start, 0–31 blocks
2nd righty1start, 0–23 blocks
3rd rightx2end, 0–31 blocks
4th righty2end, 0–23 blocks
5th rightcolourpalette index 0–f

History. Lines are drawn with Bresenham’s algorithm (1962): only additions and comparisons, no division — perfect for an 8-bit CPU. The Vectrex and Elite drew their whole worlds with lines.

Example

# LINE - example #
.
...1Cw
.Lgc.04
.
...2Cw
.Lgc.n7
.
.T3

Open in Chipgrid ↗

Two lines from the centre (g, c = 16, 12). The end of the first one runs along the top edge (y 0) driven by a clock, the second along the bottom (y 23) at half speed. T3 fades them into a fan.

Try this

  • Move the start point: L00 = top-left corner.
  • See the “Radar” example: a wave on both ends makes it turn.

Q ring

Draws a ring (circle) every tick.

Draws a ring every tick: centre x, y, radius in blocks, colour. A clock on the radius makes it grow: rings in a row make a tunnel.

CellRoleWhat it takes
rightx0–31 blocks (×5 pixels)
2nd righty0–23 blocks
3rd rightradiusin blocks (×5 pixels)
4th rightcolourpalette index 0–f

Example

# RING - example #
.
....1Cg
..Qgc.4
.
....3Cg
..Qgc.9
.
.T4

Open in Chipgrid ↗

Two rings centred on the screen. Their radius comes from clocks counting 0–15, one fast, one slow: the rings grow and start again, a tunnel. T4 dissolves the old ones.

Try this

  • Move a centre: Q88 (top left).
  • A fixed radius Qgc6: a still circle.

U glitter

Sprinkles random pixels every tick.

Sprinkles amount × 4 random pixels of colour every tick: stars, snow, TV static. With I on its amount, it crackles with the drums.

CellRoleWhat it takes
rightamounthow much per tick
2nd rightcolourpalette index 0–f

Example

# GLITTER - example #
.
..D8
...N580
.
...I3
..U.1
.
.T4

Open in Chipgrid ↗

A long noise (a crash) every 2 beats. I3 listens to the noise channel and feeds U’s amount: on each crash a burst of white glitter, thinning out as the sound fades. T4 clears it away.

Try this

  • Replace the I3 by a fixed amount 1: stars, always.
  • Change the colour 1 into 6.

" text

Draws text every tick: x, y, colour, letters.

Draws text every tick: x, y, colour, then letters until an empty cell, 16 at most. "4c1HELLO. Letters and digits only; _ is a space. Each letter is 8 pixels wide. Any letter can come from a sequence, which makes a scroller.

CellRoleWhat it takes
rightx0–31 blocks (×5 pixels)
2nd righty0–23 blocks
3rd rightcolourpalette index 0–f
4th right on, until an empty celllettersup to 16, letters and digits; _ = space

Example

# TEXT - example #
.
."4c1HELLO
.
.T1

Open in Chipgrid ↗

x = 4, y = 12 (c), colour 1, then the letters. Every tick it draws the word again, and T1 eats at it a little.

Try this

  • Write your name. _ makes a space.
  • Load the example Text scroller to see it move.

$ stamp

Draws your own sprite every tick, from the cells below it.

Draws your own sprite every tick: x, y, width, height, and the pixels in the cells just below it, starting under the $. Each pixel cell is a colour (0–f); empty is see-through. Up to 16 × 16, each pixel 2 × 2 on screen.

CellRoleWhat it takes
rightx0–31 blocks (×5 pixels)
2nd righty0–23 blocks
3rd rightwidein sprite pixels (1–16)
4th righttallin sprite pixels (1–16)
the rows below, from under the $pixelsa colour 0–f per cell; empty = see-through

Example

# STAMP - example #
.
.$c688
..22..22
.22222222
.21222222
.22222222
..222222
...2222
....22

Open in Chipgrid ↗

x = 12, y = 6, 8 wide, 8 tall. The eight rows below are the picture itself: each digit is a colour, each empty cell is see-through. A heart.

Try this

  • Edit the pixels while it plays.
  • Put a wave under a 4Wr on its x to make it travel.

[ layer

The drawing below it goes on this layer: 0 back, 1 middle, 2 front.

Sets the layer for the drawing operators below it, in reading order: [0 back, [1 middle (the usual one), [2 front. Empty pixels show the layer behind. T, M, K and the other effects only touch their own layer, so a sky can stay still behind a ship that leaves a trail. In multiplayer it only applies to your own code; everyone still sees the same picture.

CellRoleWhat it takes
rightlayer0 back · 1 middle · 2 front

Example

# LAYER - example #
.
.[0
.~6.484
.[1
.M05
..0Rn
.Xv.1
.[2
.O8a57

Open in Chipgrid ↗

Three layers: a gradient at the back, stars scrolling in the middle, a sprite in front. M05 only moves its own layer, so the ship and the sky stay where they are.

Try this

  • Delete [2: now the ship is on the scrolling layer and it smears.

] size

The sprites and text below it are this many times bigger.

Sets the size of the sprites and text below it, in reading order: ]3 is three times as big, up to 8. It applies to O, $ and ". Back to normal with ]1.

CellRoleWhat it takes
rightscalehow big

Example

# SIZE - example #
.
.]4
.$2388
..22..22
.22222222
.21222222
.22222222
..222222
...2222
....22

Open in Chipgrid ↗

]4 makes the sprite below it four times as big: each pixel is 8 × 8 on the screen.

Try this

  • Try ]2, or ]7.

T dissolve

Dissolves random pixels of the drawing every tick, or with a 1 after the amount, fades through the palette.

With a second input of 1, it fades instead: every pixel steps down through the palette together, for smooth glows (Ta1). Otherwise it dissolves the drawing a little every tick (amount 0–9): random pixels go out, leaving trails. 0 keeps everything, 9 erases almost at once.

CellRoleWhat it takes
rightamounthow much per tick
2nd rightfade0 random pixels go out · 1 everything fades through the palette

History. Like the glow of a CRT screen’s phosphor fading after the electron beam has passed.

Example

# DISSOLVE - example #
.
...1Cn
..H0.w4
.
.T2

Open in Chipgrid ↗

A bar sweeps down the screen, one row per tick. T2 switches off a few random pixels every tick, so the rows drawn earlier fade into a ragged trail, like phosphor on an old CRT.

Try this

  • T0: nothing fades, the screen fills up.
  • T9: almost no trail.

M scroll

Scrolls the whole drawing every tick.

Scrolls the whole drawing every tick: dir 0 left, 1 right, 2 up, 3 down, by amount pixels. rotation is the picture’s angle in steps of 10°: when it changes, the picture turns. Each bang touching M adds one step, which stays. To turn without scrolling, set the amount to 0: M003.

CellRoleWhat it takes
rightdir0 left · 1 right · 2 up · 3 down
2nd rightamounthow much per tick
3rd rightrotationangle, in steps of 10°

History. Hardware scrolling was the big trick of the 8-bit consoles: the chip shifts the whole background by a register value, so the CPU doesn’t redraw anything. Super Mario Bros. runs on it.

Example

# SCROLL - example #
.
...0Rn
..Xv.4
.
.M05

Open in Chipgrid ↗

A pixel is drawn on the right edge (x = v = 31) at a random height every tick. M05 moves the whole picture 5 pixels to the left each tick: the dots stream away like stars at warp speed.

Try this

  • M01: one pixel per tick, much slower.
  • M15 scrolls right: the dots leave the screen at once — drawing and scrolling must agree.

Z mirror

Mirrors the drawing every tick: 0 left→right, 1 top→bottom, 2 both.

Mirrors the whole drawing after each tick: 0 copies the left half onto the right, 1 the top onto the bottom, 2 both — a kaleidoscope. Draw in one corner, get four. rotation turns the mirror lines in steps of 10°, and each bang touching Z adds one step, which stays.

CellRoleWhat it takes
rightaxes0 left → right · 1 top → bottom · 2 both
2nd rightrotationangle, in steps of 10°

History. Symmetry was free memory: store half a sprite, draw it twice. The same trick, applied to the whole screen, gives the kaleidoscopes of the demoscene.

Example

# MIRROR - example #
.
...1Cg
.L00.b3
.
.Z2
.T3

Open in Chipgrid ↗

A line from the top-left corner sweeps along the middle row, inside the top-left quarter only. Z2 copies that quarter left → right and top → bottom after every tick: one line becomes a four-way star.

Try this

  • Z0: left onto right only. Z1: top onto bottom.
  • Add a sprite O in the corner and watch it multiply.

K wipe

Wipes the drawing when banged.

Wipes the drawing when a bang touches it. Put it next to a beat or a kick pattern to clear in time with the music. It wipes its own layer: see [.

CellRoleWhat it takes
left, above or belowbang *fires it

Example

# WIPE - example #
.
.U23
.
.Dg
..K

Open in Chipgrid ↗

U23 sprinkles 8 pixels of colour 3 every tick and nothing fades them: the screen fills up. Every 16 ticks (a bar) Dg bangs K, which wipes everything. The screen breathes with the bar.

Try this

  • D4 instead of Dg: a wipe on every beat.
  • Put K next to a kick pattern’s bang: wipes in rhythm.

+ zoom

Zooms the whole drawing every tick. A bang gives it a kick.

Zooms the whole drawing every tick, from the centre: amount × 2% per tick and at least 1 pixel, way 0 grows, 1 shrinks. +0 does nothing until a bang. Draw something small in the middle and it becomes a tunnel. A bang touching it adds a kick for that one tick.

CellRoleWhat it takes
rightamounthow much per tick
2nd rightway0 grows · 1 shrinks

Example

# ZOOM - example #
.
....2C8
.Qgc2
.
.+2
.T1

Open in Chipgrid ↗

A small ring is drawn in the middle every tick, its colour changing with the clock 2C8. +2 enlarges the whole picture each tick, so older rings slide outward: a tunnel. T1 slowly dissolves them.

Try this

  • +21: the picture shrinks instead.

= ripple

Slides the rows sideways along a wave. A bang jumps the wave ahead.

Ripples the drawing: rows swing sideways along a sine wave. amount is how far in pixels, wavelength how tall one wave is in blocks, speed how fast it travels. Each bang touching it jumps the wave a quarter ahead.

CellRoleWhat it takes
rightamounthow much per tick
2nd rightwavelengthheight of one wave, in blocks
3rd rightspeedhow fast the wave travels

Example

# RIPPLE - example #
.
.Lg0gn7
.
.=
.T2

Open in Chipgrid ↗

A straight vertical line is drawn every tick. = with no inputs swings the rows of everything already drawn: the older the line, the wavier.

Try this

  • =a: wider swings.

% colours

Shifts every drawn pixel along the palette. Each bang shifts one more.

Shifts every pixel already drawn along the 16 colours of the palette. shift is a position: when it changes, the colours move, so a clock on it cycles them. Each bang touching it adds one step, which stays.

CellRoleWhat it takes
rightshiftposition in the palette

Example

# COLOURS - example #
.
.U23
.
.1D4
.
..%

Open in Chipgrid ↗

Stars of colour 3 pile up. 1D4 bangs every 4 ticks onto %, which moves every star already on screen one colour along the palette: bands of colour, one per beat.

Try this

  • Replace the beat by a clock on the input: 1Cg above the cell right of %.

/ glitch

Throws random bands sideways every tick. A bang gives a burst.

Glitches the drawing: every tick, amount random bands up to size pixels tall jump sideways. A bang touching it adds a burst of 10 bands. For bursts only, set the amount to 0: /0.

CellRoleWhat it takes
rightamounthow much per tick
2nd rightsizetallest band, in pixels

Example

# GLITCH - example #
.
.Qgc87
.
.1D8
.
../0
.T3

Open in Chipgrid ↗

A ring is drawn every tick. /0 does nothing on its own; every 8 ticks the bang from 1D8 throws a burst of bands sideways, then T3 cleans up.

Try this

  • Remove the 0: a steady broken signal, plus the bursts.
Esc