B-DC 121

Computation in Design 1

2021

Computation in Design 1

Process

Code

Analog

Digital

2021

Overview

Computation in Design 1

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.


Within the creative industries, such practices are rapidly evolving in the field of design, where technology plays a key part in the design process or can even produce outcomes on its own.

 

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. This is achieved by combining technical, form-giving and playful approaches that converge at the intersection of code and visual design. This component lays the foundation for skills, context and aesthetics in Computation in Design (CiD).

1

B-DC 121

Computation in Design 1

2021

Overview

Computation in Design 1

Computation in Design 1: From Analog to Digital comprises a series of exercises and activities 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. Each term is dedicated to one subject that introduces you to areas of application for CiD.


Term 1: Process
You will learn about computation through hands-on exercises and workshops to develop a basic understanding of a process. 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 instructions, rules and conditions.


Term 2: Code
Understanding, learning and applying code in your design practice will be the focus of this term. As you make a transition from analog to computational design, you will apply a range of coding principles to create a series of static and moving images. This is often achieved through trial and error, curiosity and experimentation.

2

B-DC 121

Computation in Design 1

2021

Overview

Computation in Design 1

Requirements

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.

 

Term 1: Process
1. Analog and physical, mixed with digital, 2D and 3D applications
2. Documentation of process, reflection and outcomes in digital format and in the Creative Process Journal (CPJ)


Term 2: Code
1. Digital and screen-based 2D and 3D applications
2. Documentation of process, reflection and outcomes in digital format and in the Creative Process Journal (CPJ)

3

B-DC 121

Computation in Design 1

2021

Schedule

1

Weekly Schedule

B-DC 121

Computation in Design 1

This is week

2021

Schedule

1

From Analog to Digital

Introduction, expectations, Digital Portfolio

Show-and-tell by Andreas Schlegel

Activity 1

2

Computation

Input-Process-Output

Show-and-tell by Joanne Ho

Activity 2

3

Design by Instructions 1

Show-and-tell by Ong Kian Peng

Exercise 1

4

Design by Instructions 2

Exercise 1 continues

Students show-and-tell

to develop a basic understanding of the input-process-output model

exercise briefing, to practice the formulation and execution of instructions with pen and paper, analog.

to practice the formulation and execution of instructions with code, digital.

introduction and overview of classes, exercises and documentation procedures followed by a drawing activity

Weekly Schedule

Topics

What we will cover

B-DC 121

Computation in Design 1

2021

Schedule

5

Conditional Design 1

Show-and-tell by Dhiya Md

Exercise 2

6

Conditional Design 2

Exercise 2 continues.

Students show-and-tell

7

Review

Review and sampling of Digital Portfolio progress

Activity 3

8

No class (Project week)

Independent study 

to practice the formulation and execution of conditionals with code, digital.

exercise briefing, to define a set conditions and rules to create unpredictable design outcomes, with pen and paper, analog.

Weekly Schedule

Topics

What we will cover

students to share their progress with lecturers while others work on an activity.

B-DC 121

Computation in Design 1

2021

Schedule

9

Introduction to Code

In-class workshop

Activity 4

10

11

Coding Images 2

Exercise 3 continues

Feedback and code-clinics

12

Coding Images 3

Exercise 3 continues

Feedback and code-clinics

to further familiarise with basic coding concepts that can be applied to static and animated visual outcomes

exercise briefing, to develop a basic understanding of form, color, repetition, and transformation within the context of code and design

Weekly Schedule

to share project idea, work on project and resolve issues encountered, simplify if necessary

Topics

What we will cover

B-DC 121

Computation in Design 1

Coding Images 1

In class development

Exercise 3

to continue work on project and resolve issues encountered, simplify if necessary

2021

Schedule

13

Coding Images 4

Mini-showcase and open feedback

Exercise 3 concludes

Submission briefing

14

15

Assessment

in this class we wrap up this semester's CiD. In a mini-showcase students demonstrate their works and see what their peers have come up with.

Weekly Schedule

Topics

What we will cover

B-DC 121

Computation in Design 1

Assessment Preparation

Independent Study

2021

Lecturers Classes Links

B-DC 121

Computation in Design 1

A

B

Joanne Ho

F301

C

Dhiya Rhaman

B1-06A

D

Ong Kian Peng

B1-06B

Olivia Chua

B1-06A / B

Andreas Schlegel

F301

2021

Overview

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.

Andreas

B-DC 121

Computation in Design 1

2021

Overview

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.

Dhiya

B-DC 121

Computation in Design 1

2021

Overview

Jo is an artist working with imaginations of digital and physical spaces that question the role of creativity and agency in our increasingly automated world where views of “machine as tool” and “machine as creator” are being challenged. Jo uses emerging digital technologies to practice a range of modes in space-making, some of which include speculative fiction and visuals using machine learning, virtual reality, and large-scale projections.

Joanne

B-DC 121

Computation in Design 1

2021

Overview

Ong Kian Peng is a media artist and designer who works with code, electronics and media technology. He enjoys his time with nature.

Kian Peng

B-DC 121

Computation in Design 1

2021

Overview

Olivia is trained at Royal Melbourne Institute of Technology University in Australia and her background in Advertising and Visual Communication allows her to share her practice and knowledge in design education where she focuses on building fundamentals through multi-explorations and methodologies in design. 

Olivia

B-DC 121

Computation in Design 1

2021

Overview

George, aka Radarboy3000, is a South African new media artist using generative design and data sculpture for installations, audio visual performances and now cryptoart. He is South Africa's most awarded digital artist, creating digital and physical works for some of the world's biggest brands including Disney, Cartier, Coca Cola, Audi, Lucky Strike, American Express, and Singapore Airlines.

George

B-DC 121

Computation in Design 1

2021

Class procedures

B-DC 121

Computation in Design 1

From week 2 onwards classes will be conducted on-campus. Students joining remotely due to Covid restrictions will be able to do so via Zoom and/or Google Meet where necessary and applicable.

 

Briefings, presentations will be conducted over Zoom for all students. Group works happen on-campus in person or remotely over Google Meet.

 

All students will have access to their lecturers and consultations during the scheduled hours for this class, Tuesdays 9:30am –12:30pm.

 

No consultations will be conducted outside of class hours, which includes email.

Be on time. Class starts at 9:30am.

Tip think that class starts at 9:15am then chances are higher that you will be on time.

 

We will conclude attendance taking at 9:45am, you are marked absent afterwards.

2021

B-DC 121

Computation in Design 1

Resources

Links

References

Shows

In this section you will find resources for learning, curiosity and inspiration; a collection of links, works, artists, designers that will grow over the course of the semester.

2021

B-DC 121

Computation in Design 1

Resources

Links

References

Shows

Platforms

Visuals

Watch

Instagram

2021

B-DC 121

Computation in Design 1

Resources

Links

References

Shows

2021

B-DC 121

Computation in Design 1

Resources

Links

References

Shows

2021

B-DC 121

Computation in Design 1

Resources

Links

References

Shows

2021

B-DC 121

Computation in Design 1

Instagram

datavizsociety

giorgialupi

pentagram

theageofdata

creativecodeart

drwngdrwng

zach.lieberman

 

Instagram #

codeart

generativedesign

algorithmicart

artandtechnology

p5js

 

Readings

 

Notes

Notes for teaching CiD

 

 

https://workbook.conditionaldesign.org/

 

Resources

Readings

Links

References

2021

Resources

Readings

Links

References

B-DC 121

Computation in Design 1

2021

Resources

Readings

Links

References

B-DC 121

Computation in Design 1

2021

Resources

Readings

Links

References

B-DC 121

Computation in Design 1

2021

Digital Portfolio

B-DC 121

Computation in Design 1

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 three main elements that are required

1. Archive update regularly

2. CPJ update after class

3. Summary towards the end of the semester

 

2021

Digital Portfolio

Archive

CPJ

Summary

Download

B-DC 121

Computation in Design 1

After you have downloaded the Digital Portfolio  (see section Download below) template you should see the following inside your Browser window. Consider to keep your Digital Portfolio e.g. on Google Drive 

Folder structure

Available for download as .zip from Google Drive

Document your process and outcomes

Archive and organise materials for deliverables

Read and follow the Digital Portfolio Guidelines

Keep(s) your work organised

 

2021

Digital Portfolio

Archive

CPJ

Summary

Download

 

B-DC 121

Computation in Design 1

Outcomes like images, videos or written documents will be kept in the Archive. Here do follow the folder structure given for each week as well as the instructions given in class.

2021

Digital Portfolio

Archive

CPJ

Summary

Download

B-DC 121

Computation in Design 1

For your CPJ (Creative Process Journal) that you will keep for CiD follow the instructions and the format given in your practical studio class. Your CPJ for CiD will follow the same format.

2021

Digital Portfolio

Archive

CPJ

Summary

Download

B-DC 121

Computation in Design 1

For your final submission you will create a summary of selected outcomes that you will have created this semester. This summary will be in .pdf format and a template will be provided.

2021

B-DC 121

Computation in Design 1

Download Digital Portfolio from Google Drive

Digital Portfolio

Archive

CPJ

Summary

Download

You must be logged in with your LASALLE email to access Google Drive files and folders.

2021

B-DC 121

Computation in Design 1

Download Digital Portfolio from Google Drive

Digital Portfolio

Archive

CPJ

Summary

Download

2021

B-DC 121

Computation in Design 1

Download Digital Portfolio from Google Drive

Digital Portfolio

Archive

CPJ

Summary

Download

2021

B-DC 121

Computation in Design 1

unzip downloaded .zip file

Digital Portfolio

Archive

CPJ

Summary

Download

2021

B-DC 121

Computation in Design 1

Read Digital Portfolio Guidelines

Digital Portfolio

Archive

CPJ

Summary

Download

2021

B-DC 121

Computation in Design 1

Digital Portfolio Guidelines

Digital Portfolio

Archive

CPJ

Summary

Download

2021

B-DC 121

Computation in Design 1

Keep your Digital Portfolio in a safe place. Consider storing it on Google Drive, as you will need to submit your Digital Portfolio at the end of the semester.

Digital Portfolio

Archive

CPJ

Summary

Download

2021

Learning

B-DC 121

Computation in Design 1

On-campus and online

Individually and in small groups

Feedback and group discussions

Guided and independently

Make use of resources shared in class

Learn from resources online and the library

Study, learn, practice with classmates

Experiment and practice continuously

Getting stuck, ask for help

Tips

Week 1

2021

From Analog to Digital

B-DC 121

Computation in Design 1

Activity 1

From Analog to Digital

Introduction, expectations, Digital Portfolio

Show-and-tell by Andreas Schlegel

Activity 1

introduction and overview of classes, exercises and documentation procedures followed by a drawing activity

2021

Introduction

B-DC 121

Computation in Design 1

Weekly schedule

Lecturers and spaces

Digital Portfolio

Expectations

Show and tell

Week 1

 

2021

Introduction

B-DC 121

Computation in Design 1

Weekly schedule

Lecturers and spaces

Digital Portfolio

Expectations

 

 

 

 

 

 

 

Show and tell

Week 1

 

develop computation and coding literacy

participate and contribute in class

practice and learn together and independently

ask for help, help each other

tell and show them more

not be scared and intimidated by coding

acquire new knowledge and learn new skills, then become good at it

enjoy activities and exercises

not feel lost

make cool things

Teachers expect that students

Students expect to

2021

B-DC 121

Computation in Design 1

Show and tell

Week 1

Andreas Schlegel

2021

Activity 1

B-DC 121

Computation in Design 1

Follow and visit 3 URLs

Take a screenshot

Create a drawing from screenshot

Take a picture of drawing

Save screenshot and picture to your Digital Portfolio

Upload screenshot and picture to Google Drive shared-folder

Week 1

Steps to take

Detailed Briefing

2021

Activity 1

B-DC 121

Computation in Design 1

Briefing

 45 mins individual work

Week 1

2021

B-DC 121

Computation in Design 1

Save images and thoughts to your Digital Portfolio under

archive ⟶ activities ⟶ activity-1 ⟶ images

Activity 1

Week 1

2021

B-DC 121

Computation in Design 1

Wrapping up Week 1

Complete Activity 1

Read Digital Portfolio Guidelines

Update Digital Portfolio as described in the activity 1 briefing

 

Homework

Week 1

Week 2

Week 2

Computation

2021

B-DC 121

Computation in Design 1

Computation

Input-Process-Output

Show-and-tell by Joanne Ho

Activity 2

to develop a basic understanding of the input-process-output model

Activity 2

2021

Computation

B-DC 121

Computation in Design 1

Week 2

Computation refers to the use or operation of a computer or the act or process of computing or calculating something.

 

Computation is any type of calculation that includes both arithmetic – the manipulation of numbers – and non-arithmetical steps and follows a well-defined model, for example an algorithm.

 

2021

Computation

B-DC 121

Computation in Design 1

Week 2

Computation refers to the use or operation of a computer or the act or process of computing or calculating something.

 

Computation is any type of calculation that includes both arithmetic – the manipulation of numbers – and non-arithmetical steps and follows a well-defined model, for example an algorithm.

 

Generative Design

Motion Graphics

Data Visualisation

Interaction Design

Computational Design

Physical Computing

Experience Design

Interface Design

Machine Learning

2021

B-DC 121

Computation in Design 1

Week 2

Computation in Design

Generative Design

2021

B-DC 121

Computation in Design 1

Week 2

Computation in Design

Motion Graphics

2021

B-DC 121

Computation in Design 1

Week 2

Computation in Design

Data Visualisation

2021

B-DC 121

Computation in Design 1

Week 2

Computation in Design

Interface Design

2021

B-DC 121

Computation in Design 1

Week 2

Computation in Design

Physical Computing

2021

B-DC 121

Computation in Design 1

Week 2

Computation in Design

Interaction Design

2021

B-DC 121

Computation in Design 1

Week 2

Computation in Design

Experience Design

2021

B-DC 121

Computation in Design 1

Computation finds many

applications in Design

2021

B-DC 121

Computation in Design 1

John Maeda on Design today

John Maeda defined three kinds of design as a working model to build upon:

Classical Design, which pertains to the design of objects we use in the physical world,

Design Thinking, which pertains to how organisations learn how to collaborate and innovate using ideation methods, and

Computational Design, which pertains to any kind of creative activity that involves processors, memory, sensors, actuators, screens, and the network.

2021

B-DC 121

Computation in Design 1

John Maeda on Design today

John Maeda is an American executive, designer, technologist. His work explores the area where business, design, and technology merge to make space for the "humanist technologist." Maeda served as the President of Rhode Island School of Design (RISD), he was a Professor at the MIT Media Lab. His Design by Numbers project in the late 1990s  was aimed at artists and designers to learn to code. maedastudio

2021

B-DC 121

Computation in Design 1

Show and tell

Joanne Ho

Week 2

2021

B-DC 121

Computation in Design 1

Week 2

Input-Process-Output Model

By definition the Input-Process-Output Model describes in the context of a computer program how a program receives inputs from a user or other sources, does some computations on the inputs, and returns the results of the computations.

This Model applies to many aspects of computation but can also be found in many other disciplines and aspects of everyday life.

2021

B-DC 121

Computation in Design 1

Week 2

2021

B-DC 121

Computation in Design 1

Week 2

Input-Process-Output Model

By definition the Input-Process-Output Model describes in the context of a computer program how a program receives inputs from a user or other sources, does some computation on the inputs, and returns the results of the computations performed.

Let’s take a light switch for example, an input to control the light state in a room. By flipping the light switch, a circuit interrupts or establishes the flow of current to a light bulb, the output.

2021

B-DC 121

Computation in Design 1

Week 2

Algorithm

Every algorithm takes in defined inputs (the things being acted upon) and has the goal of producing defined outputs (the results you want).

 

For example, maybe you have a set algorithm for making yourself a sandwich for lunch. Your goal, or output, might be to make a sandwich that will fill you up.

 

The inputs are all of the ingredients that will go into the sandwich, and your algorithm is how you order and arrange these things so that you can get your desired result, or output, of a sandwich.

 

An algorithm is a series of steps that allow you to perform a particular task.

2021

B-DC 121

Computation in Design 1

Week 2

2021

B-DC 121

Computation in Design 1

Week 2

The second activity this semester is concerned with the Input-Process-Output Model.

 

This model does not only apply to computer systems, but finds application in many different everyday situations that we take for granted but which are all designed on different levels including form, aesthetics, interface, interaction, or system.

 

This activity comes in 3 parts and will be conducted in groups of 3.

Activity 2

Find, analyse and describe an everyday object that can be found in your house, a mall or the city in detail considering each of the following 3 phases

1. Input

2. Process and Algorithm

3. Output

What is so special, boring, exciting, or mundane about the object? Document your findings in a .docx descriptive and reflective writeup including hand drawn sketches.

Design and describe a scenario for a future everyday object that requires an input to trigger a process/algorithm and results in an output that you define. Describe your ideas briefly but elaborately in a series of hand-drawn sketches, writing and flow diagrams.

Find an Idea Spark for a (house, mall, city) scenario in the next slides for inspiration and to initiate a discussion within your group.

We are interested in your ideas, not if your approach is right-or-wrong.

Share and discuss the above with your classmates and note down the feedback you receive, add some reflective thoughts.

1

2

3

Input - Process - Output

2021

Activity 2

B-DC 121

Computation in Design 1

Briefing document

until 12:10pm

followed by a brief in-class sharing session

Week 1

Students joining remotely can make use of online sharing tools like Google Jamboard (sketching together) or Google Docs (writing together) during this session.

2021

B-DC 121

Computation in Design 1

Week 2

The second activity this semester is concerned with the Input-Process-Output Model.

 

This model does not only apply to computer systems, but finds application in many different everyday situations that we take for granted but which are all designed on different levels including form, aesthetics, interface, interaction, or system.

 

This activity comes in 3 parts and will be conducted in groups of 3.

Activity 2

Input - Process - Output

This activity requires you to think quickly and not to overthink an idea. Use pen and paper to visualise your ideas as a sketch or a flow diagram, then write down your thoughts. Follow the instructions given in the briefing document.

Part 1 is about the now

Part 2 is about the future

Part 3 is about feedback and reflection

The examples that we are providing are considered to be starting points for your discussions. You may also ignore them if they are not helping and make your own findings.

2021

B-DC 121

Computation in Design 1

Week 2

Activity 2

Idea Spark House

Design and describe a scenario for a future everyday object that requires an input to trigger a process / algorithm and results in an output that you define. Describe your ideas elaborately in a series of hand-drawn sketches, writing and flow diagrams.

Find an Idea Spark for a house scenario in this slide to initiate a discussion within your group.

We are interested in your ideas, not if your approach is right-or-wrong.

2021

B-DC 121

Computation in Design 1

Week 2

Activity 2

Idea Spark Mall

Design and describe a scenario for a future everyday object that requires an input to trigger a process / algorithm and results in an output that you define. Describe your ideas elaborately in a series of hand-drawn sketches, writing and flow diagrams.

Find an Idea Spark for a mall scenario in this slide to initiate a discussion within your group.

We are interested in your ideas, not if your approach is right-or-wrong.

2021

B-DC 121

Computation in Design 1

Week 2

Activity 2

Idea Spark City

Design and describe a scenario for a future everyday object that requires an input to trigger a process / algorithm and results in an output that you define. Describe your ideas elaborately in a series of hand-drawn sketches, writing and flow diagrams.

Find an Idea Spark for a city scenario in this slide to initiate a discussion within your group.

We are interested in your ideas, not if your approach is right-or-wrong.

2021

B-DC 121

Computation in Design 1

Wrapping up Week 2

Complete Activity 2

Update Digital Portfolio as described in the activity 2 handout

Bring black pen or pencil, ruler and white paper A3 

Homework

Week 2

Week 3

2021

week2

B-DC 121

Computation in Design 1

15 mins   Intro and recap

25 mins  15 minutes of coding

10 mins   What is computation

20 mins  Joanne present

15 mins   break

100 mins mins Activity 2 (group of 3-4)

  input-process-output

  examples

  briefing

  working in groups

  sharing

 

Week 2

Design by Instructions 1

2021

B-DC 121

Computation in Design 1

Exercise 1

Design by Instructions 1

Exercise 1

Exercise 1 briefing: to practice the formulation and execution of instructions with pen and paper, analog.

Week 3

2021

Link to external Slides

B-DC 121

Computation in Design 1

Week 3

2021

B-DC 121

Computation in Design 1

Wrapping up Week 3

Review this session's slides and  in particular the homework slide

Familiarise yourself with p5js following the Getting Started with p5js slides and videos linked from there

In our next session we will look into the p5js editor, canvas, 2D primitives, and colors

Homework

Week 3

Week 4

Design by Instructions 2

2021

B-DC 121

Computation in Design 1

Exercise 1

Week 4

Design by Instructions 2

Show-and-tell by Ong Kian Peng

Exercise 1 continues

to practice the formulation and execution of instructions with code, digital.

2021

Link to external Slides

B-DC 121

Computation in Design 1

Week 4

2021

B-DC 121

Computation in Design 1

Wrapping up Week 4

Review this session's slides and  in particular the homework slide

Update your Digital Portfolio

Homework

Week 4

Week 5

Continue practicing your p5js skills with the Getting Started with p5js slides and videos linked from there

 

Conditional Design 1

2021

B-DC 121

Computation in Design 1

Exercise 2

Week 5

Conditional Design 1

Exercise 2

exercise briefing, to define a set conditions and rules to create unpredictable design outcomes, with pen and paper, analog.

2021

Link to external Slides

B-DC 121

Computation in Design 1

Week 5

2021

B-DC 121

Computation in Design 1

Wrapping up Week 5

Review this session's slides and  in particular the homework slide

Update your Digital Portfolio

Homework

Week 5

Week 6

Continue practicing your p5js skills with the Getting Started with p5js slides and videos linked from there

 

Conditional Design 2

2021

B-DC 121

Computation in Design 1

Exercise 2

Week 6

Conditional Design 2

Exercise 2

to practice the formulation and execution of conditionals with code, digital.

2021

Link to external Slides

B-DC 121

Computation in Design 1

Week 6

2021

B-DC 121

Computation in Design 1

Wrapping up Week 6

Review this session's slides and  in particular the homework slide

Update your Digital Portfolio we will review each individual portfolio next week, please make sure it is complete.

Homework

Week 6

Week 7

Continue practicing your p5js skills with the Getting Started with p5js slides and videos linked from there

 

Digital Portfolio Review

2021

B-DC 121

Computation in Design 1

Activity 3

Week 7

2021

B-DC 121

Computation in Design 1

Week 7

Digital Portfolio Review

Do stay in the Zoom session throughout today's class.

2021

B-DC 121

Computation in Design 1

Week 7

Activity 3

Book Cover Visual

2021

B-DC 121

Computation in Design 1

Week 7

Activity 3

Book Cover Visual

Brief

2021

B-DC 121

Computation in Design 1

Week 7

References - Bauhaus, 1930's (Design Movement)

Max Bill

Activity 3 Book Cover Visual

2021

B-DC 121

Computation in Design 1

Week 7

References - Bauhaus, 1930's (Design Movement)

Lazlo Moholy-Nagy

Activity 3 Book Cover Visual

2021

B-DC 121

Computation in Design 1

Week 7

References - De Stijl, 1930's (Design Movement)

Theo Van Doesburg

Activity 3 Book Cover Visual

2021

B-DC 121

Computation in Design 1

Week 7

References - Swiss Style, 1950's (Design Movement)

Josef Müller Brockmann

Activity 3 Book Cover Visual

2021

B-DC 121

Computation in Design 1

Week 7

References - Swiss Style, 1960's (Design Movement)

Armin Hoffmann, Graphic Design Manual

Activity 3 Book Cover Visual

2021

B-DC 121

Computation in Design 1

Week 7

References - Japanese Graphic Design, 1990's

Tomoko Miho

Activity 3 Book Cover Visual

2021

B-DC 121

Computation in Design 1

Week 7

References - Book Cover Redesign, 2020

Activity 3 Book Cover Visual

2021

B-DC 121

Computation in Design 1

Open Processing, how to use?

Activity 3 Book Cover Visual

The video on the right shows you how to use the Open Processing tutorial view. The tutorial Getting Started in the video is divided into 8 parts to introduce a basic code foundation on working with code and visual elements. 

For this week you will focus on parts 1 - 4. At the end of each step, you will find a paragraph starting with the word TRY. These prompts serves to help you understand each part better by making active changes to the code on the right side.

When you watch the video, notice that you can change the editor view from a 2-column to a 3-column view.

Week 7

2021

B-DC 121

Computation in Design 1

Week 7

Code tutorials on Open Processing.

Activity 3 Book Cover Visual

only steps 1–4 required here

only steps 1 and 2 required here

2021

B-DC 121

Computation in Design 1

Week 7

Activity 3 Book Cover Visual

2021

B-DC 121

Computation in Design 1

Wrapping up Week 7

Complete Activity 3, details are provided in the slides above

Update your Digital Portfolio

Homework

Week 7

Week 9

Continue practicing your p5js skills with the Getting Started with p5js slides and videos linked from there

 

Week 8

Project Week

2021

B-DC 121

Computation in Design 1

Coding continues

2021

Activity 4 Pixelate

B-DC 121

Computation in Design 1

Week 9

2021

B-DC 121

Computation in Design 1

Coding continues, pixelate

In today's session we look at pixels, how to read them in code and how to use pixel information and apply to other shapes.

+

+

A pixel is the smallest unit of a digital image. A pixel is the combination of 3 color channels: red, green, blue. Each channel can take on a value between 0 and 255. Together, they can display over 16 million different colors.

When you open one of the following sketches, do read the comments first before you start making changes.

One of the changes required is to substitute an image that serves as the basis for reading pixel information, and then apply that information to the way shapes and colors are drawn on the canvas.

Week 9

2021

B-DC 121

Computation in Design 1

Week 9

Pixelate

1

20

2021

B-DC 121

Computation in Design 1

Week 9

Pixelate

2

20

2021

B-DC 121

Computation in Design 1

Week 9

Pixelate

3

20

2021

B-DC 121

Computation in Design 1

Week 9

Pixelate

4

30

Week 10

Coding Images 1

2021

Exercise 3

B-DC 121

Computation in Design 1

2021

B-DC 121

Computation in Design 1

Exercise 3 Coding Images concludes the series of exercises for Computation in Design 1. In this exercise you will create a series of coded sketches that focus on 2D shapes in motion.

 

Follow the briefing, deliverables and references in the next slides. Students to work on exercise 3 individually.

Exercise 3

Coding Images

Week 10

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Briefing

Project Brief

Take inspiration from the references shared in the following as a guide for developing your visual elements and aesthetics. Sketch them out on paper first, then realise them in code.

Apply the following concepts in code: Shape, color, transformation, movement, conditional, repetition.

2

3

Select one from a given list of text fragments and (re)interpret it in code.

For this exercise, the following deliverables are required, detailed information see handout document

Images and Videos. Document your process by taking screenshots and screen recordings of your work regularly throughout the development of your project.

Written Reflection. Reflect on your exercise 3 process and outcomes in writing. Give your projec a title.

Code. First work on a series of code sketches (2-4 different approaches) of which you will then focus on one selected-sketch and present it in week 13. Download selected-sketch as .zip file and add to your Digital Portfolio.

Deliverables

2

3

Week 10

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Briefing

Schedule

Briefing, idea development starts

Idea confirmation, sketching on paper and in code continues

Development of code sketches, problem solving

Mini-showcase and feedback 

1

2

3

4

Week 10

by Week 11

by Week 12

by Week 13

Based on the brief, develop your initial idea for this exercise. Use pen and paper to sketch out your ideas, more is better than less. Get inspiration from the references provided or go back to previous code activities and start your idea from there. Identify at least 1 visual reference (from the list under references) for your project.

At this point, you should be confident in your idea. During this week, you can discuss your idea with your instructor(s) regarding aesthetics and code. By now you should have started with your first code sketches. 

At the beginning of this last session, you will have some time to clarify any final questions you may have. In the second half of the session, students will present their outcomes. 

Idea

Sketches on paper

Sketches on paper

Sketches in Code

Sketches in Code Moving Visuals

Final Code 

Deliverables

What

How

When

Deliver

Session

At this point, you should have developed a set of code sketches that you can share with your instructors and work on in class. Sketch and write down on the paper what help, if any, you would need and what improvements you have come up with and would like to discuss.

2021

B-DC 121

Computation in Design 1

“If you can’t give me poetry, can’t you give me poetical science?”

― Ada Lovelace

“No, emptiness is not nothingness. Emptiness is a type of existence. You must use this existential emptiness to fill yourself.”
― Liu Cixin, The Three-Body Problem

“There is no such thing as an empty space or an empty time. There is always something to see, something to hear. In fact, try as we may to make a silence, we cannot.”

― John Cage, Silence: Lectures and Writing

“I believe in the balance between dreaming and building.”

― Neri Oxman

“Cyberspace. A consensual hallucination experienced daily by billions of legitimate operators, in every nation, by children being taught mathematical concepts... A graphic representation of data abstracted from banks of every computer in the human system. Unthinkable complexity. Lines of light ranged in the non-space of the mind, clusters and constellations of data. Like city lights, receding...”
― William Gibson, Neuromancer

“I have no regrets. My life is squares, triangles, lines.”

― Vera Molnar

A

B

E

F

C

D

Text Fragment

Exercise 3 | Coding Images | Briefing

Select one from this list of text fragments and (re)interpret it in code.

2021

B-DC 121

Computation in Design 1

Shape

Exercise 3 | Coding Images | Briefing

Apply the following concepts in code: Shape, color, transformation, movement, conditional, repetition.

2

Week 10

Reference

Tutorial

Example Code

Video

// to draw a rectangle, use command rect
// rect() requires 4 parameters, the numbers
// inside the parentheses: x,y,width and height

rect(0,0,200,100);


// in order to draw a non-primitive shape,
// use beginShape, endShape and vertex like this

beginShape();
vertex(0,0);
vertex(50,0);
vertex(70,100);
vertex(0,20);
endShape();

The most common 2D primitive shapes are: rect, ellipse, line, triangle, quad. You can create your own shapes using beginShape and endShape together with two or more vertex points. a vertex is a point in space that consists of x and y coordinates in 2D space and x, y and z coordinates in 3D space.

2021

B-DC 121

Computation in Design 1

Color

Exercise 3 | Coding Images | Briefing

Apply the following concepts in code: Shape, color, transformation, movement, conditional, repetition.

2

Week 10

Reference

Tutorial

Example Code

Video

// how to set the color of a line or outline? Use stroke
// a color is made up of 3 channels:  red, green and blue. 
// Each channel requires a number between 0 and 255.

stroke(255,0,0); // set outline to red
noFill(); // to disable the fill color, use noFill

// after the colors for the stroke and the
// fill have been set, draw the shape(s)
rect(0,0,200,100); // red outline rectangle
ellipse(0,0,50,50); // red outline ellipse

noStroke(); // disable outline color
fill(0,0,255); // set fill color to blue

ellipse(0,0,50,50); // blue filled ellipse

Colors in p5js are assigned by using stroke(), fill(). background() and color(). outline of a shape, and fill() will fill the inside of a shape with a color. To fill the background, or clear the canvas, with a solid color, use the background() command,

 

Just like fill and stroke, background expects 1, 3 or 4 arguments (1=gray, 3=rgb, 4=rgb+alpha).

 

Notice that background will clear everything inside the canvas when called. However, when you add an alpha value (like 20 or smaller as 4th argument) you will see a trailing effect when shapes are moving.

2021

B-DC 121

Computation in Design 1

Transformation

Exercise 3 | Coding Images | Briefing

Apply the following concepts in code: Shape, color, transformation, movement, conditional, repetition.

2

Week 10

Reference

Example Code

Video

Transformations allow you to group visual elements enclosed within push() and pop(). All elements inside this group can be moved translate(), rotated rotate() and scaled scale() at once and together.

// to move the rectangle below to position 150, 300
// we can use the translate transformation

translate(150,300);
rect(0,0,100,100);

// the benefit here is that the origin of the 
// rectangle (here 0,0).

// to complete the translformation we surround 
// all transformations and corresponding shapes 
// with a push and pop command like so

push();
translate(150,300);
rect(0,0,100,100);
pop();

Tutorial

2021

B-DC 121

Computation in Design 1

Movement

Exercise 3 | Coding Images | Briefing

Apply the following concepts in code: Shape, color, transformation, movement, conditional, repetition.

2

Week 10

Reference

Tutorial

Example Code

frameCount

 

From static to dynamic images. When a sketch runs, it updates the draw() function 60 times a second by default – it runs at a frameRate of 60. While a sketch is running we can use numbers that are changing to introduce change over time.

 

For example we have a number which is called frameCount. Every frame this number changes it increases by 1. When a sketch starts, frameCount starts counting from 0 and then changes to 1, 2, 3, etc with every frame past.

sin()

 

We all remember the sine function from our trigonometry classes, and very likely we can say that not many of us particularly liked it. In coding, however, the sine function can be very useful and a great companion when introducing movement.

 

The sine function is a periodic function because it is repeated over a distance of 2π. Visually, the sine function looks like a wave. We can use this property to create a smooth oscillating motion.

// to move shapes on screen we can use the frameCount
// frameCount is a variable provided by p5js that
// increases by 1 for every frame that has passed
// the following code moves a rectangle along 
// the x-axis from left to right

translate(frameCount, 200);
rect(0,0,100,100);


// tom make the above rectangle swing
// from left to right, use the following

let x = sin(frameCount * 0.01) * 100;
translate(x, 200);
rect(0,0,100,100);

// what happens if you replace sin with tan in line 14?

2021

B-DC 121

Computation in Design 1

Conditional

Exercise 3 | Coding Images | Briefing

Apply the following concepts in code: Shape, color, transformation, movement, conditional, repetition.

2

if-else statements (often referred to conditionals) are used in a program to make decisions.

We can use conditionals to introduce changes and decisions that depend on different states within a program.

Reference

Tutorial

// lets assume that the value of 
// a variable x is 5
let x = 5

// we then check the value of x using an 
// if-else statement. since x is not greater 
// than 5, the blue circle will be drawn 
// instead of the green rectangle
if(x>5) {
  // draw green rectangle
  fill(0,255,0)
  rect(0,0,200,100)
} else {
  // draw blue circle
  fill(0,0,255)
  circle(100,100,200)
}

Example Code

Video

Week 10

2021

B-DC 121

Computation in Design 1

Repetition

Exercise 3 | Coding Images | Briefing

Apply the following concepts in code: Shape, color, transformation, movement, conditional, repetition.

2

Week 10

Reference

Example Code

Video

A for loop allows us to execute code multiple times. Using loops we do not need to write same or similar code again and again.

 

A for-loop consists of three different expressions inside of a parenthesis. These expressions are used to control the number of times the loop is run.

 

The code inside of the loop body (in between the curly braces) is executed while the loop is active.

// to draw a rectangle 10 times we can use 
// a loop. In the following these rectangles are
// drawn along the y-axis with a spacing of 20 pixels


for(let i=0; i<10; i++) {
  rect(20, i * 20, 60, 5);
}  

for

2021

B-DC 121

Computation in Design 1

Week 10

References

Exercise 3 | Coding Images | Briefing

2021

B-DC 121

Computation in Design 1

Week 10

References

Exercise 3 | Coding Images | Briefing

Saskia Freeke

2021

B-DC 121

Computation in Design 1

Week 10

References

Exercise 3 | Coding Images | Briefing

Shun Sasaki

2021

B-DC 121

Computation in Design 1

Week 10

References

Exercise 3 | Coding Images | Briefing

Jono Brandel

2021

B-DC 121

Computation in Design 1

Week 10

References

Exercise 3 | Coding Images | Briefing

2021

B-DC 121

Computation in Design 1

Week 10

References

Exercise 3 | Coding Images | Briefing

Patrik Huebner

2021

B-DC 121

Computation in Design 1

Week 10

References

Exercise 3 | Coding Images | Briefing

Joshua Davis

2021

B-DC 121

Computation in Design 1

Week 10

Exercise 3 | Coding Images | Briefing

Start with sketching on paper.

2021

B-DC 121

Computation in Design 1

Week 10

Exercise 3 | Coding Images | Briefing

then move on to code an p5js.

Week 11

2021

B-DC 121

Computation in Design 1

Coding Images 2

Exercise 3 continues. Discuss your ideas and early code sketches with your lecturers.

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Schedule

Schedule

Briefing, idea development starts

Idea confirmation, sketching on paper and in code continues

Development of code sketches, problem solving

Mini-showcase and feedback 

1

2

3

4

Week 10

by Week 11

by Week 12

by Week 13

Based on the brief, develop your initial idea for this exercise. Use pen and paper to sketch out your ideas, more is better than less. Get inspiration from the references provided or go back to previous code activities and start your idea from there. Identify at least 1 visual reference (from the list under references) for your project.

At this point, you should be confident in your idea. During this week, you can discuss your idea with your instructor(s) regarding aesthetics and code. By now you should have started with your first code sketches. 

At the beginning of this last session, you will have some time to clarify any final questions you may have. In the second half of the session, students will present their outcomes. 

Idea

Sketches on paper

Sketches on paper

Sketches in Code

Sketches in Code Moving Visuals

Final Code 

Deliverables

What

How

When

Deliver

Session

At this point, you should have developed a set of code sketches that you can share with your instructors and work on in class. Sketch and write down on the paper what help, if any, you would need and what improvements you have come up with and would like to discuss.

2021

B-DC 121

Computation in Design 1

Wrapping up Week 11

Work on your Exercise 3 project, follow the schedule

Update your Digital Portfolio

Homework

Week 11

Week 12

Continue practicing your p5js skills with the Getting Started with p5js slides and videos linked from there

 

Week 12

2021

B-DC 121

Computation in Design 1

Coding Images 3

Exercise 3 continues. Work on project continues.

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Schedule

Schedule

Briefing, idea development starts

Idea confirmation, sketching on paper and in code continues

Development of code sketches, problem solving

Mini-showcase and feedback 

1

2

3

4

Week 10

by Week 11

by Week 12

by Week 13

Based on the brief, develop your initial idea for this exercise. Use pen and paper to sketch out your ideas, more is better than less. Get inspiration from the references provided or go back to previous code activities and start your idea from there. Identify at least 1 visual reference (from the list under references) for your project.

At this point, you should be confident in your idea. During this week, you can discuss your idea with your instructor(s) regarding aesthetics and code. By now you should have started with your first code sketches. 

At the beginning of this last session, you will have some time to clarify any final questions you may have. In the second half of the session, students will present their outcomes. 

Idea

Sketches on paper

Sketches on paper

Sketches in Code

Sketches in Code Moving Visuals

Final Code 

Deliverables

What

How

When

Deliver

Session

At this point, you should have developed a set of code sketches that you can share with your instructors and work on in class. Sketch and write down on the paper what help, if any, you would need and what improvements you have come up with and would like to discuss.

2021

B-DC 121

Computation in Design 1

Wrapping up Week 12

Continue working on your Exercise 3 project, we will look at the outcomes in week 13.

Update your Digital Portfolio

Homework

Week 12

Week 13

Continue practicing your p5js skills with the Getting Started with p5js slides and videos linked from there

 

Week 13

2021

B-DC 121

Computation in Design 1

Coding Images 4

Concluding exercise 3 and submission briefing.

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Schedule

Schedule

Briefing, idea development starts

Idea confirmation, sketching on paper and in code continues

Development of code sketches, problem solving

Mini-showcase and feedback 

1

2

3

4

Week 10

by Week 11

by Week 12

by Week 13

Based on the brief, develop your initial idea for this exercise. Use pen and paper to sketch out your ideas, more is better than less. Get inspiration from the references provided or go back to previous code activities and start your idea from there. Identify at least 1 visual reference (from the list under references) for your project.

At this point, you should be confident in your idea. During this week, you can discuss your idea with your instructor(s) regarding aesthetics and code. By now you should have started with your first code sketches. 

At the beginning of this last session, you will have some time to clarify any final questions you may have. In the second half of the session, students will present their outcomes. 

Idea

Sketches on paper

Sketches on paper

Sketches in Code

Sketches in Code Moving Visuals

Final Code 

Deliverables

What

How

When

Deliver

Session

At this point, you should have developed a set of code sketches that you can share with your instructors and work on in class. Sketch and write down on the paper what help, if any, you would need and what improvements you have come up with and would like to discuss.

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Concluding

Concluding Exercise 3

Open feedback session starts at 11:45am, all works to be ready and running.

Submission briefing

2

3

Complete and finish Exercise 3 so that your final sketch runs in full-screen mode on your laptop.

Week 13

9:30 – 11:10

11:20 – 11:50

11:50 – 12:30

Schedule

Todos

Complete and finish Exercise 3 so that your final sketch runs in full-screen mode on your laptop.

Take a series of photos of your final setup with your sketch running in full-screen mode on your laptop.

Take another photo of of the same setup now with one of your classmates looking at the screen.

Add photos to your Digital Portfolio 

exercise-3 → images → exercise-3-setup-1.jpg

exercise-3 → images → exercise-3-setup-2.jpg

etc.

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Submission

Submission

Add your digital CPJ to the cpj folder, document to be in .docx format or .pdf (try to keep the total file size below 80MB)

Review your Digital Portfolio as well as the activity and exercise briefings that can be found in previous slides for proper folder structure handling and labelling.

2

3

Add Activity 3 and 4 as well as Exercise 3 to your Digital Portfolio's archive.

Week 13

Digital Portfolio Preparation  for Submission

Create a summary of outcomes for all activities and exercises following an InDesign template, more details in the following slide

4

1 / 4

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Submission

Submission

Summary Template. Use the provided InDesign template for the summary. Paste your details on the first page and add an image to each grey box. Use the headlines and captions to identify which image is required for each grey box. Finally export the document as .pdf

Week 13

Digital Portfolio Preparation  for Submission

2 / 4

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Submission

Submission

The summary contains a pdf document based on an InDesign template which presents a selection of outcomes you have created this semester.

The cpj folder contains your CPJ document that you have worked on this semester for Computation in Design.

2

3

The archive folder contains files you have created for all activities and exercises this semester.

Week 13

Digital Portfolio Preparation  for Submission

3 / 4

2021

B-DC 121

Computation in Design 1

Exercise 3 | Coding Images | Submission

Submission

Week 13

4 / 4

Submission deadline is 

2:30pm Monday 22 November 2021

After you have completed your Digital Portfolio and zipped it, upload it to your submission folder.

Computation in Design 1

By Andreas Schlegel

Computation in Design 1

  • 2,520