Creative Coding I: Design & Communication

Prof. Dr. Lena Gieseke | l.gieseke@filmuniversitaet.de | Film University Babelsberg KONRAD WOLF

Script 01: Introduction

Script Update History:

Date Change
01-12-24 Intro

Creative Coding

Think about the following questions for yourself for a moment:

How would you define creativity?

What does it mean to you to be creative?

What do you understand as coding?

There are actually no fixed definitions of what creative coding means. Within CTech we understand creative coding as:

  • producing something expressive rather than focussing on a practical use,
  • developing software beyond its standard usage scenarios, and
  • developing tools that help others to be creative.

The last aspect of developing tools is somewhat detached and not necessarily part of a common understanding of creative coding. However, to us it is an equally important topic. We would like to further integrate tool development into our portfolio with the goal of developing tools beyond the obvious and beyond practicability. When thinking about tool development in the context of web technologies, collaborative work and sharing ideas, content, etc. in the virtual space are exciting directions to go.

Aesthetics, insight, joy, dialog, politics, collaboration, augmentation, emotion, perspectives, friendship,…

How could you focus with a software project on the above mentioned terms, such as friendship?

Well, the above is still pretty vague. What does it mean specifically? The following aspects of content creation, data and media formats describe in more detail what can be considered as creative coding:

  1. Algorithms and generative systems to create graphics and sounds
    → Procedural Generation and Simulation next term

  2. The usage of smart, meaningful or unusual data sources
    • Images, video, sound
    • Camera and microphone
    • Online resources such as Twitter and Instagram
    • Mobile devices as sensors
    • …
  3. The employment of various output formats
    • Web
    • From large-scale such as buildings to small-scale such as smart watches
    • Multi-screen setups for example with mobile devices
    • …

For your creative work, I would like to encourage you to use the following as guidance:

What do we have available and what can we do with it beyond the obvious?

Design and Communication

The main goal of the course Creative Coding I: Design and Communication is for you to explore with text-based programming different forms of designs and communication, be it through visuals, audio, text or data. Applications focus on a creative context investigating aesthetics, human experiences and insight, rather than practicality. At the same time, you will strengthen your skills to solve complex problems in a structured manner and to advance your programming techniques.

As one of our main means of communication is the web, we will focus on web-based programming environments such as p5, three.js and JavaScript in general. This gives us the unique opportunity to share our work easily and potentially with the community of all web users.

Who are all web users?

Examples

The Johnny Cash Project

Cash Project Animation
[Cash Project - Animation]

Cash Project Website
[Cash Project - Website]

Cash Project Comments
[Cash Project - Comments]

Website: The Johnny Cash Project

Paper Planes

paperplanes
[Paper Planes]

Website: Paper Planes

Cinemetrics

cinemetrics
[Cinemetrics by Frederic Brodbeck]

Website: Cinemetrics

Unnumbered Sparks

[Unnumbered Sparks]
Unnumbered Sparks
[Unnumbered Sparks]

Website: Unnumbered Sparks

Miro Boards

On of the most famous examples of an online tool for collaborative work are Miro boards. These are not really creative coding but maybe a good inspiration to start with.

Miro

How to make this system more fun or more interesting? Any ideas?

Cloud-Based Systems

The Evolution of Media Creation - A 10-Year Vision for the Future of Media Production, Post and Creative Technologies:

movielabs_01
movielabs_02

All assets are created or ingested straight into the cloud and do not need to be moved.

Applications com to the data.

Do you know of any creative coding examples? Please share!

Learning Objectives

With this course, you will

  • advance your ability to write code,
  • advance your ability to conceptualize and design,
  • acquire fundamental knowledge of web technologies,
  • use software development in a creative context, and
  • implement specific design goals.

The individual learning objectives highly depend on the skill level you start with. Assignments will be flexible and should be challenging for everybody. Topic-wise, we are also somewhat flexible. If you want to focus more on developing tools, not as a creative but for creatives, let’s get into a conversation and see how to make it work (meaning, come and talk to me!).

Here some impressions of student projects of the previous years:

hw_03_clausen
[by Phil Clausen]
hw_03_stimberg
[by Simon Stimberg]
hw_06_stimberg
[by Simon Stimberg]
hw_07_clausen
[by Phil Clausen]
hw_07_detje_01
[by Simon Detje]
hw_07_detje_02
[by Simon Detje]
hw_07_fontain
[by Mathias Fontain]
hw_07_traber_04
[by Markus Traber]
hw_07_traber_05
[by Markus Traber]
e02_t01_tariq_01
[by Zainab Tariq]
e02_t03_lai_01
[by Jacky Lai]
e02_t01_bischof_01
[by Denise Bischof]
bischof
[by Denise Bischof]
postergenerator
[by Anna Eschenbacher & Zainab Tariq]
postergenerator_02
[by Anna Eschenbacher & Zainab Tariq]

As part of the introduction, I would like to give you an overview of possible languages, tools and environments for creative coding. I classify these aspects into:

Tools and Environments

  1. Programming Languages and Frameworks
  2. Software
  3. Hardware

Programming Languages

  • JavaScript
  • Python
  • C++
  • Java
  • C#
  • Scala
  • Clojure
  • Rust
  • Kotlin

Frameworks

A software framework is a universal, reusable software environment that provides particular functionality as part of a larger software platform to facilitate development of software applications, products and solutions.

  • A special case of software libraries
  • Abstractions of code wrapped in a well-defined Application Programming Interface (API)
  • Contain some key distinguishing features

[Wikipedia: Software Framework]
[Stack Overflow: What is a software framework]

Processing & p5

  • Processing & p5 provide frameworks and IDEs to easily create and work with graphics, sound and interaction.
    • Processing: Java-based and standalone
    • p5: Javascript wrapper for Processing and web-based
  • The holy grail for artists and creative coders.
  • Focus on simplicity for beginners but also suitable for prototyping for experts.

Our mission is to promote software literacy within the visual arts, and visual literacy within technology-related fields — and to make these fields accessible to diverse communities. Our goal is to empower people of all interests and backgrounds to learn how to program and make creative work with code, especially those who might not otherwise have access to these tools and resources.

[The Processing Foundation][Crouch, M. (2019). 6 ways to get into creative coding. Creative Bloq.]

On A Side Note: Processing came first and still a bit better documented but to me it feels like as if the Processing Foundation is moving away from Processing and solely focus on p5 now. In this class we will only work with p5. You should chose between using Processing and p5 depending on the type of project, you are doing.

When is it more suitable to use Processing, when p5?

JavaScript

JavaScript libraries directly relevant in the creative coding context (of course we will need base tools such as node.js as well):

C++

Others

Software

…

Please refer to the learning list about software in the ctech_resources repo (and add to it if you know of something that is not included in the list)!

Hardware

  • Micro controllers
  • Sensors, e.g. depth
  • Projectors
  • VR, AR, MR devices
  • Displays
  • Drone
  • Eye, brain tracker
    → Technology Introductions and Creative Technologies this term

Programming in this Class

The focus of this class is not “learn how to program”, however it is the goal that you all learn how to program with this class 😁. With this I mean that overall we do not cover language specifics in too much detail. Hopefully you build your programming skills through the practical assignments and looking into the details that you need for your assignment individually, making progress on your level.

Summary

As summary to this short introduction to creative coding, I like the following advertisements from Mercedes a lot. To me they represent us - Creative Technologists - very well.

ad_mercedes_2
[I believe in ad]

On A Side Note: Please keep in mind though that the theories of the sides of our brains having the above characteristics are simply wrong. Our brains are much more complex and there is no scientific evidence for tests such as “are you a left or right brain person”?

Next

Next, it is time to look a bit more into our specific coding environment and needed setup.

Resources

[1] Awesome Creative Coding
[2] Research essay: The History of Processing
[3] A History of Creative Coding
[4] Awesome Design

The End
🚀