Computation is often defined as the act or process of calculating something. It often refers to disciplines such as technology, science or engineering and includes practices that involve programming and coding and most recently advancements in Artificial Intelligence, Machine Learning or Generative AI.

Within the creative industries, such practices are rapidly evolving in the field of design, where technology plays a key part in the design process and the experimentation and production of designed outcomes.

Over the course of the semester you will be introduced to principles relating to code and computation and applicable to contemporary and emerging design practices and aesthetics. This is achieved by combining technical, form-giving and playful approaches that converge at the intersection of code, computation and visual design. In a series of exercises and workshops we will lay the foundation for skills, context and aesthetics in Computation in Design.

Computation in Design 1: An introduction comprises a series of exercises and workshops that culminate in a student’s digital showcase at the end of the semester and a digital portfolio that documents the process and the results of the activities carried out.

Through prepared exercises you will learn about computation in design and acquire basic computational literacy skills through hands-on and playful challenges and exercises. Here, inputs such as numbers, words, shapes or actions are transformed into formal and visual outputs by describing and exercising a process with the use of code, instructions, rules and conditions.

Through a series of workshops, you will learn, experiment, and apply creative coding methods to arrive at a series of visual outcomes informed by design and design practice in general. You will apply a range of coding principles to create a series of static, moving, even interactive images. This is often achieved through trial and error, curiosity and experimentation.

Computational Literacy building 

Applied workshops

Define fundamental issues in contemporary design practice including the variety of ways in which visual communication can be applied, and the implementation of common technical and aesthetic standards


Relate to set tasks and project briefs creatively and to generate interesting ideas that can inform design solutions in the field of visual communication

Organise conceptual and technical steps used to engage with the fundamental components of a design production process and apply traditional and digital design tools and techniques


Demonstrate self-reflection and commitment to set tasks, assignments and exercises and to be able to work both individually and as part of a team

Apply code as a tool and design medium to short design exercises to develop an initial understanding of how code can be used within a design  process and production.

Use code-based sketches to respond to short briefs with a particular code concept in mind

Apply outcomes from code exercises to outcomes such as still image, video, printed matter

Document steps taken and outcomes created in a CPJ

In a series of group and individual exercises you will be introduced to computational principles applicable to design practices. This is a transitional process from exercises that require an analog approach to others that require an incremental digital approach. Results that are created, then lead to a Digital Portfolio that documents the process, outcome, and reflection.

Following the structure of the Digital Portfolio, students will document their learning and outcomes respectively. Outcomes include 

Archive → Digital images and videos

Summary → Digital document that summarises your semester work

A brief introduction to Computation in Design with some images, practical and creative applications within the design communication discipline.

Andreas works across disciplines and creates objects, tools and interfaces where art and technology meet in a curious way. Many of his works are collaborative and have been presented on screen, in code, as installations, in exhibitions, as performances or workshops. His practice focuses on emerging and open source technologies, where outcomes are inspired and informed by computational aesthetics, interactions and networked processes. He likes plants, he hopes they like him back.

Dhiya also known as MDRN is an artist, designer, maker and probably Singapore's only surfboard shaper/builder. He is partner at STUDIO SWELL which works on prints, branding, graphic design. Runs an art studio, neuwave, dealing with installations and object making. Makes surfboards under the label The Happy Poison Gang.

Jo Ho is a media artist working with digital installations and generative systems to explore how digital technologies shape and sometimes obscure our perception of meaning, memory, and materiality. Her practice explores what she calls digital corporeality, challenging the perceived immateriality of digital media and revealing the weight, labor, and logic embedded within these systems.

Kapi is a media artist, designer and technologist with a keen interest in exploring digital interactions, rapid mechanization and computational ubiquity within contemporary society. Using real-time data and audience interactivity as foundational elements, his works span across generative images, sound and animations, mixed-reality experiences, screen-based installations, computer programs, and machine learning models.

Classical Design

Design Thinking

Computational Design

Thinking critically about Technology

Use all three kinds of Design

Understand Computation

Actively learning The New

Explore

Ideate

Make

Test

Share

We will meet on a weekly basis every Wednesday at 9.30 in F301. For a breakdown of the weekly schedule, navigate downwards.

Introduction to the class and an overview of weekly topics, activities and workshops followed by warm-up activities

The anatomy of a program: syntax, flow, functions, variables, shapes, loops, conditionals.

What can coding do for you and what can you do with coding as a designer? In class activities are conducted in small groups to better understand the relevance, potential and application of code and computation

In a series of workshops, students are split into smaller groups and will be introduced to topics previously covered in more detail and will be briefed to creatively apply coding in a small exercise for each workshop.

Workshop 1 continues and concludes at the end of the session, Workshop 1 outcomes due week 7

An introduction of curation and layout in digital media to better display your digital outcomes in digital and physical publications.

Process and progress review. Digital Portfolio and Creative Process Journal work check

Students continue with their second workshop, introduction to topic and workshop briefing

Workshop 2 continues and concludes at the end of the session. Workshop 2 outcomes to be completed and due week 11

Students continue with their third workshop, introduction to topic and workshop briefing

Workshop 3 continues and concludes at the end of the session. Workshop 3 outcomes to be completed and due week 13

Use this week to work on your submission.

Your submission should include all materials as required and briefed.

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. There are two main elements that are required:

1. Archive (update regularly)

2. Summary (end of the semester)

This section gives an overview of basic coding concepts you should find useful to playfully explore activities and exercises for this class and creative coding in general.

Code, simply put, is a set of instructions for programming a computer. In Creative Coding, we use instructions to create computer-generated results. Often visual, they can be static, dynamic, poetic, interactive and they can appear on a screen or on paper, as objects among many other things.

In Creative Coding, we call a sketch a computer program. Why a sketch? In art or design, a sketch is a common term for a rough and unfinished drawing, here a coded sketch should be seen similarly, rough and unfinished, to illustrate a thought, to bring a creative idea to life.

An editor, or more precisely a code editor, is a text editor program designed for editing source code for computer programs. In our particular case this semester, we will use a browser-based editor at editor.p5js.org, a web editor for p5js. For demos and tutorials we will use p5live.

A function is simply a “chunk” of code, or a block of code, that you can use over and over again, rather than writing it out multiple times. Functions enable programmers to break down or decompose a problem into smaller chunks, each of which performs a particular task.

Transformation  is a concept that initially leaves you scratching your head. Why? Transformations act on the coordinate system rather than on shapes, and transformations are accumulative. Allison Perish has written an extensive and useful tutorial with examples here. 

A for loop repeats one or more statements a given number of times.

A for loop repeats one or more statements a given number of times.

Computers can be programmed to make decisions, to do different things in different circumstances. Decisions take the form of an if-then format. They start with a condition, which is then evaluated as either True or False.

This section gives an overview of what is expected from documentation of your work and how they should be prepared before archiving them or submitting them.

When you archive images in your digital portfolio, they have to be in .jpg format and use 72 ppi.

Default image size: Width between 1280px to 2048px

Gallery thumbnail: Width smaller or equal to 960px

Hero image: Width bigger or equal to 1920px

For Mac

Keyboard for built-in app:

Shift + Cmd + 3 (for entire screen)

Shift + Cmd + 4 (for selected area) 

For Windows

Keyboard for built-in app:

Windows + Shift + S

Windows + Function + PrtScn

Windows + PrtScn

When taking a screenshot of your sketch, please screenshot only the canvas portion and not the entire screen of your code.

Within p5.js

Add the function keyPressed() at the bottom of your code to be able to activate saveCanvas() by pressing on the 's' key on your keyboard.

Taking photos of physical objects

Your camera can only do so much. If you're taking a photograph of a physical sketch or an object, make sure that it is brightly lit and illuminated equally all around the page.

Which looks better to you?

Editing your physical photos

To make your image look better for your archive, make sure your playing around with settings in Photoshop.

In Photoshop, use these settings to help brighten your whites and create more contrast

If your light is looking a little warmer than you would like (i.e. yellow or orange light), then you may balance the colors out using these.

Converting & Compressing your images

Make sure you are not uploading large image files (larger than 1MB) in your archive. For this, you may use Photoshop to compress and convert your images.

To export an image to a .jpg using Photoshop, click on Export > Export As...

1

Select on JPG as your exported file type in the dropdown menu, and click on the 'Export' Button on the bottom right.

2

Your image is a .jpg but it is still too large?

You can also use Photoshop to compress your file.

Click on Image > Image Size...

1

Ensure the resolution is at 72 ppi (Pixels/Inch) and that your image size is no larger than needed.

2

When you archive videos in your digital portfolio, they have to be in .mp4 format in 1080p or 720p.

For macOS

Open Screenshot

Cmd + Shift + 5 

Record selected portion (suggested)

For Windows

Make sure you have Snipping Tool downloaded.

Windows + Shift + R

If your Snipping Tool doesn't have a recorded video section, please download OBS.

When taking a screen recording of your sketch, please record only the canvas portion and not the entire screen of your code.

OBS Screen Recording

In the second column, press the "+" button at the bottom then select a new Window Capture.

1

Rename the source if you wish and then click "OK"

2

OBS Screen Recording

Select the window that your sketch is playing.

3

OBS Screen Recording

Ensure that your screen is in fullscreen mode before hand before you capture your recording. If it is not, then may try to fill in the canvas with only the image (do not include the code).

4

When you're ready to record, press Start Recording.

5

Converting your videos using Adobe Premiere Pro.

Make sure your videos are not in .mov format (which is the basic export for screen recording for Mac).

First start with clicking on "New Project", name your file and then choose a file location.

1

Select your media and import it into your project.

2

Click on the 'Export' Tab

3

Select H.264 for .mp4 in the dropdown menu

5

Change the name and select the file location for the export.

4

Hit 'Export'

6

Compressing your videos using Adobe Premiere Pro.

Make sure you are not uploading huge video files more than 50MB each. Unless your video is longer than 1 minute, there should be no reason why your video file would be more than 50-100 MB.

Under the 'Export' tab of your project, check the 'Video' settings and make the video smaller if it is too large.

1

Click on 'More' to access the Bitrate Settings. Scroll down to find this section. If you want to have a lower quality, you might be able to turn Target Bitrate down to 2 and see if the file size changes. 

2

Hit 'Export'

3

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.

It is important that when using ChatGPT, you are treating it as a tutoring session by questions about code you may not understand or want to know more about, and it is not advisable to use ChatGPT to write your whole project in code for you.

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.

Introduction and overview of the Computation in Design class followed by a drawing and coding activity.

We will learn basic and foundational coding skills to create visual outputs. We will learn to structure and apply commands to create browser based computer programs. Through demos, exercises and a final project brief we will learn and practice creative coding and share our findings.

We will use a coding environment called p5js which is a JavaScript library for Creative Coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else. p5js will be our main coding tool and environment to learn and practice.

We are learning to build a better understanding of the mechanisms that constitute a computer program. With this foundation and basic understanding of what code is, how code feels, what code can do, the aim is to make code a part of your designer's toolkit.

Code, simply put, is a set of instructions for programming a computer. In Creative Coding, we use instructions to create computer-generated results. Often visual, they can be static, dynamic, poetic, interactive and they can appear on a screen or on paper, as objects among many other things.

In Creative Coding, we call a sketch a computer program. Why a sketch? In art or design, a sketch is a common term for a rough and unfinished drawing, here a coded sketch should be seen similarly, rough and unfinished, to illustrate a thought, to bring a creative idea to life.

An editor, or more precisely a code editor, is a text editor program designed for editing source code for computer programs. In our particular case this semester, we will use a browser-based editor at editor.p5js.org, a web editor for p5js. For demos and tutorials we will use p5live.

p5js editor. Your main tool to develop your sketches with. It is best to create a free account so that you can save your sketches with p5js

Here is a brief rundown of the editor's interface.

Main menu bar of the p5 web editor lets you access commonly used commands.

Use this section here to login or create an account.

Run/stop your sketch with these buttons. Enabling ‘Auto-refresh’ will reload the sketch whenever code is updated in the editor.

This is the public title of your sketch. Click on the pencil icon to rename it.

Click here to access the settings for the editor.

This is where you write all the code for your sketches. Notice the numbers along the left edge indicating specific lines of code.

The preview area is where you see the visual outcome of the code you write.

This is where JavaScript “talks” to you by displaying errors & other information.

For this first activity, choose one or more of the provided p5js sketches by clicking on the image in one of the following slides. A sketch here is the equivalent of a drawing sketch, but with code.

In your group try one or more of the sketches provided and make changes to the code that will show on the left side of the browser window. Above the code section, tick the Auto-refresh box then press the Play button next to it to run the sketch.

The easiest is to make changes to the numbers in the code.

It is probably more fun to do this in a group than alone. Let one of your group members share their screen and make changes to the code. Use the  line numbers to identify the line of code you want to make changes to.

Go to next slide (navigate downwards)

Part

1 of 2

Inside the code there are comments (grey text) that humans can read, but the machine doesn’t care much about. You can follow some of the hints given in these comments. 

You might break things, but that’s ok. If errors show up in the console, you can fix them or reload the page.

Note down and share any idea or application that may emerge while making changes.

Do one screenshots per group member of the rendered image during or at the end of the 30 minutes, give it a title.

Share your screenshots with your lecturers via Google Drive and we will make an online gallery.

Part

2 of 2

Share your screenshots with your lecturers via Google Drive and we will make an online gallery.

Format

Filename

jpg at 72dpi, square, 800x800 pixels

studentID-title.jpg

Now that you know what is expected of you to submit, go to the next slides to find five sketches to work with, select one that you like best.