How can we experience movement through coding, sensing and making?

Coding, Sensing, Making is a workshop that engages in a series of activities to look at movement from different angles of application, interpretation, and expression. The title for this workshop is derived from the book publication of the same name which documents five years of practice-led activities at Lasalle's Media Lab created between 2014 – 2018. Many of the works are collaborative and multidisciplinary in nature, and meet at the intersection of art, design, and technology.

Physical movement has been significantly disrupted in recent months due to lockdowns and circuit breakers locally and around the world. Limited mobility has led to sudden changes in the way we perceive, navigate, and travel through our near or far away surroundings. Staying home and seeing our world through screens has become even more normal than before but how has this affected our relationship to the way we move? What is it that moves? How do we experience movement around us or how do we express movement?

The aim for this workshop is to experiment with movement through different forms of expression. Throughout the workshop you will get to learn more about basic coding tools, and we will tap into various platforms and softwares that often become part of a designer's toolbox. Each week you should expect to be introduced to hands-on skills and knowledge which we apply in small activities related to creative coding, data, interaction, or physical computing. Activities will be conducted individually or in small groups. The outcomes arising from these activities will be documented and archived towards the end of the workshop.

The p5js project

The sketch

The online editor

How to run, duplicate and save p5js sketches

The online editor

How to run, duplicate and save p5js sketches

Remix code

Change numbers

Sketch out an idea and ask for help

Play

At the end of the session run the sketch on your laptop; take one or more screenshot or  a screen-recording and archive 

Sine, cosine and tangent function

movement from functions

frameCount

change over time

How to use OpenProcessing for the introductory tutorials listed in the next slide

OpenProcessing Introductory tutorials

2

The objective of today's session is to venture into the world of coding. The examples shown today range from basic to advanced. However, the purpose is not to speed-learn coding, but to explore code and make some changes here and there, or to think about changes or additions you would like to make to an existing code sketch and then ask for help.

After a brief introduction and demonstration, you can team up in groups of 2-3 to display your collected data with the sketches provided.

Then choose a more abstract approach to represent your data as static 2D or 3D images or in motion. If you are unsure how to approach this activity, sketch your idea on paper and ask for help.

2

What we aim to achieve today is to

• Export collected data as .csv file
• Team up in small groups of 2-3
• Display data as graph and on a map through code
• Create abstract representation of your data as static images and in motion
• Share your data so we can create 1 sketch to display all collected data together
• Optional: create a custom shape for you data to be displayed, if in doubt, ask for help.
• Document outcomes as images (screenshots) and videos (screen recording, editing and post production optional)

3

1

2

3

3.1

The examples to the right provide in-browser demos for a series of applications for real-time pose, face or object detection. Demos are build on top of tensorflow, a free and open-source machine learning library. 

3.2

Teachable Machine is a web-based tool that makes creating machine learning models fast, easy, and accessible. It is flexible – use files or capture examples live including static and moving images, sounds and poses.

1 Gather and group your examples into classes, or categories, that you want the computer to learn.

2 Train your model, then instantly test it out to see whether it can correctly classify new examples.

3 Test your model on the website.

How to use it? 

On the Teachable Machine website:

3.3

RunwayML is software that aims to make Machine Learning accessible to those for whom programming is not necessarily part of their profession and day-to-day work, such as artists, designers, filmmakers.

A machine learning model is a file that has been trained to recognize certain types of patterns. You train a model over a set of data, providing it an algorithm that it can use to reason over and learn from those data. RunwayML provides a collection of models that are trained to recognize features in static or moving images, to generate images by transferring styles,  to write texts, and more. 

3

1

2

3

5:00 PM

5:20 PM

7:30 PM

4

Anak Air, Heider Ismail

4

In this session we look at making using basic electronics components.

Infrared Sensor to detect obstacles

Arduino board to control two servo motors moving the arm.

Lightwave, Dhiya Md

Physical User Interfaces

Interactive Objects

Animated Objects

Breadboard

Used for prototyping and quickly build electronic circuits

Arduino

A micro-controller often used to prototype physical interfaces or products

Connect and release the two blue wires to turn the red LED on or off.

Control the intensity of the LED by covering the Photocell.

By touching the green wire, print the measured value to the Serial Monitor.

1

2

Use a capacitive surface to control light

3

Use 2 photocells to animate a Servo-Motor

Work in teams of 2.

Expected Outputs

Prototype

Documentation (images and videos)

Select 1 of the 3 projects and team up with another classmate. After the Arduino part has been resolved, use the Unit Lab to work on and document your process and results.

Build and design an object with or around your project.

If unsure about code or which electronics parts to use, resolve this together first. The No-Touch Button and the Animated Light for example can use the code from one of the earlier Demos. The Photocell Pong requires the addition of the Servo-Motor code and is therefore more challenging.

Work in teams of 2.

Select 1 of the 3 projects and team up with another classmate. After the Arduino part has been resolved, use the Unit Lab to work on and document your process and results.

Build and design an object with or around your project.

Expected Outputs

Prototype

Documentation (images and videos)

5

5

5

5

wordpress.org

editorx

webflow

wix

cargo

squarespace

thirsty 4 change

Samples of  Research Logs

Ace

Shui Heng, csm

Sze Yunn

5

Tools

Materials

Structure

Browser

Text Editor

Images

Videos

Text

Layout

Chrome, Safari, Firefox

Brackets (VS Code, codesandbox.io)

Photoshop, Preview

iMovie, Premiere, Handbrake, Vimeo

Google Docs

Pen and Paper

Desktop, Mobile

HTML, CSS, Javascript

scale to size, 72ppi

simple, hard-cut, little to no effects

reflective, descriptive