Topic outline

  • Course info

    Welcome to Creative Computation for Visual Communication Design!


    On this course we will learn how to use computation as a practical and experimental method for visual communication design. In addition to getting a hands-on introduction to the world of programming, we will also take a more theoretical and critical look at computational practices in design.

    The course is organised with a hybrid model of online and contact teaching. Most of the sessions will be online on Zoom, with the exception of the last 3 sessions (7.-9. December) that are conducted both on campus and online. The sessions consist of short lectures, group discussions, live coding workshops, as well as coding exercises. The independent work consists of weekly coding assignments, assigned reading, and some smaller research and design oriented exercises. The weekly workload is 9h of class time and 18h of independent work. The final course projects will be presented on the last day of the course (9.12.2020), and it will be weighted as 25% of the course grade.

    For programming we will be mainly using p5.js which is a JavaScript library intended for creative coding. You will also need a code editor: I highly recommend Brackets, but you can also use a text editor of your choice or the p5.js web editor.

    Teacher

    Eevi Rutanen
    Primary: eevi.rutanen(a)aalto.fi
    Secondary: eevi(a)eevirutanen.com

    Dates & Times

    2.11.2021—09.12.2021
    Tuesdays, Wednesdays and Thursdays at 9:15-12:00

    Evaluation

    The course will be graded on scale 1-5 as follows:

    • 25% Final course project
    • 65% Weekly exercises (5 x 13%)
    • 10% Attendance and activity

    Requirements

    No previous coding skills are required for this class. All the coding exercises are designed to be creative, approachable and geared to visual designers.

    Before the first session, please follow the instructions in Getting started .


    • forum icon
      Announcements Forum
      Not available unless any of:
      • You are a(n) Student
      • You are a(n) Non-editing teacher
      Follow this forum for announcements and course info!
    • forum icon
      Code Clinic Forum
      Not available unless any of:
      • You are a(n) Student
      • You are a(n) Non-editing teacher

      Use this forum for code-related questions.
      Remember to post screenshots and error messages if applicable.
      The best way to learn is to teach others, so helping out your course mates is highly encouraged!

    • url icon
      Zoom URL
      Not available unless: You are a(n) Student

      Link to recurring zoom meeting for all the sessions.

    • forum icon
      Hall of Fame Forum

      Since we haven't had time to look at your weekly assignments during class, would be nice to share them somewhere! So here you can post your favourite coding creations from the course :)

      You can upload images, videos, gifs or the entire sketch folder. You can also link your sketches from the p5 web editor.

    • assign icon
      Final Project Assignment
      Make a submission

  • Getting started

    Before the first session:

    • Install the Brackets text editor from https://brackets.io/. If you are working on a campus computer or can't install software, you can use p5.js web editor instead.
    • Download the emptyExample folder from below
    • Watch this short video that explains how to get started with Brackets and p5.js

     

     


  • References and Resources

    Not available unless: You are a(n) Student

    A non-conclusive and unorganised list of creative coding resources, references and inspiration.


    Learning Resources

    W3Schools
    Extensive tutorials on all programming languages

    CodeAcademy
    Basic JavaScript tutorials for all skill levels

    Khan Academy: Intro to JS
    Free, entry-level tutorial videos (using ProcessingJS)

    Daniel Shiffman: The Coding Train
    Excellent and fun entry-level videos about p5.js

    Daniel Shiffman: Nature of Code
    Great digital book on generative drawing techniques, focus on simulating natural phenomena (using Processing)

    Comp Form
    A bit more advanced and theoretical methods for creating computational forms. Started as a companion for Justin Bakse's course at Parsons design school.

    Allison Parrish: Creative Coding
    Good step-by-step tutorials on basic and advanced p5.js topics

    Rune Madsen: Programming Design Systems
    Free digital book about creative coding for graphic designers

    Yeohyun Ahn & Viviana Cordova: Type + Code: Processing for Designers
    Online book about experimental typography using Processing. (Can be applied to p5.js quite easily)

    Happy Coding
    Good step-by-step tutorials on basic p5.js topics

    Awesome Creative Coding
    Huge repository for creative coding applications, tools and resources

    Computational Typography Resources
    An impressive collection of resources, examples and reading on computational type

    References & Collections

    DADA
    A database of early computer art

    Black women in computing
    Website and blog supporting and showcasing  black women in computing

    Creative Applications Network
    Platform for computational projects and artists, focus on physical computing 

    Hallointer.net
    A curated collection of cool websites

    Hoverstates
    More cool websites

    Open Processing
    User-submitted Processing sketches (with source code!)

    P5.js showcase 2020

    Experiments with Google
    Experimental browser experiences

    List of Physical Visualizations and Related Artifacts
    Very interesting collection of historical data visualisation projects and techniques.

    Artists

    Allison Parrish
    Computational poetry and other language and text related generative art

     Lauren McCarthy
    Founder of p5.js, computational artworks and installations

    Zach Lieberman
    Founder of OpenFrameworks, generative visuals made in openFrameworks

    Tim Rodenbröker
    Computational graphic design

    Tero Parviainen
    Generative music

    Memo Acten
    AI & Machine Learning

    Saskia Freeke
    Daily Processing and p5.js sketches

    Casey Reas
    Founder of Processing, generative visual works

    John Pound
    Generative comic strips made with code (starting from the 1990’s!)

    Janelle Shane
    Fun and improvised AI and machine learning projects

    Universal Everything
    Design Studio focused on CGI, AR and VR

    Studio Moniker
    Interactive design studio that make fun projects with/about technology

    Nervous System
    A pioneering studio for generative 3D art and design

    John Burgess
    Generative typography and motion graphics

    Projects

    Moniker: Conditional Design Workbook

    Videopainter
    Cool project done in Processing (could be done in p5.js!)

    Algorithmic Colouring Book

    The Useless Web
    Fun random and useless experimental websites

    Dear Data
    Lovely data visualisation project

    Neil.fun
    Fun random minisites

    Automated Type Design
    Generative type project

    Letterspirit
    Early generative typeface project

    Laika font
    Typeface reacting to real-time weather

    Tools & interactive environments

    Twine
    Open-source tool for interactive narratives. Uses HTML, CSS and JS.

    Phase
    Generative type tool by Elias Hanzer

    Beact
    Open source audio-visual instrument, made with JavaScript

    Generative poster tool made with p5.js

    Glyph Drawing Club
    ASCII art editor

    WEBGL particle cloud tool

    Sandspiel
    Draw with sand

    Dinamo face filters

    Typebreak tool

    Space Type Generator

    Joshua Koomen: New Alphabet
    A generative spin on classic modular typeface

    Spark AR
    Face filters (can be scripted with JS)

    FontJoy
    AI-generated font pairings



  • Week 1

    Not available unless any of:
    • You are a(n) Student
    • You are a(n) Non-editing teacher

    interactive face drawing in p5


    Day 1: Tuesday 2.11.2021

    • Introduction to programming
    • What is creative coding?
    • Setting up the environment: Getting started with p5.js and Brackets
    • TO DO:
      • Fill Starting Level Questionnaire
      • Post an inspirational creative coding project to the forum below
        • Write a couple of words why you find the project interesting
        • Comment on someone else's post
      • Make sure you know how to open a project in Brackets
      • Make sure you know how to run a p5.js sketch
      • Get familiar with special characters and learn how to type them on your keyboard

    Day 2: Wednesday 3.11.2021

    • Syntax in JavaScript and p5.js
    • Screen coordinate system
    • Program flow: setup() and draw()
    • Introduction to functions
      • Drawing primitive shapes
    • Introduction to input: mouseX, mouseY
    • How to debug?
    • Borrowing code
    • TO DO:
      • Fill Starting Level Questionnaire (if you haven't yet)
      • Attempt one of the variations of the coding exercises
        • Post your coding creations to Week 1 Showcase!

    Day 3: Thursday 4.11.2021

    • Variables
    • Animating
    • Logic, boolean expressions and conditional statements
    • More input: mouseIsPressed, keyIsPressed

  • Week 2

    Random walk animation


    Day 1: Tuesday 8.11.2020

    • Lecture & Discussion: Generative Art
    • Randomness

    Day 2: Wednesday 9.11.2020

    • Randomness & Probability
    • Transformations

    Day 3: Thursday 10.11.2020

    • Introduction to loops
      • while-loop and for-loop
    • Mapping

    TO DO THIS WEEK:

    • Reading from Week 1: Post your answer to the Week 2 forum (~2-6 sentences is enough). Comment on someone else's post.
    • Attempt one of the variations or do something else creative with this week's coding exercises. Post screenshots and/or video of your creations on the Week 2 Showcase forum.
    • Coding Assignment II


  • Week 3

    Not available unless any of:
    • You are a(n) Non-editing teacher
    • You are a(n) Student



    Day 1: Tuesday 16.11.2020

    • Lecture & Discussion: Design = Program
    • Computation & Typography
    • Introduction to text in p5.js


    Day 2: Wednesday 17.11.2020

    • Text
    • Nested loops


    Day 3    : Thursday 18.11.2020

    • Arrays
    • Defining your own functions


    TO DO THIS WEEK:
    • Attempt one of the variations of the coding exercises or do something else creative with this week's topics! Post your coding creations to Week 3 Showcase.
    • Weekly reading III:  Karl Gerstner (1964) Designing Programmes. Study how Gerstner defines different “programmes”. Come up with another example of “Programme as …”. What do you think counts as a program? Post your example to Week 3 forum.
    • Coding Assignment III



  • Week 4

    Not available unless any of:
    • You are a(n) Student
    • You are a(n) Non-editing teacher



    Day 1: Tuesday 23.11.2020

    • Lecture & Discussion: Data as Material
    • Introduction to working with text files

    Day 2: Wednesday 24.11.2020

    • Working with text files
    • Text to points
    • Custom shapes and curves

    Day 3: Thursday 25.11.2020

    • Trigonometric functions and polar coordinates

    TO DO THIS WEEK:

    • Post screenshots of your coding creations to Week 4 Showcase
    • Weekly Reading IV
    • Coding Assignment IV
    • Watch the video: John Whitney — Experiments in motion graphics

  • Week 5

    Not available unless any of:
    • You are a(n) Student
    • You are a(n) Non-editing teacher



    Day 1 : Tuesday 30.11.2020

    • Lecture & Discussion: Empowerment by Computation
    • Events
    • Introduction to HTML, CSS and the DOM


    Day 2: Wednesday 1.12.2020

    • P5.js and the DOM
    • Interactivity with buttons, sliders and input


    Day 3: Thursday 2.12.2020

    • Exporting from p5 (images, SVGs, PDFs)
    • Hosting your projects online

    TO DO THIS WEEK:
      • Post your coding creations to Week 5 Showcase
      • Weekly Reading V
      • Assignment V: Protesting in Code

  • Week 6

    Not available unless any of:
    • You are a(n) Student
    • You are a(n) Non-editing teacher

    The last week of the course is organised as hybrid teaching: You can participate in person in the VCD Home base, or online on Zoom. Don't come to campus if you are feeling ill!


    Day 1 : Tuesday 7.12.2021

    • Lecture & Discussion: Critical Computing
    • Independent work
    • Individual tutoring
    • Upload a print-ready PDF to this Dropbox folder by 12:00!


    Day 2: Wednesday 8.12.2021

    • Independent work
    • Individual tutoring
    • Pick up your print from print lab and cut it to size.
    • Submit your Final Project on MyCourses by 22:00!


    Day 3: Thursday 9.12.2021

    • Final Project presentations