Submissions will be reviewed and assessed based on your overall response to tasks and briefs, completeness, organisation, reflection, technical and aesthetic application, execution and quality.

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

Share

We will meet on a weekly basis every Wednesday at 9.30am in F301 or D501 based on your assigned workshop for that week. For a breakdown of the weekly schedule, navigate downwards.

Intro

Introduction to classes and weekly sessions. Warmup activity.

Exercise 1 Session 1

Introduction and getting started with respective workshop per class.

Exercise 1 Session 2

Exercises continue and conclude at the end of the session.

Exercise 2 Session 1

Introduction and getting started with respective workshop per class.

Exercise 2 Session 2

Exercises continue and conclude at the end of the session.

Exercise 3 Session 1

Introduction and getting started with respective workshop per class.

Exercise 3 Session 2

Exercises continue and conclude at the end of the session.

No class

Project Week, independent study.

Exercise 4 Session 1

Introduction and getting started with respective workshop per class.

Exercise 4 Session 2

Exercises continue and conclude at the end of the session.

Exercise 5 Session 1

Web 101, introduction to website template

Exercise 5 Session 2

Web 101 continues.

Wrapping up

Submission briefing, working on documentation, populating Mini-website with content

Independent study

Assessment

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.

Same procedure as last year. The Digital Portfolio is a digital archive which you will use to document your work based on activities and exercises conducted in class. A given folder structure tells you which documents are required. You should update your Digital Portfolio regularly.

Download Digital Portfolio from Google Drive

Familiarise yourself with the Digital Portfolio Guidelines

Playing with Machine Learning and Computer Vision. We may have heard so much about it, let's try it out.

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

Playing with Machine Learning and Computer Vision. We may have heard so much about it, let's try it out.

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

An intro to Machine Learning for Designers

ml5, friendly Open Source Machine Learning Library for the web

Nervous about what you dont know? Grab your friends and plan a workshop

The work of Andreas Refsgaard + Playful Machine Learning video

Fei-Fei Li: If we want Machines to think, we need to teach them to see

Teachable Machines

In this workshop 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.

field trip

p5js code template

some code

sound reactive

What does a place sound like? We often don't pay enough attention to the sonic and audible qualities of a place.

In this task, you will decide on a place in nature that you will visit to record the characteristics of that place using audio.

When you return from your field trip, you will use the provided p5js code sketch to visually represent the audio that the sketch captures using a laptop's built-in microphone. You can change the code according to your needs and requirements.

The resulting visual renderings should then be used as textures and materials for a video work together with a soundtrack created from your field recordings suitable for the overarching theme Nature Encounters.

code generated visuals from audio recordings

generated visuals used as textures and materials in a video work

conduct a field trip to record thematically related sounds

Although this brief might sound like technically and visually simple and straight forward, the challenge her lies in finding a meaningful narrative to tell.

Consider to go to places that are connected thematically to tie your work together.

How meaningful is a place when the focus is on the audible rather than the visual? How can you visually express the sound of a place?

code generated visuals from audio recordings

generated visuals used as textures and materials in a video work

conduct a field trip to record thematically related sounds

Video with soundtrack

An experimental  and explorative approach to image making

Go out and visit places around Singapore to record audio samples related to the theme Natural Encounters

Use your mobile phone to record audio at the places you visit

Take photos and videos at the places you visit to document your field trip

Use code sketches to visually express collected audio samples when playing them back

Capture generated visuals as still images 

Create an animation from textures generated and a soundtrack

Series of audio samples

Documentation of field trip, process, image/video making and outcomes  as a series of images and video(s)

video with soundtrack (up to 60 seconds, 1920x1080)

Where to go?

What to record?

How many recordings do we need?

lines

motion

plotter

p5js code template

some code

This brief is all about automated drawings and lines in motion.

The AxiDraw is a simple, modern, precise, and versatile pen plotter, capable of writing or drawing on almost any flat surface.

It can draw with your favorite ball pens, permanent markers, and other writing implements to handle an endless variety of applications.

In this brief you are tasked to create a series of code-generated line drawings that resemble motion and respond to the overarching theme of Nature Encounters.

From code to svg to the AxiDraw to finally arrive at a physical drawing are the steps to take. Consider to draw multiple layers in different colours using different pens.

Be mindful of the time it takes to plot your designs. It may take a split second for the screen to render but minutes for the plotter to draw. 

With the AxiDraw plotter you are able to let a computer program draw with a pen. Other than with a regular printer, new ways of using marks on paper open up.

As a group of creatives and designers, how can you best use this tool to articulate a strong visual idea that expresses the theme in a compelling and surprising way.

Take inspiration from nature and successfully express motion in a static image.

Apply and adjust code to your liking, export generated images (line drawings) to .svg, make the AxiDraw work and print your designs.

Find a convincing way to presenting your prints but pinning them on the wall or hanging them from the ceiling or laying them out on a table.

In any case the documentation must be convincing and amazing.

Prints

Generate vector images from code

Export image as .svg, then edit in Illustrator if necessary

Use AxiDraw software 

What kind of pen could you use? can you draw multiple svgs on top of each other with different pens?

Print on A4 paper bring your own paper and pen

Hang, pin up or lay out your work for the documentation

Take your prints for a photo shoot, include a person to give a sense of scale.

Series of .svg and .jpg images generated by code

Documentation of process, printing, outcomes  as a series of images and video(s)

AxiDraw drawing on paper (A4)

Where to go from here?

Study some natural phenomena where movement can be observed?

Draw before you code?

image generator

parameters

some code

variations

This brief requires you to write your own image generator. Here, think NFT.

Can you create a software tool with p5js that generates a (infinite) series of images, images that are slightly different every time the program runs?

In this brief you are tasked to create a series of code-generated images and respond to the overarching theme of Nature Encounters.

How can a program be used as a meaningful image generator? Is this up to the program or the designer of the program?

How would you design an image generator that is able to convey a meaningful message by addressing questions or issues that are important to you, society, culture, nature?

Generating random things is not that difficult how can you make a difference?

Start from scratch or remix existing code, but preferably write your own code that generates patterns from nature.

Add variation to your code so that each rendered output looks slightly different from the others but stays within the same aesthetics spectrum.

How can this become an NFT?

A3 Poster

Generate pixel images from code that respond to the overarching theme of Nature Encounters

Create a series of at least 32 images from code using the same program but different parameters

NFTs? Can you make one, some? What may be the challenges?

Series of .jpg images generated by code

Documentation of process, variations and outcome  as a series of images and video(s)

Coded p5js sketches with code comments and references

Links to your p5js code sketches

Archived final p5js code sketch as .zip

augmented reality

blender

low code

web-based model-viewer

This brief is about augmented reality and viewing 3D objects superimposed by a phone's camera.

There are a number of steps you will need to take in this project to achieve the expected AR experience of seeing an augmented abstract 3D object through your phone as an overlay on the real world.

To create an abstract 3D object, you and your group can use a 3D software such as Blender or similar to create one or more 3D objects to work with.

Abstract forms here must be derived from the overarching them Nature Encounters.

With this brief you will be able to display 3D content in AR using your phone.

How can you make the content that the user is seeing meaningful? What story do you want to tell, what experience do you want to create?

Generate abstract 3D objects using a 3D software, do not use 3D objects of real things like shoes or chairs but use or make abstract forms inspired by the overarching theme Nature Encounters instead.

Make your own and own it rather than copy from the internet, export 3D model, set up local web-server to run and test model-viewer, make website with model-viewer available publicly using netlify.com.*

AR web-application

Generate an abstract 3D object in a 3D software of your choice

Export 3D model in glTF format

Apply 3D model to model-viewer, a browser application to view 3D models on the web and in AR

Series of .glTF files create in a 3D software like Blender

Documentation of process, variations, screenshots and outcome as a series of images and video(s)

Series of images taken with your phone and the 3D model in AR

Link and QR code to your model-viewer website

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."

Link to external Slides

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!

Link to external Slides

This physical computing exercise aims to experiment with simple input and output mechanisms that utilise 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 digital output and vice versa.

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.

Link to external Slides

With week 11 and the semester soon coming to an end, we are wrapping up this semester's Computation in Design workshop series. Each of you should have attended 4 different workshops where you learned about different techniques and applications of computation in design practice. We hope you had a good time and gained new skills and insights into how computation and design can go hand in hand.

Please keep in mind that we are not able to learn HTML and CSS in one or two sessions, so we take a more accelerated approach by making changes to existing HTML and CSS documents.

Finally, it is important that you build an understanding of how to browse, read and make changes to an HTML and CSS document in order to make simple changes to the content.

Today we will look into basic HTML and CSS writing and editing. This is to prepare for next week's Summary Website session.  

A template for your individual Summary Website will be provided. This website will serve as your submission portfolio. Today's session is about preparing for it.

Use iMovie. Simple hard-cuts will do, no transition effects required.

Video Editing

Use Photoshop, but Preview does a good job as well when it comes to resizing or color correcting images.

Image Editing

This week we will focus on familiarising ourselves with the website template for your summary website, details are below.

Besides the technical challenges that come with the design of a website, equally pay attention to the quality of content and aesthetics.

Follow and retain the website template structure

Replace template content with your content accordingly by overwriting text, images, videos

Duplicate and edit image placeholders in Photoshop 

Compress images and videos, see Tools introduced last week

Make changes to default.css if necessary

Follow and retain the website template structure

Add, move or remove html blocks if necessary

Edit image placeholders in Photoshop, add more images if necessary

Edit html and css to make changes to the web design

Compress images and videos, see Tools introduced last week

Make changes to css files if necessary

Folder structure

File naming conventions
 

File size

Type of documentation, screenshot, photo and video shoot, pay attention to how the image was crafted and its content

Healthy mix of process documentation and final outcomes 

Visual quality images, videos based on documentation

Overall look and feel website based on type, color, layout, copy-text. If unsure, stick to the basics.

The following guides you through the submission requirements and deliverables for your Computation in Design class.

Folder structure including images, videos and .docx files

Do bring your CPJ up-to-date soon if you haven't done so yet. Include your weekly updated journal for CiD in  .pdf format

A folder containing your website files based on provided template. 

The total file size of your .zip file should be 160 MB or less. Ensure that you have compressed your images and video files, if unsure, review the Tools slide covered in week 11.