← Alla projektAll projects/ 01
00:00:00
01scan.exrik.se● live

QR
Morph

En skärm som visar en scen. Håll upp mobilen, så blir scenen en QR-kod.A screen showing a scene. Hold up your phone and the scene becomes a QR code.

Three.jsTensorFlow.jsWebSocketNode
Öppna ↗Open ↗
live 3d

Ett träd som blir en QR-kodA tree that turns into a QR code

Från sidan är det bara en scen på en skärm. När någon håller upp mobilen ser kameran den, och scenen vrids tills man ser den ovanifrån. Då bildar löven och gräset rutorna i en QR-kod. Koden leder till mobilen, som sedan kan styra det som händer på skärmen.From the side it is just a scene on a screen. When someone holds up their phone, the camera spots it and the scene turns until you see it from above. Then the leaves and the grass form the squares of a QR code. The code leads to the phone, which can then control what happens on the screen.

p = 0.00
Skanna migScan me qr-morph / tree / live 3d
01QR Morph

IdénThe idea

En QR-kod på en skärm är tråkig att titta på. Här är koden gömd i en scen: ett träd, en stad eller en konsertpublik. Från sidan ser det ut som vanligt. Ovanifrån bildar delarna av scenen precis rätt rutor, och då går koden att skanna.

A QR code on a screen is dull to look at. Here the code is hidden in a scene: a tree, a city or a concert crowd. From the side it looks like nothing special. From above, the parts of the scene form exactly the right squares, and then the code can be scanned.

02QR Morph

Så funkar detHow it works

  • En webbkamera tittar efter en mobil. Igenkänningen görs i webbläsaren med TensorFlow.js, och bilden lämnar aldrig datorn.
  • När mobilen syns i två av de fyra senaste bilderna vrids kameran upp ovanför scenen och koden syns.
  • Koden leder till en sida på mobilen. Den är kopplad till skärmen via en server, så det man gör i mobilen syns direkt på skärmen.
  • A webcam looks for a phone. The detection runs in the browser with TensorFlow.js, and the picture never leaves the computer.
  • When the phone shows in two of the last four frames, the camera rises above the scene and the code appears.
  • The code leads to a page on the phone. It is connected to the screen through a server, so what you do on the phone shows on the screen straight away.
03QR Morph

VarianternaThe variants

  • Konsert. Publiken bildar koden. Man väljer nästa låt och kan lyssna i mobilen.
  • Röstning. Två träd med var sin kod. Mobilens position avgör vilket som visas, och skanningen räknas som en röst.
  • Träd. Löven och gräset bildar koden.
  • Stad. Taken bildar koden. Från mobilen går det att skjuta upp fyrverkerier och tända fönster.
  • Kontor och Race, där mobilen blir en ratt.
  • Concert. The crowd forms the code. You pick the next song and can listen along on your phone.
  • Vote. Two trees, each with its own code. Where you hold the phone decides which one shows, and the scan counts as a vote.
  • Tree. The leaves and the grass form the code.
  • City. The roofs form the code. From the phone you can launch fireworks and light up windows.
  • Office and Race, where the phone becomes a steering wheel.
KonsertConcert ↗RöstningVote ↗TrädTree ↗StadCity ↗KontorOffice ↗RaceRace ↗
04QR Morph

JukeboxenThe jukebox

Konserten är också en jukebox. Prova själv på scan.exrik.se/concert/demo: håll upp mobilen och skanna koden, välj en låt i mobilen, så spelas den i webbläsaren och syns på scenens skärm. Du kan också lyssna i mobilen, i takt med scenen. Låtarna är 22 fria CC0-spår, så det behövs inget konto och ingen Spotify.

På fester kör jag samma jukebox mot min egen Spotify, på jukebox.exrik.se. Gästerna söker och önskar vilken låt som helst, och låtarna hamnar i kön på min Spotify. I en adminsida bestämmer jag reglerna, till exempel hur många låtar var och en får önska och om önskningar ska godkännas först.

The concert is also a jukebox. Try it yourself at scan.exrik.se/concert/demo: hold up your phone and scan the code, pick a song on your phone, and it plays in the browser and shows on the stage screen. You can also listen on your phone, in time with the stage. The songs are 22 free CC0 tracks, so you need no account and no Spotify.

At parties I run the same jukebox against my own Spotify, at jukebox.exrik.se. Guests search for and request any song, and the songs go into the queue on my Spotify. On an admin page I set the rules, for example how many songs each guest may request and whether requests need approval first.

05QR Morph

Under huvenUnder the hood

  • Scenerna är byggda i Three.js. Varje ruta i QR-koden är en del av scenen, som ett tak, ett lövverk eller en person.
  • Mobilen känns igen med COCO-SSD i TensorFlow.js, helt i webbläsaren.
  • En Node-server med WebSocket kopplar ihop skärmar och mobiler i rum.
  • Körs i Docker på en egen server hos Hetzner, bakom Cloudflare.
  • The scenes are built in Three.js. Every square of the QR code is a part of the scene, like a roof, a bit of foliage or a person.
  • The phone is recognised with COCO-SSD in TensorFlow.js, entirely in the browser.
  • A Node server with WebSocket connects screens and phones in rooms.
  • Runs in Docker on my own server at Hetzner, behind Cloudflare.