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

In this class, we will introduce ChatGPT as a learning-to-code assistant. It will help students understand and solve basic technical concepts and problems, both in groups and individually. ChatGPT excels at explaining technical concepts and providing coding examples.

The suggested code snippets from ChatGPT can then be further modified, extended, sculpted by students to achieve an (un)expected outcome based on briefs given. It is the playfulness and the experience we wish to expose students to in order to better learn, understand and apply tech as part of their own practice.

ChatGPT works with algorithms and is trained to generate human-like text that can be used in conversation. It can answer questions, provide information, and engage in natural language discussions with users.

Some potential use cases for ChatGPT include customer service chatbots, virtual assistants, and conversational interfaces for websites or mobile apps. It can also be used to generate content for social media or create chatbot scripts for marketing or entertainment purposes.

Overall, ChatGPT is a powerful tool for creating chatbots that can have intelligent and engaging conversations with users.

Generative AI

AI models that can generate open-ended content, often creative content like visuals, music or text.

LLMs

Large Language Models, are advanced computer programs designed to understand and generate human-like text.  

Prompting

AI chat prompting is a technique where a computer program provides suggested text or other outputs to help users engage in natural language conversations with AI or to generate creative outcomes like visuals for example.

Hallucination

AI hallucination refers to a situation where an AI system generates content that is not accurate or based on real information, often creating fictional or misleading outputs.

Bias

Bias in AI refers to the presence of unfair or skewed representations and decisions made by artificial intelligence systems, potentially leading to unequal treatment or inaccurate conclusions.

What is this about?

How does that work? How do generative language models work?

Predicts words based on previous text given and the data the model has been trained on.

To us this looks like magic, to the computer it is a gigantic pile of data that an algorithm ploughs through.

How does this work in the browser at chat.openai.com?

ChatGPT provides a free version which you can sign up for at chat.openai.com. You can then use ChatGPT in the browser but also on your phone.

What are some of the opportunities that ChatGPT provides us with?

We can use ChatGPT as a coding assistant for this class. This does not mean that ChatGPT will do all the work for you, but it will be able to support you in completing the exercises and assignments we give you.

Still, this class is about design and giving form to ideas through code.

What should you be mindful of?

ChatGPT can be a very powerful tool and it will, already is, embedded in many applications that we use on a daily basis, hence, it is important that we, you, are able to use this tool. However, we should not blindly trust the technology and we must be mindful and considerate in the content that we prompt and produce. You need to be responsible.

Prompting tips

Study with ChatGPT, ask questions that you want to ask your teacher or google

Summarise concepts for you, for example coding concepts like loops: Can you explain to me the coding concept of loops, I am using p5js and it would be great if you could explain it to a newbie student? or Can you explain to me the coding concept of loops, I am using p5js and it would be great if you could explain it to a child?

Explain it to a child

Ask for example code that specifically addresses a concept like shapes: can you give me some p5js code that demonstrates the beginShape vertex and endShape commands?

Ask  ChatGPT to break down a response into steps: I want to create a p5js sketch with 5 different shapes at random locations and with different colors. Can you break down the steps for me to take? I am using the p5js online editor.

You are free to use generative AI tools like ChatGPT in any way that helps you in your learning for this class. However, any usage of generative AI must be properly acknowledged.

At the very least, you need to provide a statement of use that clarifies what, if any, technologies you employed to create content while working on your assignment.

Remember that you are in school to learn and become an independent learner and eventually an expert in your field of study and practice.

Generative AI tools can help you achieve your ideas, visions, futures, but keep in mind that the quality of your work is determined by talent, practice and knowledge.

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.

Approach

Output

Technical

Aesthetics

Explorative

Dynamic

Writing Code

Abstract

Systematic

Static

Using Code

Applied

Each workshop exercise brief is aligned to the following criteria, which vary with each brief. This should help you to better identify the requirements and direction of development for the respective outcomes.

lines

plotter

p5js code template

some code

Approach

Output

Technical

Aesthetics

Explorative

Dynamic

Writing Code

Abstract

Systematic

Static

Using Code

Applied

Printed artefact

A series of plotted art prints on paper of your choice. Printed outcomes can be bundled into a small booklet, a zine, A5 size.

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.

Printed artefact

A series of plotted art prints on paper of your choice. Printed outcomes can be bundled into a small booklet, a zine, A5 size.

Generate vector images from code

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

Use AxiDraw software and Inkscape to plot vector images

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

Pin up or lay out your work for the documentation

Take your printed zine 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 drawings on paper (A4)

Where to start?

Study some natural phenomena where movement can be observed?
 

Draw before you code?

Visit the Botanic Gardens?

image generator

parameters

some code

variations

Approach

Output

Technical

Aesthetics

Explorative

Dynamic

Writing Code

Abstract

Systematic

Static

Using Code

Applied

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.

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

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

_________

Series of .jpg images generated by code

Image generator; Images to translate into a online gallery page or a printed 8-16 pages zine 

Documentation of process, as a series of images and video(s) demonstrating the variations of outcomes

Coded p5js sketches with code comments and references

Links to your p5js code sketches

Archived final p5js code sketch as .zip

Where to start?

Study some natural phenomena where patterns and repetition can be observed?

Visit the Botanic Gardens?

augmented reality

blender

low code

web-based model-viewer

Approach

Output

Technical

Aesthetics

Explorative

Dynamic

Writing Code

Abstract

Systematic

Static

Using Code

Applied

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

Where to start?

Study some natural phenomena where algorithmic shapes can be observed?

Visit the Botanic Gardens?

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 styles.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 styles.css file if necessary

type of documentation: screenshots, photo and video recordings, pay attention to the quality of images and their content

healthy mix of process documentation and final outcomes 

visual narrative and quality of images and videos

Overall look and feel of website based on typography, color, layout, copy-text. If unsure, stick to the template layout

Folder structure

File naming conventions
 

File size

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

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