Creative Coding/Trajectory

✨🌈 do you know... 🌈✨

Class #01

Interface

• how to open P5
• how to save and share a P5 sketch
• how to upload it in Excalidraw

Functions (beginner)

• the difference between setup() and draw() 👉 [example]
• how to use shape functions 👉 [example]
• how to use color functions 👉 [example]
• how to use map() and sin() 👉 [example]

Variables (beginner)

• how to use an environment variable (e.g. width, height, mouseX, mouseY, frameCount, etc) 👉 [example]
• how to declare a variable (e.g. let x = 0)
• how to update a variable (e.g. x++, x = x - 2, x = mouseX, etc) 👉 [example]
• how to use variables as arguments of a function (e.g. circle(mouseX, mouseY, s) )

Dynamic Portrait

• how to use the previous concepts to make a dynamic portrait 👉 [example by Noor, example by Alex, example by Patricia]

Class #02

Functions (medium)

• how to use text functions 👉 [example]
• how to load and display images 👉 [example]
• how to load and display fonts 👉 [example]
• how to use random() 👉 [example]

Variables (medium)

• how to run a modulo cycle (e.g. x = (x + 1) % 400) 👉 [example]

Conditions

• how to write an if statement 👉 [example]
• how to write an if-else statement 👉 [example]
• how to use booleans (mouseIsPressed)
• how to create booleans (e.g. let state = false) 👉 [example]
• how to use mouse coordinates as a condition (e.g. if(mouseX > width/2){...}) 👉 [example]

Interactive poem

• how to combine conditions and text functions to create an interactive poem 👉 [example by Inho, example by Hasse, example by Floris, examples by Leo]

Class #03

Variables (Advanced)

• how to create lists (e.g. let list = ["cat", "dog", "potato"])
• how to use a variable from a list (e.g. text(list[0], width/2, height/2)) 👉 [example]
• how to use an index variable (e.g. list[i])
• how to load json datasets👉 [example]
• how to create your own json dataset👉 [example]

Functions (Advanced)

• how to use mouseClicked(), keyPressed() and keyReleased() 👉 [example]
• how to declare a new function (e.g. function myFunction() {...}) 👉 [example]
• how to use createButton() and button.mousePressed(callback) 👉 [example]

Loops

• how to make a for loop (e.g. for (x = 0; x < width; x+= 50) {...}) 👉 [example]
• how to use a for loop with a list (e.g. for (element of list) {...}) 👉 [example]

One-button Game

• how to combine these to create a digital experience constrained to one button only 👉 [example by Leo, example by Vanessa, Minjae, Anabel]

Class #04

Buttons (P5)

• how to create a button and make it clickable in P5 👉 [example
• how to make a counter from the button 👉 [example]
• how to make conditional statements with the counter 👉 [example]
• how to use the counter for size values 👉 [example]
• how to map the counter to other ranges of values 👉 [example]
• how to style a button 👉 [example]

Text Inputs (P5)

• how to create a text input and retrieve its value [example]
• how to create an HTML element from a text input [example]

Chatbot

• how this sketch works 👉 [chatdog (bare)]
• ... with some CSS knowledge, you also understand how this one works too 👉 [chatdog (with css)]

Class #05

HTML

• how HTML works [Website House]
• how to create a simple HTML document [example]
• how to use media elements in HTML [example]

Coding environment

• how to code in the P5 editor
• how to code in a local code editor (VS Code, VS Codium, Pulsar, Brackets, Sublime, etc)
• how to code in the code.kabkimd.nl editor