brickCourses

A brick wall: staggered rows with mortar gaps, optional rotation and per-row drift.

brickCourses(slots: {
    cellsX: PropRef
    cellsY: PropRef
    mortar: PropRef
    softness: PropRef
    variation: PropRef
    rotation: PropRef
    offset: PropRef
    speedVariance: PropRef
    seed: PropRef
}): {bricks: PatternPaint; shade: PatternPaint}

Import patterns from shaders/std and use patterns.brickCourses.

Returns bricks (1 on a brick, 0 in the mortar) and shade (a brightness factor around 1 per brick for vary). cellsX is bricks per row across the canvas width and cellsY the number of rows down its height. mortar 0–1 widens the gaps (1 is 30% of a brick), equal in pixels both ways. softness 0–1 blurs the edges. variation 0–1 sets how far shade strays from 1. rotation is in degrees. offset slides the rows; 1 is one brick. speedVariance 0–1 and seed randomise the per-row drift. Declare animatedTime: {speed: 'speed'} on the definition. It brings its own frame, so there is no frame slot.

Parameters

NameTypeNotes
slots`{
cellsX: PropRef
cellsY: PropRef
mortar: PropRef
softness: PropRef
variation: PropRef
rotation: PropRef
offset: PropRef
speedVariance: PropRef
seed: PropRef

}` | |

Example

const field = brickCourses({cellsX: p('cellsX'), cellsY: p('cellsY'), mortar: p('mortar'), softness: p('softness'), variation: p('variation'), rotation: p('rotation'), offset: p('offset'), speedVariance: p('speedVariance'), seed: p('seed')})
// paint: strokeOver({fill: p('colorMortar'), stroke: vary(p('colorBrick'), field.shade), mask: field.bricks, space: p('colorSpace')})

See also

  • gridLines — Square grid lines drawn in a cellFrame, plus a per-cell shade for the fill.
  • cellFrame — The shared coordinate system of a tiled pattern: how many cells fit down the canvas height and how far the whole lattice is rotated.
  • vary — A color lightened or darkened per cell by a shade factor, alpha untouched.

Used by

BrickPattern