Creative Coding For Beginners
Prof. Dr. Lena Gieseke | l.gieseke@filmuniversitaet.de
Script 01 - Introduction
- Creative Coding For Beginners
- 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!
[Circle Packing, Miu Ling Lam, 2010.]
[Circle Packing, Miu Ling Lam, 2010.]
[Verschiedene Kreise (1926), Wassily Kandinsky.]
[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
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ā¦
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
- 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.
- 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);
}
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
šŖš¾ šŖš» šŖ