When it comes to getting the thoughts out of our heads and into the world, we might talk about them at first, but quickly we would turn to drawing them, first sketchy, then detailed, we would add dimensions to the drawing, we would maybe even model them – and with that, we’re already prototyping. All of these methods can serve memorisation, testing and collaboration: It is easier for someone else to understand what I am talking about when I can also show it to them. At the same time, these methods do not depict the intended product in its entirety: A pencil sketch of a chair does not tell us what its upholstery should feel like, or how comfortable the curvature of its back will be for people of different height.
Now, as interaction designers, we are used to working in interdisciplinary teams. The products we work on are quite complex, usually at least partly digital and involve specialists of various fields. We therefore need to be concise and clear in communicating our ideas. Our prototypes are well-defined models of these ideas – and allow us to test them, observe user experience and of course clearly communicate how specifics should be realised in production. Being able to produce prototypes – at least of low-end quality – is a fundamental skill for any interaction designer.
It is not required to know how to code when joining the programme at School of Design, nevertheless it will be important to be able to understand the way programming languages get computers to work. During the first few months the basic principles of most programming languages will be taught and some of them applied. More precisely: In my first semester we used Arduino, PureData and MIT AppInventor for different tasks within a single system. Besides programming, Dr. Clifford Choy, assisted by Victor Zhang, taught the principles of mechanics, electronics and rapid prototyping necessary to make tangible, interactive products.
Here, I want to give you some information on the what and the how of this years’ prototyping and scripting class.
Video ”noface” by Wagi Kulasumpankosol
Often referred to as a mechanical toy, an automaton is an object utilising some kind of mechanism to allow movement. Several enthusiasts, craftsmen and artists work in this medium, but it also can be a child’s play, as it can be realised in varying complexity and materials. There are plenty of ways to make things move and quite often there is not only one possible solution. Cams, cranks, ratchets, gears, levers, pulleys transmit force and it is the seemingly incomprehensibility of the mechanism, the beauty of movement and the motif that make an automaton so compelling.
For most, even the more experienced, it takes some try-and-error to make a well-working and precise mechanism. Laser cutting is a very efficient rapid prototyping technique that lends itself to this task because it is relatively cheap, yet fast and precise and allows for using wood and acrylics of varying thickness. Simple joints make for stable structures, due to the precision of the laser cut even without glue, and lattice hinges make stiff materials bendable, allowing for more organic shapes. Again, this takes some try and error, as the two-dimensional plans for the laser cut challenge the spatial imagination of the designer; lattice hinges might turn out too fragile, or pieces just do not match as imagined, but it quickly results in a fun toy and the possibilities are vast!
An example of an app that plays a sound everytime the taps the image of the dog. The user can manipulate the duration of the sound played. The upper image is showing the “Designer”-view, a preview of the user interface; the lower image shows the “Blocks”-view, the visual programming.
AppInventor was initially developed at Google Labs and after its closing taken over by the Massachusetts Institute of Technology. Its visual approach to coding intends to make the creation of Android applications more accessible to beginners, which makes it an ideal tool for prototyping as the learning curve is steep and short, the principles can be learnt simply by watching some of the video tutorials offered by the MIT, yet it offers sufficient complexity and flexibility to realise sophisticated applications.
During the process, these can be emulated on Android phones and desktop computers, an iOS emulator is in the making. Eventually the applications can even be compiled, downloaded and installed to any compatible Android device, allowing the use in production.
In this example, the depth-image from a Kinect camera is visually abstracted in Processing and the data sent to PurrData using UDP. While Processing uses the camera data to generate visuals, PurrData uses it to generate sounds.
PureData also is a visual programming language. Developed by Miller Puckette in the 90s, it offers a brutalist Graphical User Interface and its application focuses on electronically generated sounds. Anyhow, it allows for uses far beyond that. It has an active user base working on further development of the language itself and publishing patches, code snippets for others to use. In class, we used an extended version called PurrData. The language builds on documentation: Every object has its documentation, easily accessible by the user directly in the application itself. The application also includes numerous examples, making it easy to learn and discover. The fact that all changes happen live adds to this.
Video by Dustin Stupp
Probably the most well-known of the tools mentioned here, Arduino is a physicalcomputing platform offering both hardware components as well as an integrated development environment. ’The Arduino’ itself is a small computer which continuously executes a script in loop when the Arduino is connected to a power source. These small computers vary in size, capabilities and connectivity and they can be extended modularly with sensors, LEDs, displays, actuators of various kind and whatnot. There are third-party-suppliers offering compatible parts and in its proximity to Shenzhen, Hong Kong is a great destination for discovering the possibilities of custom manufactures. We gained a basic understanding of electronics and soldering, which is necessary for successfully building prototypes including Arduino. The programming language is based on C/C++, so experience with this or a related language is helpful. Anyhow, the principles are similar to those applied using AppInventor, so it is just some additional vocabulary to learn.
Bringing it all together
Assignment video by Ritesh Sharma, Dustin Stupp, Tim Tang and Tania Jocelynn Trisnadi
Arduino with its various extensions is without doubt a very powerful tool by itself. Combining it with the mechanical principles learnt during the process of creating the automaton gives us a whole new range of possibilities. What was an interesting toy or a relatively lifeless interface might now become a meaningful tangible and interactive product. In class we used PureData to set up a server which enabled communication between different clients via the TC-Protocol. This way we can send data from our Arduino via Wi-Fi to our PureData server which then would use this data itself or allocate it for another client, for example an Android application realised using MIT AppInventor. This setup enables us to control the Arduino with our phone – imagine the possibilities! Our experiments can only give a glimpse into what is possible combining these tools. The real question here is: What do you want to make?
Image Credit: Dustin Stupp, except as specified.
Posted by Dustin Stupp - Looking for fresh perspectives on interactive communication at the nexus of technology and design, Dustin joined the School of Design as a Master’s student of Interaction Design. His academic background in communication design and art and design sciences, as well as his professional experience in interaction and exhibition design nourish his interest in designing interactive spatial experiences.
MDes Talks is a series of Student Blogs contributed by students in different specialisms under the Master of Design Scheme. It is set out to share students’ first-hand experience in the d-school pedagogy, their projects, takeaways, and student life in general.