Creative Coding For Beginners

Prof. Dr. Lena Gieseke | l.gieseke@filmuniversitaet.de

Script 01 - Introduction

This Course

You might think that for doing cool, e.g. visual stuff with coding you need mountains of coding knowledge. That is not true. Even a with a beginners skill level you can do nice things.

Look for example at these different possibilities to do visual designs and even art with just an arrangement of circles!

ch01_01
[Circle Packing, Miu Ling Lam, 2010.]

ch01_02
[Circle Packing, Miu Ling Lam, 2010.]

ch01_03
[Verschiedene Kreise (1926), Wassily Kandinsky.]

ch01_04
[Komposition mit Kreisen und Linien (1926), Wassily Kandinsky.]

Do you like the above examples and if so, why?

Learning Objectives

With this course, you will gain

  • an understanding of programming,
  • skills to develop simple programs from scratch,
    • Knowledge about resources
    • Guidance towards and learning through self-studies,
  • skills to apply programming as (an expressive) tool.

Topics

Class topics can be divided into what you learn about programming itself and its syntax and what you do with your newly developed programming skill, meaning its application.

In regard to programming itself, we will cover:

  • Commands, variables
  • Events
  • Conditions
  • Loops
  • Arrays
  • Functions

We apply these programming skills to implement:

  • Drawing, colors
  • Interaction
  • Movement / Animation
  • Text and Typography
  • Image, video
  • Sound

Why Programming?

What is programming or software actually useful for? Why didnā€™t we stick with an abacus and writing everything by hand?

Well, the answer is quite simple: there are countless tasks that computers can do better than humans. On the one hand computer solve problems and automatize tasks that have always been around such as knowing how to get from A to B and navigation. On the other hand with increased computational capabilities and the digitalization of or world, new tasks arise that didnā€™t exist before, such as the internet.

A Creative Process

How would you define creativity?

What does creativity mean to you?

Often times creative tasks are considered to be the ones that have a visual or auditive output, such as painting or playing an instrument. However that is not necessarily true. Rather creativity describes tasks where:

  • You can create anything out of nothing
    • E.g. you start with an blank canvas
  • Freedom of choice for a solution, many options
    • There is not one standrad solution

Hence even though tasks such as painting often enough are truly creative when it is for example in an artistic context. But types of activity do not stand for automatically for creativity.

With such an understanding of creativity, programming can actually considered a highly creative process!

What makes programming a creative task?

Creative Coding

  • Producing something expressive rather than with practical use

  • Software beyond its standard usage scenarios

  • Aesthetics, insight, joy, communication, politics, augmentation, emotion, perspectives, friendship,ā€¦

Meaning Whatā€¦?

  • Algorithms and generative systems to create graphics and sounds
    • E.g. Procedural Generation and Simulation
  • Smart data sources
    • Images, video, sound
    • Camera and microphone
    • Online resources such as Twitter and Instagram
    • Mobile devices as sensors
    • ā€¦
  • Interesting output formats
    • Web
    • From large-scale such as buildings to small-scale such as smart watches
    • Multi-screen setups for example with mobile devices
    • ā€¦
  • What do we have available and what can we do with it beyond the obvious?

Become a Better You šŸ˜€

  • Practice a systematic approach to problem solving
    • ā€¦reflect and come up with a plan
    • ā€¦divide and reduce
    • ā€¦reformulate
    • ā€¦start with what you know
    • ā€¦experiment
    • ā€¦working with the unknown
    • ā€¦ build a healthy frustration tolerance and trust the process
  • Please be gentle with yourself!
  • You are learning a completely new skill
  • You donā€™t know your approach yet

ch01_06
[tattly]

But I Hate Mathsā€¦ šŸ˜³

  • Programming in itself has nothing to do with maths
    • Many programmers never use any maths at all
    • Certain applications might need maths, such as graphics and sound
  • Programming is more like Sudoku
    • Solving one step at a time
    • Each step give hints for the next one
  • Divide a problem into manageable sub-steps
  • A bit like legoā€¦

ch01_05

What is Programming?

To Command!

  • Give commands to the computer
    • Do this, then do thatā€¦
    • If this is true, do this; otherwise do thatā€¦
    • Do this 10 timesā€¦
    • Do this as long asā€¦

Like Writing a Recipe

ch01_07

  • Write a recipe from scratch
  • Start with another recipe as basis
  • Use a can

You Can Not Assume Anythingā€¦

  • You deal with an apprentice with zero experience
    • You: Add a packet of butter.
    • Apprentice: I donā€™t know what butter is.
    • You: Butter is an ingredient and is in the fridge. The fridge is in front of you. Butter is the packet on which there is written ā€œbutterā€.
    • Apprentice: And now what?
    • You: Add the butter into the bowl.
    • You: Remove the packaging first!

It Is Not as Cryptic as You Might Think 

let points = 75;

if (points >= 50) {
    print("you won");
}
else {
    print("you lose");
}

print("done");

What Are Programming Languages?

Wikipedia saysā€¦

AĀ programming languageĀ is aĀ formal language, which comprises aĀ set of instructionsĀ that produce various kinds ofĀ output.

Programming languages are used inĀ computer programmingĀ to implementĀ algorithms.

A programming languageā€™s surface form is known as itsĀ syntax.

[ā€¦] anĀ algorithmĀ is a set of instructions, typically to solve a class of problems or perform a computation.

Algorithms areĀ unambiguous specifications for performingĀ calculation,Ā data processing, automated reasoning, and other tasks.

[ā€¦] theĀ syntaxĀ of aĀ computer languageĀ is the set of rules that defines the combinations of symbols that are considered to be a correctly structured document or fragment in that language.

Algorithms

Give instructions for cleaning the dishes.

dishes [source]

  • Why inputs and data do we have?
  • Why processes do we have?

Reflect on

  • Do you do different things based on conditions?
  • How do you use the words if or otherwise in your instructions?
  • Do you use the word repeat in your instructions?

Hello World šŸ‘‹šŸ»

  • Established as first ā€œsanity checkā€ for a programming language
  • Text Input
    • Program Code
  • Text Output
    • ā€œHello Worldā€

C++ 

#include <iostream>

int main()
{
    std::cout << "Hello World!" << std::endl;
}

C# 

class MainClass
{
    public static void Main()
    {
    System.Console.WriteLine("Hello World!");
    }
}

Php 

<?php
    print "Hello World!";
?>

Java 

class Hallo {
    public static void main( String[] args ) {
    System.out.print("Hello World!");
    }
}

JavaScript 

document.write("Hello World!");

Python 

print 'Hello World!'

But Why?

  • Tradition
  • First used by Brian Kernighan, 1974 in the Bell Laboratories
  • http://helloworldcollection.de
    • 567 Hello World programs

Hello World in p5.js?

  • p5.js is optimized for designer and artists to develop graphics, sound and interaction
  • Text Input
    • Program Code
  • Graphics Output
    • Show somethingā€¦
//helloworld.js

function setup() {
    createCanvas(100, 100);
    background(255);
}

function draw() {
    point(50, 50);
}

[1]

Shouldnā€™t We Rather Learn ā€¦?

  • The friend of my friend of my friend saysā€¦
  • Which programming language someone prefers is somewhat of a religion and also depends on what you are used to.
  • There is always the next ā€œhot topicsā€.
  • The one programming language to learn doesnā€™t exists.
    • They all have advantages and disadvantages.
    • It depends on specific application scenarios.
  • p5.js is a good introduction
    • Especially for designer, artists, etc.
    • Everything you learn with p5.js, you can transfer to another programming language

References

[1] Wikipedia - Liste von Hallo-Welt-Programmen/Hƶhere Programmiersprachen

References

[1] Wikipedia - Liste von Hallo-Welt-Programmen/Hƶhere Programmiersprachen

The End

šŸ’ŖšŸ¾ šŸ’ŖšŸ» šŸ’Ŗ