0

No products in the cart.

Tutorial: Origami and projection mapping

I’ve been doing creative workshops with kids and schools for years (with 8-10 years old) and this can be an easy and creative activity to do at home during the confinement.

All you need to make the sculpture is paper, tape, and a bit of time.
For the mapping part, you’ll need a projector and computer to animate your origamis with light (video Part 2, coming soon).

This tutorial is based my series “Paper and light“.


PART 1: ORIGAMI

PART 1
PART 2

Here’s the tutorial in French / tuto en Francais.

PAPER FOLDING: STEPS

STEP 1
STEP 4
STEP 2
STEP 5
STEP 3
STEP 6


Now, make as many as you can.

PART 2: Projection mapping.


In order to demonstrate the principle of projection mapping, I slightly modified the code from Method draw, a tool developed by Mark MacKay. It works in any computer and browser.

https://joanielemercier.com/mapping/

Instructions:

1- Setup your projector

  • Install and plug projector (it must be stable and NOT MOVE at all).
  • Make sure the projection area covers the origami.
  • Focus image.
  • Connect your computer (you may use duplicate or extend mode).

2- Open the mapping tool in a browser (I use chrome) in full screen mode (F11).
On a Mac, it’s “Apple + ctrl + F”.

Select the canvas size on the right, to match your projector resolution (often 1920*1080).
That’s it, you’re all set !

3- Trace the edges
Select the Line tool (shortcut: L).
Place your cursor on a corner,
Click and drag to the next corner. Repeat.

Use Select (V) to select and move elements.
You can save your progress as an .svg file.
Repeat until the entire structure is mapped.

4- Animation mode
When all lines are traced, you can switch to the animation mode:

  • Press “Space” to hide all menus.
  • Press “N” to turn the ‘noise animation’ on. It’s a generative mask that hides some of the lines.

    Thanks Patricio Gonzalez Vivo for the shader code !

What else ?
If you’re a developer and if you know html, CSS and javascript, feel free to get in touch to give me a hand to develop more animations and options to this simple software.

Feel free to save and export your mapping (save SVG in the menu).
You can also use other mapping softwares such as Madmapper, HeavyM (they both have demo versions) or any animation software to go beyond this tutorial.

Please send me some pictures of your compositions on our facebook page !

Comments

  • Joe Brailsford

    March 25, 2020 at 11:29 pm

    Hey. This is amazing! Could you do a quick video on how you mapped the structure in the computer? Are you using resolume? Keep up the great work!!

  • Patrick Whitty-Clarke

    March 27, 2020 at 1:08 pm

    Hey Joaniele,

    This is excellent, thanks for sharing this! I’m going to give this a go soon.

    PS: I saw your installation in London a few weeks ago, it was really good

  • Chris Dennett

    April 9, 2020 at 1:22 pm

    Thanks so much for this, my daughter and I have been looking for interesting art projects to do together. She’s into origami and I’m a web dev into SVG and want to try projection mapping!! So this feels perfect. We’ll post our results when we’re done! Soooooo exciting. Merci beaucoup.

  • Suzanne

    April 9, 2020 at 10:38 pm

    Thank you for this. I would like to try this with my daughter however we don’t have a projector. Will any projector work or is there a specific kind?

  • Paco Angeles

    April 10, 2020 at 7:03 am

    Hi Joanie, I really love your art, it’s super amazing, you have really inspired me to be into projection mapping, thank you so much for share, I dream to have the chance to see your artworks in real life someday. Thanks Joanie

  • Mapping vidéo & Origami – Make!

    April 11, 2020 at 9:57 pm

    […] La procédure complète est disponible sur le site de Joanie Lemercier : https://joanielemercier.com/origami/ […]

  • Rubén

    April 26, 2020 at 6:25 am

    Thanks for sharing this. It’s a pleasure to learn some processes that you use. Amazing work.

  • Gabrielle

    May 8, 2020 at 9:02 pm

    I have been wanting to dabble in Projection mapping for years and your easy to understand and simple instructions allowed me to finally complete my first project. I am so thrilled and grateful for you sharing this. Please create more tutorials.

  • Soumik Pal

    May 17, 2020 at 6:43 am

    Thanks so much for this detailed tutorial! I’ve got everything up and running for my setup and am enjoying how easy it is to use your mapping software. I have one question – is it possible to make a custom shape and then fill it in with a color? My triangles are not all equilateral, but I would love to try playing with some color fill/blocking patterns. It seems all the preset shapes do not fit my needs quite right, I was hoping there is some way to create a custom shape using lines and then fill it in, similar to paint bucket tool in Photoshop? Let me know your thoughts and if you may be planning to add something like this to the software? I can provide video if unclear. Appreciate it again.

  • Martin

    June 30, 2020 at 5:33 pm

    Dear M. Lemercier, many thanks for the great project.

  • Imanol Zubiauz

    April 13, 2021 at 1:55 pm

    Thank you very much Joanie! I used to work with Resolume but your software is better and easier to do a workshop of a few hours. I am teaching art with young students and they love it.

  • Capstone Journal in Progress – A L I E N J U P I T E R

    October 21, 2022 at 11:18 am

    […] Tutorial: Origami and projection mapping […]

  • Chris

    December 30, 2022 at 9:56 pm

    Hey,
    I live that project. Is that code on GitHub or somewhere else.
    I like to to support that code.

    Best regards
    Chris

  • Do-it-yourself: Origami and video mapping in your walls – Probeta Mag

    September 28, 2024 at 6:20 pm

    […] video tutorial was made during the 2020 Covid confinement to make your own installation at […]

Your email address will not be published. Required fields are marked *