Close

05 / 10

Tessera

Self-initiated · 2020 · Concept and development

Live project https://tessera01.vercel.appSource repository https://github.com/moritzsalla/tessera

A rendered scarf lying on dark tarmac, printed with a generated grid of blue, red, violet and yellow cells
A rendered scarf printed with a generated grid.

A browser tool that draws a grid and colours every cell by a function you write, then exports the result as editable SVG.

The tool in a browser window: a field of blue and green arcs beside the Windows 98 control panel
The tool in a browser, beside its Windows 98 control panel.

Each cell’s fill comes from an expression evaluated per cell and per channel, with x, y, the channel’s own value c, and noise, sin, cos, tan, floor, ceil and round in scope. The default is noise(x*c, y*c). Red, green and blue are evaluated separately, so one expression gives three surfaces that agree only where the channels line up.

Perlin noise rather than random, because random values spread too evenly to read as a pattern. Seed, octave count and falloff are controls, so a pattern is adjusted rather than rerolled.

Warped moiré pattern from Math.sin(c^x*y)+10
A warped moiré from Math.sin(c^x*y)+10.

Cells can be deleted by clicking or by dragging across the field. The grid is a structure to edit by hand, not a finished image.

Three greyscale variations rendered as vertical bars
Three greyscale variations as vertical bars.

Output is SVG, so the pattern leaves the browser as editable paths at any size; a raster export would end the work at the moment it was generated. A few thousand rectangles will still stall a vector editor.

Rippling radial pattern from Math.sin(xyc)+100
A rippling radial pattern from Math.sin(x*y*c)+100.
Exported grid opened as editable rectangles in a vector editor
An exported grid, editable in a vector editor.

The same vectors go to fabrication. A pattern exported at a scarf’s proportions was rendered as a knit, each cell a block of stitches.

A rendered scarf on black, knitted in a generated pattern of blue, red, gold and green blocks, with multicoloured fringes
A knitted scarf in a generated pattern.

The interface is built with 98.css, as a draggable Windows 98 window.

Eight outputs in a grid, six beside the Windows 98 control window with its size, resolution, offset, colour, stroke, function and shape settings: moiré checks, pink and yellow hyperbolae, rows of red and teal arcs, blue-green scales, and greyscale bars
Eight outputs and the control window.

Next, Exit Strategies