Post

Sam Rose
@samwho.dev

A cheeky lil' bit of off-screen progress on my Turing Machine visualisation. I want it to be very obvious how the state of the machine is changing with every instruction.

Sam Rose
@samwho.dev

What I’d like to do with this is have the 3 different “pointers” be different colours, and when they hover over each thing the text changes to white. CSS’s mix-blend-mode: difference is close to the effect I want but I want to be able to pick the text colour, not have it be the inverse. Ideas?

Sam Rose
@samwho.dev

The way it works atm, the pointers are elements inside of the same container as the table. The container has position: relative, and the pointers have position:absolute and z-index:-1 (so they pass underneath the text). I then tween the top, left, width, and height to move them to different places.

Sam Rose
@samwho.dev

This is _fine_ but it would be nice to be able to control the colour of the text as each pointer hovers over it. Just setting the colour is the wrong effect, it needs to be the mix-blend-mode type effect. Something something clipping?

0 reposts4 likes

Sam Rose
@samwho.dev

Invited you. It’s uh… very much a solo developer project 😅 You’ll need www.getzola.org and run it from the project root. Then you can access localhost:8080/turing-machines. TS is in static/js/turing. It uses bun. Run `bun run build-dev` to start a watcher that builds the TS.