Two names, one cloth

Type two names and watch the colours meet where they cross.

39 / WebGL shader · generative · keepsake

Sampleton Weavers · name tapesWoven

Type two names. See what happens where they cross.

LengthwaysAcross

Letters and numbers, up to 10 each. Every letter picks a yarn and a width, so the same name always weaves the same stripes.

What the cloth says

A lively cloth.

Mostly Slate (50%), then Oatmeal (20%), then Bracken (20%).
ADA and SAM meet in 6 different colour pairs. The loudest: Oatmeal against Slate.
You share 1 of 4 colours.

Counted from the 88 by 46 crossings above the names, using the twill weave: which thread lies on top at each one, and which two yarns meet there.

Remake it

Build one interactive web page: Sampleton Weavers makes name tapes. This one has two names. Each letter picks a yarn and a width, one name runs lengthways and the other across, and a loom weaves the check where they cross, thread by thread, with both names woven in at the end. A short reading under it is counted from the crossings: the colours that dominate, how many ways your two sets of colours meet, how many you share, how loud the cloth is. Send the link and whoever opens it sees the same cloth.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A gift, a wedding or a birth page, a pet or a family, anything where two things have to be seen meeting and the result should be worth sending on. Do not let it fail the way this kind of piece usually does: A cloth that looks the same whatever you type, or a reading written before the cloth exists. Here the stripes come from the letters, the picture and the reading come from the same crossings, the link rebuilds the same cloth, and a browser without WebGL gets plain squares and is told the names band needs it.

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 gift, a wedding or a birth page, a pet or a family, anything where two things have to be seen meeting and the result should be worth sending on.
When it does not: A fair test of whether two people suit each other. It is a toy: the reading is real arithmetic about colour, not about people.
How it fails: A cloth that looks the same whatever you type, or a reading written before the cloth exists. Here the stripes come from the letters, the picture and the reading come from the same crossings, the link rebuilds the same cloth, and a browser without WebGL gets plain squares and is told the names band needs it.

Built after Pete's verdict of 'boring' on the configurator plates: the same loom shader, but the application is two people's colours meeting, a keepsake you send on rather than an order form.