Creative Coding/Trajectory: Difference between revisions
From I/M/D Wiki
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<span style="font-family: Georgia; color: magenta; font-size: 24pt;">✨🌈 <i>do you know...</i> 🌈✨</span> | <span style="font-family: Georgia; color: magenta; font-size: 24pt;">✨🌈 <i>do you know...</i> 🌈✨</span> | ||
== Class #01 == | |||
=== Interface === | === Interface === | ||
| Line 27: | Line 27: | ||
* how to use the previous concepts to make a ''dynamic portrait'' 👉 [[https://editor.p5js.org/noortaba/sketches/AlK95q2ak example] by Noor, [https://editor.p5js.org/lexitron/sketches/WUpKlCO12 example] by Alex, [https://editor.p5js.org/patriciasaez/sketches/OXPsvEydD example] by Patricia] | * how to use the previous concepts to make a ''dynamic portrait'' 👉 [[https://editor.p5js.org/noortaba/sketches/AlK95q2ak example] by Noor, [https://editor.p5js.org/lexitron/sketches/WUpKlCO12 example] by Alex, [https://editor.p5js.org/patriciasaez/sketches/OXPsvEydD example] by Patricia] | ||
== Class #02 == | |||
=== Functions (medium) === | === Functions (medium) === | ||
| Line 52: | Line 52: | ||
* how to combine ''conditions'' and ''text functions'' to create an interactive poem 👉 [[https://editor.p5js.org/enojeon2/sketches/YuuZ1BPOS example] by Inho, [https://editor.p5js.org/HasseVisser04/sketches/dS3B4P4eo example] by Hasse, [https://editor.p5js.org/FlorisKabk/sketches/FsiCeAOIQ example] by Floris, [https://wdka.codeberg.page/words-on-a-string/slide_11/ examples] by Leo] | * how to combine ''conditions'' and ''text functions'' to create an interactive poem 👉 [[https://editor.p5js.org/enojeon2/sketches/YuuZ1BPOS example] by Inho, [https://editor.p5js.org/HasseVisser04/sketches/dS3B4P4eo example] by Hasse, [https://editor.p5js.org/FlorisKabk/sketches/FsiCeAOIQ example] by Floris, [https://wdka.codeberg.page/words-on-a-string/slide_11/ examples] by Leo] | ||
== Class #03 == | |||
=== Variables (Advanced) === | === Variables (Advanced) === | ||
Revision as of 19:01, 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()anddraw()👉 [example] - how to use shape functions 👉 [example]
- how to use color functions 👉 [example]
- how to use
map()andsin()👉 [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
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
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()andkeyReleased()👉 [example] - how to declare a new function (e.g.
function myFunction() {...}) 👉 [example] - how to use
createButton()andbutton.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]