Skip to content
Sample of Hobbs Color-Field Overlay (Tyler Hobbs compositional method)

hobbs_cherniak_penne_deep · HobbsColorFieldOverlay

Hobbs Color-Field Overlay (Tyler Hobbs compositional method)

Hobbs's compositional method of choice: combine TWO independent fields — a Perlin flow field that drives the *trajectory* of a set of line segments, and a Gaussian-blurred colour field that drives the *colour* and *opacity* of those segments. The colour field's brightness is used as a soft *mask* on the line segments, so segments that fall in a dark patch of the colour field are not drawn. The result is a flow-field drawing where the underlying structure is visible only where the colour field permits it — the soft, painterly, partially-revealed look that distinguishes Hobbs's mature work. Hobbs calls out this approach in his 2020 'Flow Fields' essay under 'Mixing With Other Techniques': 'You can insert objects that distort the grid around them. With Ectogenesis, I approximated how fluid would move and wrap around an object.' Each segment is a polyline of K points advanced by the structural Perlin field, and the segment is drawn with a colour sampled from the colour field at the segment's midpoint.

Original: https://www.tylerxhobbs.com/words/flow-fields

▶ Try the live demo (JS port) ▶ Run reference.py via Pyodide 10 formulas have instant JS ports. The Pyodide path runs the actual Python in your browser — first load is ~6 MB, then instant.

Family
hobbs_cherniak_penne_deep
Source
hobbs_cherniak_penne_deep
Evolution
curve
Render
polyline_trail
Complexity
medium
Agents
800
Year
2021
Author
Tyler Hobbs (algorithmic homage)

Math essence

Build two fields on the canvas: an angle field G = 2*pi * P_flow and a colour field C = (H, S, V) all derived from independent Perlin noises, then Gaussian-blur C with sigma. Spawn N segments at random positions. For each segment: walk K steps along G to produce a polyline. At the polyline's midpoint m, sample (R, G, B) from C and brightness = 0.299 R + 0.587 G + 0.114 B. If brightness < threshold, skip the segment. Else draw the polyline with colour C(m) and alpha proportional to (brightness - threshold) / (1 - threshold).

Parameters

Name Type Default Range Description
dim int 600 200–1500 Square canvas side length (px).
num_segments int 800 50–5000 Number of segments N drawn per cycle.
segment_steps int 60 5–400 Steps K per segment (segment length).
flow_resolution_frac float 0.012 0.002–0.05 Flow grid cell size as fraction of dim.
flow_margin_frac float 0.5 0–1.5 Flow field margin, fraction of dim.
flow_noise_scale float 0.085 0.01–0.5 Perlin spatial frequency for the flow field.
color_resolution_frac float 0.02 0.005–0.1 Colour grid cell size as fraction of dim (used as base scale).
color_noise_scale float 0.03 0.005–0.2 Perlin spatial frequency for the colour field.
color_blur_sigma float 22 0–80 Gaussian blur sigma (px) for the colour field.
color_hue_base float 0.58 0–1 Base hue of the colour field.
color_hue_range float 0.3 0–1 Hue range sampled by the colour field.
brightness_threshold float 0.3 0–1 Minimum colour-field brightness to draw a segment.
step_length float 2 0.1–12 Per-step pixel advance along the flow angle.
background tuple 245,240,232 null–null Background RGB colour.

Reference

First 60 lines of reference.py. Full source: library_external/hobbs_cherniak_penne_deep/HobbsColorFieldOverlay/reference.py

"""HobbsColorFieldOverlay — Tyler Hobbs compositional method.

Hobbs's compositional method of choice in *Incomplete Control*,
*Fidenza*, and many of his 2020 essays is to combine TWO
independent fields:

    1. A Perlin flow field that drives the *trajectory* of a set
       of line segments (the "structural" layer).
    2. A Gaussian-blurred colour field that drives the *colour*
       and *opacity* of those segments (the "expressive" layer).

The trick is the third step: the colour field's brightness is
used as a *mask* on the line segments, so segments that fall in
a dark patch of the colour field are not drawn at all.  The
result is a soft, painterly composition where the underlying
flow field's structure is visible only where the colour field
permits it.

Hobbs describes this exact approach in his 2020 "Flow Fields"
essay under "Mixing With Other Techniques":

    "You can insert objects that distort the grid around them.
    With Ectogenesis, I approximated how fluid would move and
    wrap around an object."

The kernel we implement:

    1. Build a Perlin angle grid covering the canvas plus a
       margin (the structural field).
    2. Build a second Perlin field of (R, G, B) values (the
       colour field).  Gaussian-blur this field with a
       configurable sigma to soften it.
    3. Spawn N line segments.  Each segment is a polyline
       through K points, each point advanced by the structural
       field's angle.
    4. For each segment, the colour is sampled from the colour
       field at the segment's midpoint, and the segment is drawn
       only if the colour field's brightness at that point is
       above a threshold.  The alpha is proportional to the
       brightness.
    5. The output is a flow-field drawing with the colour field
       acting as a soft mask.

Reference:
- https://www.tylerxhobbs.com/words/flow-fields
- https://www.tylerxhobbs.com/works/ectogenesis
"""
from __future__ import annotations

from typing import ClassVar

import numpy as np

# Re-use the perlin kernel from HobbsFlowField (we redefine a small
# 2D Perlin here to keep this formula self-contained).
def _fade(t: np.ndarray) -> np.ndarray:
    return t * t * t * (t * (t * 6 - 15) + 10)


def _perlin2(perm: np.ndarray, x: np.ndarray, y: np.ndarray) -> np.ndarray:

Try running it locally

The reference implementation is self-contained Python with numpy. Install the package and run:

python library_external/hobbs_cherniak_penne_deep/HobbsColorFieldOverlay/reference.py

Need help? See Learn for the standard environment setup, or Playground for an in-browser sketchbook.

More from hobbs_cherniak_penne_deep

Sample of Cherniak Constellations (Dmitri Cherniak point-cloud + graph)

Cherniak Constellations (Dmitri Cherniak point-cloud + graph)

hobbs_cherniak_penne_deep · CherniakConstellations

A pseudo-random point cloud with connecting lines filtered by distance, producing graph-like emergent forms.

View →
Sample of Cherniak Nibbles (Dmitri Cherniak cell-eating cellular automata)

Cherniak Nibbles (Dmitri Cherniak cell-eating cellular automata)

hobbs_cherniak_penne_deep · CherniakNibbles

A cellular-automata growth algorithm in the spirit of Dmitri Cherniak's body of work — small 2D shapes ('nibbles') that grow by selectively removing neighbours.

View →
Sample of Hobbs QLIQUE (Tyler Hobbs — QQL dense-streamline tangle)

Hobbs QLIQUE (Tyler Hobbs — QQL dense-streamline tangle)

hobbs_cherniak_penne_deep · HobbsQLIQUE

A dense tangle of curves where every curve is a streamline through a Perlin flow field, in the visual spirit of Tyler Hobbs's 2022 QQL release (with Dandelion Mane).

View →
Sample of Hobbs Spirograph (Tyler Hobbs — Petal Loops / Elektroanima)

Hobbs Spirograph (Tyler Hobbs — Petal Loops / Elektroanima)

hobbs_cherniak_penne_deep · HobbsSpirograph

A rotating-circular-arc trail in the spirit of Tyler Hobbs's *Petal Loops* (2020) and *Elektroanima* (2020) — works described by Hobbs as 'looping taken to an excessive level.' M rotating points (default 8) are connected by a closed polyline that morphs each frame as the whole ring rotates by a small angle around a central anchor.

View →
Sample of Penne Imprecise Balance (Aaron Penne stacked-blocks column)

Penne Imprecise Balance (Aaron Penne stacked-blocks column)

hobbs_cherniak_penne_deep · PenneImpreciseBalance

A column of stacked rectangular blocks where each block is rotated by a seed-derived angle.

View →
Sample of Penne Ringers (Aaron Penne concentric ring extrusion)

Penne Ringers (Aaron Penne concentric ring extrusion)

hobbs_cherniak_penne_deep · PenneRingers

Penne's take on the *Ringers* idiom (best known from Cherniak's Art Blocks release, 2021): concentric rings extruded along the Z axis, rotated about a common axis, projected to 2D.

View →

See all hobbs_cherniak_penne_deep artworks →