& Floz


Working in our Guesthouse in Nikko

Our second projection

In the middle of nowhere, in Shirakawa-go

Didn't read the first part? Learn more about Shirakawa-go and our roadtrip.

Some inspiration from an exhibition in Kanazawa

In Kanazawa (article coming soon), we visited the 21st Century Museum of Contemporary Art, and saw the Nous-sewing and living exhibition, which inspired us a lot. Especially around the subject of patterns. Inspiration from an exhibition in the museum of Kanazawa Inspiration from an exhibition in the museum of Kanazawa We even had the chance to talk a bit with one of the artist, and we left the place with a lot of ideas in mind.
Coming back home, we started to code and create around some stuff we saw, and some ideas we wanted to realized; all that for the projection in Kanazawa. Unfortunately, as we had some issue with the battery, we were not able to shape them.
That's why we took them back for Shirakawa, adapted and pushed them for the house we choose to project on.

The idea, and the process

To help visualize what to code, we sketched a bit. The goal was to determine what to do, and what rules to apply for the algorithm.
As we are talking about generative design, we need to have some rules to make the designs look mostly right or pretty, even if there is an infinite number of variations. I don't believe in full randomness, but I do believe in controlled randomness.
This is what we are doing here. Sketching and designing some patterns.

Generative art with patterns

With the set of rules defined, and the set of potential design, and after quite a lot of tests, here come the result:

(Click to generate new patterns)

Then, we integrated this canvas inside ThreeJS, after created a big grid of planes.
Putting them on a big plane and using some basic camera controls (rotation, pan, zoom), will allow us to project it quite easily on the house. You can see a video of this big grid, before the projection, and before creating a timeline for it.

Preparing a timeline

The conditions of the projection were not the best.
We received some warning from the manager of the guesthouse, saying that people might be scared, and that the "protected status" of the village might be a problem for the projection. We took those informations very seriously, and decided to be brief and efficient. For the previous projections, and the future, we mapped a lot of control on the midi pads we had. That allows us to be able to improvise in realtime, and to create many, many variations. In the end, it's perfect for a live show with an audience. Or for any shows that needs to keep going for a long time.
However, for a projection that needs to be fast, it's not ideal. That's why we worked the pattern to have some kind of a story in it. Here are the main patterns and animations way we thought about:
Patterns and animations style for the timeline of the projection mapping.

The final projection

Projection mapping in Shirakawa-go with ThreeJS and WebGL
Share this article if you liked it! :)