Painting, Lately

Old paintings. Very current problems.

Drag modern stickers into three Dutch Golden Age paintings, give someone in the painting a line to say, and download your remix as a PNG.

Open it here: https://vw2335.github.io/painting-lately/

How to use it

1. Pick a painting at the top: The Milkmaid, Woman Reading a Letter or The Merry Family. Each one keeps its own remix.
2. Drag a sticker from the drawer onto the painting. Drag it to move it, pull a corner to resize it, and spin the dot on top to turn it. The small bar above it has Back, Forward, Flip and Delete.
3. Captions: write a line (up to 40 characters), pick a bubble, ribbon or plaque, and choose Paint it in.
4. Your photo: take a photo or upload one, draw around the part you want, and it is painted to match. It never leaves your browser.
5. Frame it, give it a title, and choose Download remix.

The dark bar under the painting has Undo, Redo, Before/After and Layers. The wall label next to the painting has a story menu, which suggests stickers, caption ideas and a title. The first visit shows a short welcome and four tips; How it works replays them.

Run it on your own computer

There is no build step and nothing to install. The scripts are ES modules, so the page has to be served by a web server rather than opened as a file:

python3 serve.py

Then open http://127.0.0.1:8123/. python3 -m http.server works too; serve.py only adds a no-cache header so edits show up on reload.

The code

Plain HTML, CSS and JavaScript modules. No frameworks, no libraries, no web fonts, no analytics.

index.html            the page: top bar, sticker drawer, the painting's room, dialogs
styles.css            all styling: tokens, rooms, drawer, dock, phone layout
serve.py              local preview server (not needed online)
scripts/
  app.js              the app: state, rendering, views, keyboard paths, export button
  content.js          everything you can edit as content: paintings, stickers, stories,
                      caption ideas, examples, interface text
  scene.js            draws a scene (studio, framed result, thumbnails)
  interactions.js     pointer gestures: drag in, move, resize, rotate
  geometry.js         pure maths for positions, sizes, rotation and edge limits
  history.js          undo and redo
  storage.js          saves scenes in this browser and checks them when loading
  ambient.js          tints each sticker to the light of the painting it is in
  export.js           draws the PNG on a canvas
  captions.js         letters a caption as a bubble, ribbon or plaque
  painterly.js        repaints captions and photos with oil-style brush strokes
  stickers.js         the photo sticker maker (camera, upload, outline)
  tour.js             the welcome card and first-visit tips
  util.js             small shared helpers
assets/
  painting/           the three paintings (2000 px wide)
  props/              the 36 stickers (transparent WebP)

How it works

• One scene format. Each placed sticker is { id, propId, x, y, width, rotation, flip }. Position and width are fractions of the painting, so the same scene fits any screen size and the export. The order of the list is the layer order. A scene holds up to 20 stickers.
• One renderer. scene.js draws the studio, the framed result and the thumbnails from the same data. Stickers sit in a layer clipped to the painting, so anything hanging over the edge is cut off in the same place on screen and in the PNG.
• Export without screenshots. export.js redraws the painting and stickers on a canvas (1600 px on the long edge) with a mat, the title and a credit line. Selection handles and buttons can never end up in the file.
• Light matching. ambient.js gives each sticker a little of its painting's light (warm for The Milkmaid, cooler for the letter) and caches the result.
• Saving. Scenes, your captions and photo stickers are kept in localStorage. Everything read back is validated; if storage is unavailable, the app keeps working without it.
• Keyboard. Every sticker can be placed with Place in center, then moved with the arrow keys (Shift moves further) and edited from the Layers sheet.

Adding or changing a sticker

1. Put a transparent image in assets/props/, trimmed to the object.
2. Add a line to PROPS in scripts/content.js:

   { id: 'tulip', group: 'relatable', label: 'Tulip mania', src: 'assets/props/tulip.webp', ratio: 324 / 377, width: 0.16 },
   

   ratio is the image's pixel width divided by its height. width is the starting width as a fraction of the painting's width (0.025 to 0.85). group is one of the shelves in PROP_GROUPS.
3. To feature it, add its id to a story's priority list in STORIES.

If you remove a sticker, add its id to RETIRED_PROP_IDS, so scenes people have saved drop it quietly instead of failing to load.

Each painting's wall colour, stories, caption ideas and example remix are also in content.js. The strength of the light matching is in ambient.js, and colours and spacing are tokens at the top of styles.css.

Browser support

Built and tested in Chrome on a Mac, at desktop, tablet and phone widths. It has not been tested in Safari or Firefox, or on a real touch device.

Credits

The three paintings are the Rijksmuseum's own photographs, marked Public Domain Mark 1.0. The Rijksmuseum has not seen or endorsed these remixes.

File	Painting
milkmaid.jpg	The Milkmaid, Johannes Vermeer, c. 1660 (SK-A-2344)
woman-reading-letter.jpg	Woman Reading a Letter, Johannes Vermeer, c. 1663 (SK-C-251)
merry-family.jpg	The Merry Family, Jan Havicksz. Steen, 1668 (SK-C-229)

The stickers were made for this project. The code was written for this project with Claude Code, directed by the project owner.