This project builds on the skills learned in the first semester and expands your understanding of Computation in Design through technical exploration, playful but critical engagement with code and interaction, and the study of aesthetics in the context of creative coding.

Computation in Design 2 comprises a series of exercises and workshops that culminate in a final project at the end of the semester, a digital portfolio that documents the process and the results of the activities carried out. In a series of group and individual exercises you will learn how to apply creative coding to your design practice.

Results that are created, then lead to a Digital Portfolio, a Microsite, that documents the process, outcome, and reflection of your work.

Today, computation is deeply woven into our everyday life. We have become accustomed to using and consuming technology constantly and through our daily needs and habits. At the same time, often we are not as involved in the active development of these technologies itself. Through creative coding and the creative use of code, you as a designer can prepare yourself to contribute and make a change.

All exercises and workshops conducted converge into a semester-long project addressing the topic of creative coding. Throughout this course you will develop competence in code literacy in the age of digital transformation by alternating and combining methods of design and computation.

Generative design fundamentally changes the design process: the designer shifts from being a performer of tasks to being a conductor, effectively orchestrating the decision-making process of the computer. This is what generative design is all about: iteratively developing different processes and then selecting those that produce the most visually compelling results.

From using code as a means to generate static, moving or interactive images, to communities, industries and futures that embrace algorithmically generated content, building digital experiences to new adventures into artificial intelligence and neural networks, generative design finds many applications ranging from artistic expressions, branding, architecture, interaction design and other forms of creative applications.

The term "making" refers to the process of producing artefacts, products or tools using craft or technology-based techniques like for example digital fabrication. The spectrum here can range from the novice learning a craft to the master craftsman masterfully applying a craft and passing on their knowledge. Often, more attention is paid to the process of making, sharing, collaboration, and techniques than to the end result. Think of making as a trade and a culture.

Making here can also refer to "The maker culture which  is a contemporary subculture representing a technology-based extension of DIY culture that intersects with hardware-oriented parts of hacker culture and revels in the creation of new devices as well as tinkering with existing ones. The maker culture in general supports open-source hardware."

Projection mapping is a technology that uses video projectors to shine light on any surface that isn’t simply a flat screen. It has become more popular as a way to create visually immersive environments, transforming a space because of its flexibility in turning anything into a visual surface. These surfaces can range from built sets, to buildings, and even to landscapes. Learn the basics of projection mapping and map your own visuals onto a physical object of your own creation!

Physical Computing can be applied to applications where computers interact with the physical world and vice versa. The Internet of Things, robotics or physical interfaces are common applications. Physical computing refers to the use of tangible, embedded microcontroller-based interactive systems that can sense the world around them and control outputs such as lights, displays and motors.

Although this might seem rather technical in approach and application, it provides a an environment to better comprehend playfully and eventually build a connection between physical objects, computer hardware and software applicable not only to technical practices such as engineering or computer science but equally important to creative practices like art and design. 

Explore

Ideate

Make

Test

Document

Intro

Introduction to classes and weekly sessions. Warmup activity.

In class activity

Exercise Session 1

Introduction and getting started with respective exercises per class.

In class workshop

No Class

Chinese New Year

Exercise Session 1

Exercises continue and conclude at the end of the session.

In class development

Exercise Session 2

Introduction and getting started with respective exercises per class.

No Class

Project week

Exercise Session 2

Exercises continue and conclude at the end of the session.

Independent study

Exercise Session 3

Introduction and getting started with respective exercises per class.

In class workshop

In class development

In class workshop

Exercise 3

Exercises continue and conclude at the end of the session.

Web 101 online

Introduction to website template

Open Studios

Work-in-progress showcase

Exercise Session 4

Introduction and getting started with respective exercises per class.

Exercise 4

Exercises continue and conclude at the end of the session.

online class and showcase preparation and setup

In class workshop

In class development

In class development

Mini Website

To work on documentation of exercises and adding content to Website

In class development

Independent Study

Assessment

2D Graphic Design, deals with the nature, shape, and meaning of symbols and consists of four distinct but related activities: typography, illustration, photography, and print. 2

3D Industrial Design, industrial design is concerned with tangible, physical artifacts — with things. 2

4D Interaction. In interaction design, the locus of design is action. Here, the focus is on designing experiences rather than physical objects. 2

Systems and environments. Environmental design is concerned with “[t]he idea or thought that organizes a system or environment” Therefore, in the fourth order, the focus is on human systems, “the integration of information, physical artifacts, and interactions in environments of living, working, playing, and learning.” 2

The process, the object, the action should always be in the foreground and in focus when documenting your work so that it can be easily identified as the protagonist, the main character of the image or video that one is looking at.

Don't take a picture or video of your work just for the sake of taking a picture or video. Think about your audience and how they will perceive the image or video you have prepared for them. Provide them with the best and highest quality experience possible so that your audience sees that you care about your work and them.

Pay attention to the lighting conditions of the environment in which the work is being documented. Add additional light as needed, but make sure the entire scenario is properly lit for optimal viewing on a screen or in a printed publication.

Pay attention to the environment in which you are filming or photographing. Is the background very distracting, maybe clean it up or change the scene? Are there any unnecessary objects lying around? Are the surfaces clean, no coffee stains? Make sure to present your subject the best possible way.

Download Digital Portfolio from Google Drive

unzip downloaded .zip file

Familiarise yourself with the Digital Portfolio Guidelines

This is a group activity, team up in groups of 3.

This is a group activity, team up in groups of 3.

This is a group activity, team up in groups of 3.

This is a group activity, team up in groups of 3, then select one of the demos below to work with in the following.

In today's class we will ideate a series of imagined applications that do not yet exist but we wish to exist in the near future. Such an application can be functional, life-enhancing, experimental or playful.

As a group work on your Near Future Application and prepare a Google Slides document for the sharing session. For the homework, the slides can be exported as .pdf

Sharing of outcomes per group and per class. All students to meet in their respective class to present their findings.

This is a group activity, team up in groups of 3.

Document and archive Activity 1 in your Digital Portfolio and include your writeup in the activity-1-writeup.docx document. Add your presentation as a .pdf to the presentation folder.

In this exercise we will look at Creative Coding and Generative Design in particular. We have touched on some basic coding principles during Semester 1 and this exercise can be seen as a continuation and extension of what has been covered and practiced.

Here we will take a closer look at how code and  simple 2D and 3D graphics can be used to create a series of generative imagery which can be static, dynamic or interactive.

Generative design fundamentally changes the design process: the designer shifts from being a performer of tasks to being a conductor, effectively orchestrating the decision-making process of the computer. This is what generative design is all about: iteratively developing different processes and then selecting those that produce the most visually compelling results.

From using code as a means to generate static, moving or interactive images, to communities, industries and futures that embrace algorithmically generated content, building digital experiences to new adventures into artificial intelligence and neural networks, generative design finds many applications ranging from artistic expressions, branding, architecture, interaction design and other forms of creative applications.

During our first session you will team up with 2 of your peers to form a group of 3. Each group will then select a brief from a list of given options in the following to work with.

Before you decide, you should discuss and review the available options so that you feel comfortable with the requirements and expected outcomes.

Some briefs are less technically demanding and have a no-code to low-code approach, but require you to take several steps in the process to get to the end result. Others are more technically challenging, but offer you the opportunity to learn a new technique or work with a new medium if you successfully complete the required tasks, risky indeed but very rewarding.

During session 2 you and your group will work on and complete the required outcomes based on the brief you have been working on.

Some briefs require you to work with a specific tool or present your work in a specific format, some challenges will be waiting for you for which you can prepare as homework or by managing time and teamwork. 

By the end of this session, the deliverables should be completed so that it can be stored and archived in your digital portfolio so that you can easily refer back to it towards the end of the semester when we prepare the submission materials.

A tutorial for AxiDraw and Processing

GenerativeHut experiments with code and pens

Julian Gachadoat (v3ga) code, art and pen drawings 

Generative Design code examples

artblocks.io, a platform focused on generative content

fxhash is an open platform to create and collect generative NFTs

model viewer website, examples, docs

blender 3D software

gltf viewer, drag and drop file to validate

some gltf models (export-able)

coding glTF models with threejs

pay attention to good image quality

The subject, your work, should be well photographed/videoed so that it is easy for the viewer to understand and appreciate

Add people to image/video where necessary to illustrate and demonstrate outcomes in use

Image: Good image resolution, less than 1920x1080 is not advisable; save as high quality jpg

Screenshots: remove unnecessary details like desktop folders, menu bars, frame borders (only include code if important and relevant to the screenshot)

Video: 1080p resolution and saved as mp4 with good image quality and without compression artifacts, use handbrake to compress your video

Reflective writings where necessary, keep a good balance between the What, How and Why (reflective writing focuses on your process)

Write a short project description (description focus on the project, what is it)

If you worked in a group, briefly elaborate on how you worked as a group

Add materials as suggested above to your Digital Portfolio: images, videos to dedicated folders, writing to .docx document If necessary, review the slides on documentation, cpj (writing), digital portfolio.

Code To Thing is an exercise that looks at how code can be turned into a physical object. You will explore 3D space in code and create 3D objects from a given code template. You will then use 3D software to convert the 3D objects generated from the code into printable templates that you can handcraft into a physical 3D object.

Furthermore, you will need to focus on proper documentation techniques and styles to create content of the 3D objects and design a folded A3 poster. Through these processes, you will be able to gain an understanding of working with digital and physical tools, as well as the workflow from digital to physical.

The term "making" refers to the process of producing artefacts, products or tools using craft or technology-based techniques like for example digital fabrication. The spectrum here can range from the novice learning a craft to the master craftsman masterfully applying a craft and passing on their knowledge. Often, more attention is paid to the process of making, sharing, collaboration, and techniques than to the end result. Think of making as a trade and a culture.

Making here can also refer to "The maker culture which  is a contemporary subculture representing a technology-based extension of DIY culture that intersects with hardware-oriented parts of hacker culture and revels in the creation of new devices as well as tinkering with existing ones. The maker culture in general supports open-source hardware."

pay attention to good image quality

The subject, your work, should be well photographed/videoed so that it is easy for the viewer to understand and appreciate

Add people to image/video where necessary to illustrate and demonstrate outcomes in use

Image: Good image resolution, less than 1920x1080 is not advisable; save as high quality jpg

Screenshots: remove unnecessary details like desktop folders, menu bars, frame borders (only include code if important and relevant to the screenshot)

Video: 1080p resolution and saved as mp4 with good image quality and without compression artifacts, use handbrake to compress your video

Reflective writings where necessary, keep a good balance between the What, How and Why (reflective writing focuses on your process)

Write a short project description (description focus on the project, what is it)

If you worked in a group, briefly elaborate on how you worked as a group

Add materials as suggested above to your Digital Portfolio: images, videos to dedicated folders, writing to .docx document If necessary, review the slides on documentation, cpj (writing), digital portfolio.

The Screens exercise will introduce you to basic applications of projection mapping. In this hands-on workshop, you will learn how to project and map images onto non-rectangular surfaces using coded, static and moving images.

Projection mapping is a technology that uses video projectors to shine light on any surface that isn’t simply a flat screen. It has become more popular as a way to create visually immersive environments, transforming a space because of its flexibility in turning anything into a visual surface. These surfaces can range from built sets, to buildings, and even to landscapes. Learn the basics of projection mapping and map your own visuals onto a physical object of your own creation!

pay attention to good image quality

The subject, your work, should be well photographed/videoed so that it is easy for the viewer to understand and appreciate

Add people to image/video where necessary to illustrate and demonstrate outcomes in use

Image: Good image resolution, less than 1920x1080 is not advisable; save as high quality jpg

Screenshots: remove unnecessary details like desktop folders, menu bars, frame borders (only include code if important and relevant to the screenshot)

Video: 1080p resolution and saved as mp4 with good image quality and without compression artifacts, use handbrake to compress your video

Reflective writings where necessary, keep a good balance between the What, How and Why (reflective writing focuses on your process)

Write a short project description (description focus on the project, what is it)

If you worked in a group, briefly elaborate on how you worked as a group

Add materials as suggested above to your Digital Portfolio: images, videos to dedicated folders, writing to .docx document If necessary, review the slides on documentation, cpj (writing), digital portfolio.

This physical computing exercise aims to experiment with simple input and output mechanisms that utilize electronics. This may be unusual and uncharted territory for a designer, but as we extend traditional design products into digital and virtual space, we also explore how design can be applied to physical applications that a user can interact with to create physical and tangible experiences.

Through prepared materials and electronic components, students will design a simple physical interaction that demonstrates how a physical input triggers a physical output.

Physical Computing can be applied to applications where computers interact with the physical world and vice versa. The Internet of Things, robotics or physical interfaces are common applications. Physical computing refers to the use of tangible, embedded microcontroller-based interactive systems that can sense the world around them and control outputs such as lights, displays and motors.

Although this might seem rather technical in approach and application, it provides a an environment to better comprehend playfully and eventually build a connection between physical objects, computer hardware and software applicable not only to technical practices such as engineering or computer science but equally important to creative practices like art and design. 

Papertronics This exercise is divided into 2 sessions. In this first session we will look at simple electronics to develop a better understanding of how a simple electronic circuit works, and what polarity (ground and power) in the context of an electronic circuit means: the directional flow of current from pole to the other. If the two poles are connected by a conductive path such as a wire, current flows from the positive pole (power) toward the negative pole (ground).

To better understand the above, we take a more playful approach by using paper, a battery, an LED and copper tape to design a simple circuit to illuminate a paper object.

The resulting paper object will then be documented in a) a series of images, kept in an aesthetically minimal and clean style, and b) a series of video recordings of the object, which should result in a short 8-12 second long edited video teaser.

Arduino In our second session revolving around physical computing, we will take a look at the Arduino board. A small device, a microcontroller. Arduino is an open-source electronics platform based on easy-to-use hardware and software.

Each group will create a simple input-output object using one sensor and one actuator. This object must be interactive.

Chibitronics, expressive technology with paper circuits

Papiermachine, an electronic paper toy by studio Pinaffo-Pluvinage and a video

Bare Conductive, interactive interfaces using conductive paint and technology (Better World, MIR,  Sonotobo)

*) The resulting paper object will then be documented in a) a series of images, kept in an aesthetically minimal and clean style, and b) a series of video recordings of the object, which should result in a short 8-12 second long edited video teaser.

Images min. size 1920x1080 pixels, format .jpg, use squoosh, a browser based compression tool for images, to compress images. 

Video size 1080p, format .mp4, use the handbrake app for compression.

Important Retain a very good image quality for both, images and video!

Do a test piece of circuitry with copper tape, LED lights, battery and clip with this example as a guide

Before you paste the copper tape onto the paper, create a small triangle at the corner of the paper, which should be 3 by 3 cm. Measure from the bottom of the paper a 3 mm height and then draw a faint line on the bottom of the paper. Now fold this triangle along the faint dotted pencil line. This is where your battery will be placed. You can now proceed to create your circuit by adding the copper tape

When completed, your circuitry should look like this, and your LED is lit! You may add 1 or 2 more LED lights if you like

When you are confident with the circuitry that you had tested out, you may move onto the next step, to make the base. 

Here fold the paper as shown in the image to the left to establish the base which will house the LEDs and battery

Once you complete the circuitry, the LED lights underneath should be illuminating through the top layer of the paper.

Time to make some paper sculpture shapes.​  Cut these shapes out in any organic or geometric shapes. Then, construct little stems for your shapes, or fold the shapes in such a way to allow them to be propped up on the paper surface. Create different heights and depth.

pay attention to good image quality

The subject, your work, should be well photographed/videoed so that it is easy for the viewer to understand and appreciate

Add people to image/video where necessary to illustrate and demonstrate outcomes in use

Image: Good image resolution, less than 1920x1080 is not advisable; save as high quality jpg

Screenshots: remove unnecessary details like desktop folders, menu bars, frame borders (only include code if important and relevant to the screenshot)

Video: 1080p resolution and saved as mp4 with good image quality and without compression artifacts, use handbrake to compress your video

Reflective writings where necessary, keep a good balance between the What, How and Why (reflective writing focuses on your process)

Write a short project description (description focus on the project, what is it)

If you worked in a group, briefly elaborate on how you worked as a group

Add materials as suggested above to your Digital Portfolio: images, videos to dedicated folders, writing to .docx document If necessary, review the slides on documentation, cpj (writing), digital portfolio.

*) The resulting object will then be documented in a) a series of images, kept in an aesthetically minimal and clean style, and b) a series of video recordings of the object, which should result in a short 8-12 second long edited video teaser.

Images minimum size 1920x1080 pixels, format .jpg, use squoosh, a browser based compression tool for images, to compress images. 

Video size 1080p, format .mp4, use the handbrake app for compression.

Important Retain a very good image quality for both, images and video!