Pointillist Landscape

About this style

Neo-Impressionism began in Paris in the mid-1880s with Georges Seurat, whose A Sunday on La Grande Jatte was shown at the last Impressionist exhibition in 1886, and Paul Signac. Drawing on color theory by Michel Eugène Chevreul and Ogden Rood, they set small separate dots of unmixed color side by side so the eye mixes them at a distance, a method called pointillism or divisionism. Complementary colors were placed together to make light vibrate, and Seurat sometimes painted dotted borders on his canvases. The technique lives on in illustration, generative art and motion pieces built from particles.

Make a 10-second Neo-Impressionist river scene built from tens of thousands of separate dots of pure color that land in passes and resolve into a picture as the camera pulls back.

<inputs>
Title: A Sunday at Saltreed Bend. Line: Pure color, mixed by the eye. Scene: a river on a summer afternoon, poplars and a red-roofed boathouse on the far bank, a sailboat, and a woman with a parasol and a small dog on the near bank. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Pigments, the only colors any dot may take: cobalt #3060D0, ultramarine #3B3FA6, violet #8A5CB6, rose #D9608E, vermilion #E14A2E, orange #EE8B2F, cadmium yellow #F2C53E, lemon #F3E46C, emerald #2E9E5C, viridian #1F7963, ochre #C99B4C, white #F7F2E4. No black, no grey, no mixed colors. Bare primed canvas is #F4EEDD.
The scene, painted once at load into a hidden 480×270 reference: a pale sky from #F3EBD0 at the horizon to #A9C3E6 at the top with a few soft cumulus; the far bank at y 430–520 with a row of tall poplars and round trees and the boathouse with a red roof and white walls; the river from y 520 to 820, reflecting the bank in broken vertical streaks and the sky in pale bands; a sailboat with a tall white sail at x 1250, y 400–600; the near bank from y 820 down, sunlit grass crossed on its left half by the long violet-blue shadow of an unseen tree; a woman in a dark blue dress under a rose parasol at x 520, 260px tall with her feet at y 950, and a small dog at her feet, both simple, upright Seurat-like silhouettes.
Dots: about 50,000, placed once at load by seeded Poisson-disc sampling at 5.5px minimum spacing, plus 12,000 smaller detail dots (4–6px) along edges: the sail, the roofline, the figure, the trunks. Each dot is a slightly oval dab 6–10px across with a soft impasto highlight, at a seeded angle, drawn from pre-rendered sprites. Its pigment comes from optical mixing: from the reference color at its position, pick among the two to four pigments of that region's recipe with probabilities that average to the target, then swap 8% of dots for complements (orange and lemon in the blue shadows, violet and cobalt in the sunlit grass, rose in the water). Recipes: sky, white + cobalt + rose, with lemon near the horizon; foliage, emerald + viridian + ultramarine, with yellow in the lights; water, cobalt + white + rose + viridian; grass, lemon + emerald + orange; shadow, ultramarine + violet + emerald. No dot is ever the flat color of its area.
A painted border, as Seurat sometimes painted: a 36px band of dots inset 64px from the frame edge, each dot the complement of the picture just inside it.
Camera: starts at 3.2× on the water beside the sailboat, where the dots read as pure abstract color, and pulls back to 1.0× from 1.6s to 6.0s on cubic-bezier(0.45, 0, 0.15, 1).
Motion: dots land in passes, like a painter working: each dot scales from 0 to 1 in 0.12s at its landing time, and each pass sweeps across the regions in broad diagonal strokes. Pass 1 lays the main color of every area sparsely; pass 2 fills in and adds the complements; pass 3 adds the detail dots. After landing, only the water moves: its dots sway ±2px horizontally on slow sines (2–3s periods), and the sailboat drifts 50px right. No dot twinkles, flickers or changes color.
Type: the title in "Gloock" 400, 64px, #2B3270, in the sky at (140, 170); the line in "Spectral" 400 italic, 26px, #3D4A7A, beneath it. Leave a dot-free margin of primed canvas behind both so they stay crisp.
The real thing mixes in the eye: no dot matches its area, shadows full of blue and violet with sparks of orange, and the picture only resolves at a distance; the cheap version is a halftone or mosaic filter over a picture.
Banned: black or grey dots, mixed or muddy colors, a regular dot grid or halftone, brushstrokes or lines, blur or blending between dots, outlines, gradients outside the hidden reference, dots that twinkle or boil, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–1.6s: close on the water at 3.2×: bare primed canvas, then pass 1 sweeps in, big dots of cobalt, rose and white with no picture yet.
1.6–3.6s: pass 2 fills every region and the complements land; the camera pulls back, and the sail, the far bank and the reflections begin to read.
3.6–5.2s: pass 3 lays the detail dots along the sail, the boathouse, the poplars and the figure.
5.2–6.0s: the camera reaches 1.0× and the whole scene resolves.
6.0–7.0s: the painted border lands around the frame in one clockwise sweep.
7.0–7.8s: the title and line fade up in the sky.
7.8–10.0s: hold; only the water's dots sway and the sail drifts, both easing to stillness by 9.0s.
For other durations, scale every timestamp proportionally.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; no other libraries (no three.js: this style is flat). Draw in Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself: await document.fonts.load() for each face, then define window.seek. At load, paint the hidden reference and place every dot (position, pigment, size, angle, landing time) and pre-render the dot sprites per pigment; each frame draws the dots that have landed by t through the camera transform, with the water's sway computed from t. Keep load under 10s. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Anything cumulative is precomputed once at load at a fixed step or solved analytically from t, so any frame can be drawn directly. Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check the opening frames read as abstract dots and the 6s and final frames read clearly as the river scene, every dot is one of the twelve pigments, shadows contain blue and violet with orange sparks, no dot changes color between frames, the border sits inside the frame, and the title reads on clean canvas. Confirm seek(duration) and seek(duration + 1) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Generative Flow Field

Made by us

Thousands of fine particles ride a curl-noise current, gather into a word or logo like a living engraving, dissolve bac…

Hyperspace Jump

Made by us

A deep starfield stretches into blue-white streaks around one vanishing point, merges into a rolling tunnel of light, t…

Fireworks Finale

Made by us

Shells climb from harbor barges and burst into peonies, chrysanthemums, rings, palms and a finale of drooping gold will…

Starling Murmuration

Made by us

Thousands of starlings flow across a peach and mauve dusk sky as one mass, darkening into bands as the flock turns, par…