The first day, we will do an introduction together and run a a MediaPipe coding tutorial and explain some examples that we will work from.

After a break, we will break up in groups and start working on ideas. Make a list of ideas for your project. The theme is mixed-media interactions and digital routines to tell a short story about our digital habits, but you are welcome to work on other theme if you have a good idea.

Some things to consider:

• What do you want to communicate? Do you want to make a statement?
• How can you make an interaction between the physical and the digital layer?
• What role can the body/hand/face play in these interactions? How many fingers, hands, bodyparts or humans are needed to communicate your idea?

Make the list as long as possible. Also include ideas you might not be completely convinced by, because afterwards you'll narrow down.

Add your initial idea list here.

After making the list, include rough sketches or references with the ideas you prefer the most. Sketch your ideas with your favorite medium (paper/software both allowed). It's okay if the ideas still shift a little, but these visual sketches will help us as a guide while we are programmingCollect your favorite sketch. At the end of the day, present and discuss the ideas in the group.

In the afternoon after the break, pick 2 – 3 ideas from your idea list that you enjoy the most and work the concept out further. Sketch them out in more detail and consider some more specific details:

Consider for the concept:

• What sentence/language/graphics are you using to show your idea?
• What is the link between the physical (body) and the digital layer (graphics)?
• What data do you want to use?
• How could you make a series of 3 animations of this concept? The series should be consistent in most aspect but can vary in layout, interaction or text.

Make a short slide presentation of 1–2 slides per concept. Based on these outlines, pick one concept that you want to work on after the break.

Today, we will work out the visual vocabulary and start coding our interaction.

In the afternoon, continue with your one concept and start sketching more thoroughly for the design.

Consider for the design:

• How could the concept translate in your design choices?
• How do you show the gestures? Does it need to be a camera feed or can you abstract it more?
• Design some assets for the graphics layer.
• How do graphics and body interact?
• What are the different 'states' of your interaction? Make a storyboard

For this design, add to your slide presentation showing your design choices. The design does not have to be completely finished yet, but you do need to develop a general visual vocabulary that you can build on. Upload a PDF version of the presentation with your concepts and final concept design to this folder.

Based on the design, develop a rudimentary website that contain the graphics, without the body / gesture interaction. The site does not have to be finished yet by the end of the day either, but the goal is that you have begun to test your design vocabulary in a website format.

This day, we are going to take our ideas and design and dive into the code part. Try to divide the work where possible: one person can try to debug while the other sketches out the interaction.

Sketch how your interaction will work so you can refer back to it while coding.

Meanwhile, are going to work out our interaction. Save versions of your code so that you do not miss out! Github works great for this, but you can also copy the folder with your code on your computer.

• What are different states of your animation?
• What needs to be detected and in what context?
• How and when are they triggered?
• What happens when nothing is detected? What happens when too many gestures are detected at once?

The CDN website is down for us today! If you want to circumvent this while we look for a more sustainable answer, use a VPN service. I like to use Proton VPN.

While we continue working on perfecting our interactions, we also design the 3 different versions in our series. Keep most parameters consistent but alternate with the pose, interaction, the language or elements of the graphics. Always try to alternate between sketching, and programming. Also make sure to document sketches and progress, even if they are imperfect.

We will also start looking at optimizing the code today, for instance make sure the framerate is high enough, where necessary.

Finalize the animation series and interactive work. Record your work and convert it to mp4 web format. Ideal format is landscape 1920 x 1080 px, portrait 1080 x 1920 px or square 1080 x 1080 px. Make sure the video is less than 50 MB per group. If you need to format it, we can recommend Handbrake to compress it.

Upload the video to the animations folder and the code to the code folder.