Catalogue / Plate 09← All plates

A lens that shows the finished house

A glass lens that shows the finished house over the one as found.

09 / WebGL

A tired brick chalet as found: a tiled roof, a brick gable and a white garage door.

As found

Through the lens, a visualisation of the finished house: a slate roof, rendered walls, timber cladding and full-height glazing.

Sampleton BuildersOur work

Renovation and extension

The same house. Finished.

Move across the photo: inside the lens is the house we would build, and around it the new lines are drawn over the old.

pictures decoded … · lens waiting

Remake it

Build one interactive web page: The portrait-lens signature, on a renovation: a glass lens follows the pointer over the house as found and shows the finished house through it, while the new design is drawn in line over the old around it. One WebGL shader, two decoded pictures.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A trade with a registered before-and-after of the same house: renovation, extensions, landscaping. It turns a comparison into something a visitor explores. Do not let it fail the way this kind of piece usually does: Showing a render as built work, and opening the lens before the picture has arrived. Here the lens carries a 'Visualisation' label, waits for both pictures to decode, and the photograph underneath stands in if WebGL fails.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.
Notes: when it suits, when it does not, how it fails
When it suits
A trade with a registered before-and-after of the same house: renovation, extensions, landscaping. It turns a comparison into something a visitor explores.
When it does not
A pair shot from two positions (the lens would show a different building), and visitors who only want the finished picture.
How it fails
Showing a render as built work, and opening the lens before the picture has arrived. Here the lens carries a 'Visualisation' label, waits for both pictures to decode, and the photograph underneath stands in if WebGL fails.

Measured on: landonorris.com · T9 · A construction client's build · C1, C4. Built from scratch for an invented business; nothing here comes from the site studied.