How can we engage with typography on a screen in ways beyond the use of mouse and keyboard? This hands-on workshop will explore the responsiveness of typography through physical and algorithmic interactions. Using prepared objects equipped with simple electronics, we will probe the kinetic behavior of typography generated by code.

Through curious explorations, outcomes will culminate in a series of printed and animated outputs presenting snapshots of the many aesthetic encounters.

This workshop is intended for participants interested in creative coding, dynamically generated typography, tangible interfaces, curious interactions, real-time and printed visuals.

Andreas Schlegel works across disciplines and creates objects, tools and interfaces where art, design and technology meet in a curious way. Many of his works are collaborative and have been presented on screen, in code, as installation, workshop or performance. His practice focuses on contemporary and open-source technologies, where outcomes are informed by computation, interaction and generative processes.

Sunday, introduction and making

Monday, prepare for printing

Tuesday, printing and preparing for showcase

Brief introduction to the workshop and what we will cover and make

Demonstration of things and interfaces I brought with me, a series of physical object equipped with simple electronic inputs connected to an Arduino, and how these can be used to interact with p5js to control code generated visuals.

Going through the hardware and software we will use

Demonstration of p5js sketches to manipulate shapes and typography

Part 1

Activity 1: connecting electronics. We start with the starter-kit and work in pairs. The starter-kit includes a tiny breadboard, wires, buttons and a capacitive sensor

Activity 2: Making things move on screen. Demonstration and explanation of simple techniques to make shapes and typography move on the screen. Example-sketches will be provided. Controlling visuals on screen with starter-kit will this conclude activity.

Independent work, visual explorations. We apply Activity 1 and Activity 2 and see how far we can get to render some visuals as screenshots

Expected outcomes, screenshots and screen recordings, process documentation

Part 2

Brief introduction to session 2, What are the expected outcomes so that we will have a set of visuals, screenshots, screen recording, videos, to print and to use for documentation

Independent work continues, more making participants document process, outcomes and interactions

Selection. The last part of this session will be about selecting some favourite outcomes per participant and we then prepare those for printing

Expected outcomes. We will collect visual outcomes in digital format ready for printing during session 3, if we get one or two nice video-documentations done and some typography animations, that would be super

Printing of outcomes

Preparing for exhibition showcase

optional for participants

Activity 1: connecting electronics. We start with the starter-kit and work in pairs. The starter-kit includes a tiny breadboard, wires, buttons and a resistor functioning as a capacitive sensor

Activity 1: connecting electronics. We start with the starter-kit and work in pairs. The starter-kit includes a tiny breadboard, wires, buttons and a resistor functioning as a capacitive sensor

Some questions to ask yourself, the button.

What can I do with a single button? Click, hold, release.

What can be done with a click? Add, remove. increasing speed, move on to the next.

When if I hold the button? Something can grow, shrink, move.

When I release the button what can happen? Something disappears, or stops.

Some questions to ask yourself, the resistor as capacitive sensor.

What happens when I touch? 

What kind of conductive material can I attach and use? 

How to contextualise the visual response based on interaction and material used?

Activity 2: Making things move on screen. Demonstration and explanation of simple techniques to make shapes and typography move on the screen. Example-sketches will be provided. Controlling visuals on screen with starter-kit will conclude this activity.

Activity 2: Making things move on screen. Demonstration and explanation of simple techniques to make shapes and typography move on the screen. Example-sketches will be provided. Controlling visuals on screen with starter-kit will conclude this activity.

Algorithmic  sin, cos, tan, frameCount

Working with example sketches provided

Make changes to numbers that you see, change them to larger or much smaller values and see what happens.

If a sketch uses an image as source material, play with the source image in Photoshop or Illustrator and use it with the sketch

Interpolation progressively approaching a target value over time, smooth movement

Random and noise allow you to quickly 

Code concepts to create movement

p5js sketch to read serial

kinetic-serialConnect-starter_a

In this last part of Activity 2 we connect p5js with the electronics input coming from the breadboard circuit.

I will then demonstrate how to enable the serial input for each of the example sketches.

Independent work, visual explorations. We apply Activity 1 and Activity 2 and see how far we can get to render some visuals as screenshots

It may seem overwhelming now to apply Activity 1 and Activity 2 to create a set of visual outcomes in independent work, but we try

Keep in mind that this is a visual exploration and you should get the best experience out of it by using what you feel comfortable with. If in doubt, consult with the instructor

We start with a recap of session 1 during which we covered a brief introduction to p5js and a list of prepared sketches for the workshop you can start working with to make changes to code, text or the source images used to generate visuals. Then we look into Arduino which allows for creating your own interfaces using simple electronic components. Towards the end of the session we brought both, p5js and Arduino, together so that Arduino-based interfaces can control visuals in p5js.

Moving on to session 2 we will look at the following 3 parts. 

1 sketching ideas. Based on code sketches, demos, and interfaces covered and provided, you will sketch out your favourite ideas on paper first

2 realising ideas. Based on your sketches and feedback received, realised them as best as you can to create a series of images and videos resulting from the interaction of at least 1 interface and one dynamically generated visual from code

3 collection of outcomes. Share you collection of outcomes created and select a number of images to be printed, printed outcomes and videos will be showcased