Skip to the paint studio
← Acrylics / material workshop

A material study by Erikk Shupp

NO. 03 / FRESH PAINT

ACRYLICS

LEAVE A MARK.
LET IT MIX.

1 + 1 = something else.

Drag the bristles. Let the color muddy.
Keep the beautiful accidents.

Make a little mess

01 / ACTUAL MARK MAKING

LET IT GET MESSY.

Loaded bristles. Broken edges. Colors that get into each other.

Careful.
Still wet.
work-in-progress.acrylicsBRUSH / PIGMENT / CANVAS
Red and ochre bristle strokes cross forest green. Their wet intersections mix into earthy colors; blue and red blots pool beside a broken white stroke.
Drag to paint. Lift to reload. Pen pressure changes width and deposit; a mouse uses Hand pressure.760 × 480

UNDER THE BRUSH

—
Paint loading…385, 171
LOAD THE BRUSH

Vermilion

76
90%
60%
85%

A longer stroke runs low on paint. Dry bristles catch the canvas grain. A blot leaves a pooled rim and little satellites.

Preparing the paint surface…

THE COLOR GETS COMPLICATED

A little green takes
the heat out.

Work forest green into vermilion and the mix turns earthy. The same colors laid over a dry coat behave differently: the underpainting shows through the gaps.

Change either pigment, then load the mix onto your brush.

Pigment mixing comparison
50 : 50
Pigment mix—
RGB average—
What makes this feel like paint?

Every mark has a history.

Paint load falls with distance. Pressure changes the contact area and deposit. A fixed seed gives each stroke its own bristle tracks, gaps, and uneven thickness. Those marks stay put when the page redraws.

load(d) = load₀ × exp(−d / reach)
coverage = 1 − exp(−2.8 × deposit)

Wet color is a mixture.

Estimated reflectance is mixed across 38 wavelengths using Spectral.js and the Kubelka–Munk model. The brush uses a cached approximation for speed. Drying fixes the underpainting; new marks then cover it.

K/S = (1 − R)² / (2R)

A procedural paint study, with approximate relief and instant drying. RGB colors stand in for pigments; this does not predict a particular tube of paint or simulate fluid flow. Spectral.js · MIT license ↗

02 / THE GEOMETRY UNDERNEATHShapes, overlaps & digital color math

THE ORIGINAL SHAPE STUDY

Geometry has its place.

untitled-003.acrylics
Pink, cyan, and yellow geometric shapes overlap into new colors on a warm ground.
Drag a shape. Pick a color. Follow the crosshair.POINT 500, 375

At the crosshair

#FFF9ED
RGB 255 · 249 · 237Ground
THE PAINTBOX

f(B,S) = B × S

Choose a layerA → B → C
#F66A9A
72%
245
0°
Position & proportions
360
320
1.00
Move the color sampler
500
375

The paint stays in this browser session.

THE PALETTE YOU MADE

Three coats. Eight possibilities.

These are all possible layer combinations; your arrangement determines which ones appear on the canvas.

Show me the math.COLOR × GEOMETRY

At the crosshair

C = (1 − α)B + α f(B, S)

B: color underneath · S: new color · α: coat opacity.
RGB channels are normalized to 0–1 before blending.

  1. Choose a point to inspect its layers.

The hex readout samples the rendered canvas before guides. Edges include antialiasing; channel rounding can differ slightly from the ideal equation.

Circle / ellipse

(x/a)² + (y/b)² = 1

a = 245 · b = 245

Stretch one axis to turn a circle into an ellipse.

Rotate, then placex′ = x cos θ − y sin θ + tx
y′ = x sin θ + y cos θ + tyθ = 0° · t = (360, 320)

Digital color arithmetic, inspired by paint. This does not predict real pigment mixtures. Compositing reference ↗

03 / A LANGUAGE OF PAINT

The material becomes the language.

TYPE / STREET PRESENCE

Headlines stand tall.

Condensed display type, short statements, generous margins. Body copy gets an opaque ground and room to breathe.

COLOR / VISIBLE HISTORY

Keep the imperfect edge.

A stroke can underline a headline. A blot can hold an accent. Let the paint carry the expression; keep text and controls on a calm, readable ground.

A tactile little interaction.

INTERACTION / EARLY WEB JOY

Make it feel pressable.

Glazed buttons, window tabs, crisp borders. Shape and color respond to deliberate actions, then settle.