Paper

Everything in shodo’s paint lands on paper, and the paper has a say. Its grain catches a dry stick on the crests and leaves the valleys bare. It drinks a wash or lets it sit. It runs in lines or has no direction at all.

import { feelPaper, PAPERS, WetGpu } from "shodo/paint";

const paper = feelPaper(PAPERS.coldPress, { tooth: 0.8, thirst: 0.3 });
const sheet = new WetGpu(canvas, 600, 400, { paper });

That is cold-press paper with a coarser grain that holds washes on top a little longer. Every sheet, wet or dry, takes a paper the same way.

The same washes on a paper shaped by the dials below. Paint on it, or let go of a dial to start again.open in the playground

Start from a paper

PaperWhat it is
laidPastel paper with a medium grain that runs one way, warm cream. The pastel default.
sandedFine, deep grit with no direction that holds many layers.
coldPressWatercolour paper: coarse, rounded grain, white and thirsty. The wet default.
tonedA soft grain on a mid grey-blue that takes few layers.

Feel

Five dials, each from 0 to 1. At 0.5 a dial leaves the paper you started from exactly as it was, so feelPaper(PAPERS.laid, {}) is laid paper.

  • tooth
    finecoarse

    How big the grain of the paper is.

  • roughness
    smoothrough

    How deep the grain goes, and so how much paint skips its crests or pools in its valleys.

  • lines
    no directionlaid lines

    How strongly the grain runs one way.

2 more dials
  • thirst
    sizedblotting

    How fast the paper drinks water: washes sit on top or soak straight in.

  • layers
    a fewmany

    How many coats of pastel the grain holds before it fills and stops taking more.

PAPER_FEEL holds the same words for building a panel. Thirst only matters to wet media and layers only to dry media; the others matter to both.

Underneath

feelPaper returns a plain Paper, so you can always set its fields directly: scale (grain size in px), depth, stretch (1 has no direction), angle (the direction of the lines, radians), capacity, absorbency (0 to 1), release and colour. angle and colour have no dial: set them on the paper.

const blue = { ...PAPERS.toned, colour: [0.3, 0.4, 0.6], angle: 1.2 };