Creative Coding/Trajectory: Difference between revisions

← Older edit Newer edit →

VisualWikitext

Revision as of 19:00, 22 September 2025

✨🌈 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]

@@ Line 57: / Line 57: @@
 * how to create lists (e.g. <code>let list = ["cat", "dog", "potato"]</code>)
-* how to use a variable from a list (e.g. <code>text(list[0], width/2, height/2)</code>) 👉 [example]
+* how to use a variable from a list (e.g. <code>text(list[0], width/2, height/2)</code>) 👉 [[https://editor.p5js.org/leoscarin/sketches/sHFPkLjKg example]]
-* how to load ''json'' dictionaries 👉 [example]
+* how to use an index variable (e.g. <code>list[i]</code>)
-* how to create your own ''json'' dictionary 👉 [example]
+* how to load ''json'' datasets👉 [[https://editor.p5js.org/scarscarin/sketches/e5Wf3Kn_W example]]
-* how to use an index variable (e.g. <code>list[i]</code>) 👉 [example]
+* how to create your own ''json'' dataset👉 [[https://editor.p5js.org/leoscarin/sketches/QiMkO0fn4 example]]
 === Functions (Advanced) ===
-* how to use <code>mouseClicked()</code>, <code>keyPressed()</code> and <code>keyReleased()</code> 👉 [example]
+* how to use <code>mouseClicked()</code>, <code>keyPressed()</code> and <code>keyReleased()</code> 👉 [[https://editor.p5js.org/leoscarin/sketches/r1gEJ3BGp example]]
-* how to declare a new function (e.g. <code>function myFunction() {...}</code>) 👉 [example]
+* how to declare a new function (e.g. <code>function myFunction() {...}</code>) 👉 [[https://editor.p5js.org/leoscarin/sketches/nIY213a-Z example]]
-* how to use <code>createButton()</code> and <code>''button''.'''mousePressed'''(''callback'')</code> 👉 [example]
+* how to use <code>createButton()</code> and <code>''button''.'''mousePressed'''(''callback'')</code> 👉 [[https://editor.p5js.org/leoscarin/sketches/5L4GLk0uT example]]
 === Loops ===
-* how to make a ''for loop'' (e.g. <code>for (x = 0; x < width; x+= 50) {...}</code>) 👉 [example]
+* how to make a ''for loop'' (e.g. <code>for (x = 0; x < width; x+= 50) {...}</code>) 👉 [[https://editor.p5js.org/leoscarin/sketches/covbcckcT example]]
-* how to use a ''for loop'' with a list (e.g. <code>for (''element'' of ''list'') {...}</code>) 👉 [example]
+* how to use a ''for loop'' with a list (e.g. <code>for (''element'' of ''list'') {...}</code>) 👉 [[https://editor.p5js.org/leoscarin/sketches/_i41t7nza example]]
 === One-button Game ===
-* how to combine these to create a digital experience constrained to one button only 👉 [example]
+* how to combine these to create a digital experience constrained to one button only 👉 [[https://editor.p5js.org/leoscarin/sketches/NyF6DESHc example] by Leo, [https://editor.p5js.org/vvvvvvv.q/sketches/mAG2D-wAi example] by Vanessa, Minjae, Anabel]