Creative Coding/Trajectory: Difference between revisions

VisualWikitext

Latest revision as of 08:10, 22 October 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]

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]
how to use the <a> tag [example]

CSS

how CSS works [Website House]
how to apply CSS in <head><style> [example]
how to apply CSS in style.css [example]
how selectors work [CSS selectors]
how margins and paddings work [box model]
how the display property works [CSS Display]
how the position property works [CSS Position]

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

Hypertext Narrative

how to combine all the knowledge from the previous classes into the design and development of a "hyper-narrative". That is a narrative piece told through hyper-text, or the use of multiple HTML pages interconnected through <a> tags.

@@ Line 1: / Line 1: @@
-Do you know...
+<span style="font-family: Georgia; color: magenta; font-size: 24pt;">✨🌈 <i>do you know...</i> 🌈✨</span>
 == Class #01 ==
@@ Line 11: / Line 11: @@
 === Functions (beginner) ===
-* the difference between <code>setup()</code> and <code>draw()</code>
+* the difference between <code>setup()</code> and <code>draw()</code> 👉 [[https://editor.p5js.org/leoscarin/sketches/5bCtRn_it example]]
-* how to use [https://p5js.org/reference/#Shape shape functions]
+* how to use [https://p5js.org/reference/#Shape shape functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/q1cTX8MPZ example]]
-* how to use [https://p5js.org/reference/#Setting color functions]
+* how to use [https://p5js.org/reference/#Setting color functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/Foyl8ROcp example]]
+* how to use <code>[https://p5js.org/reference/p5/map/ map()]</code> and <code>[https://p5js.org/reference/p5/sin/ sin()]</code> 👉 [[https://editor.p5js.org/leoscarin/sketches/nAeX9poBL example]]
 === Variables (beginner) ===
-* how to use an ''environment variable'' (e.g. <code>width</code>, <code>height</code>, <code>mouseX</code>, <code>mouseY</code>, <code>frameCount</code>, etc)
+* how to use an ''environment variable'' (e.g. <code>width</code>, <code>height</code>, <code>mouseX</code>, <code>mouseY</code>, <code>frameCount</code>, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/matnmaFaD example]]
 * how to declare a variable (e.g. <code>let x = 0</code>)
-* how to change a variable using an operator (e.g. <code>x++</code>, <code>x = x - 2</code>, <code>x = mouseX</code>, etc)
+* how to update a variable (e.g. <code>x++</code>, <code>x = x - 2</code>, <code>x = mouseX</code>, etc) 👉 [[https://editor.p5js.org/leoscarin/sketches/GzxZsviBH example]]
 * how to use variables as ''arguments'' of a function (e.g. <code>circle(mouseX, mouseY, s)</code> )
 === Dynamic Portrait ===
-* how to use the previous concepts to make a ''dynamic portrait''
+* 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 ==
@@ Line 30: / Line 31: @@
 === Functions (medium) ===
-* how to use [https://p5js.org/reference/#Typography text functions]
+* how to use [https://p5js.org/reference/#Typography text functions] 👉 [[https://editor.p5js.org/leoscarin/sketches/ZujpbMIHX example]]
-* how to [https://p5js.org/reference/p5/loadImage/ load] and [https://p5js.org/reference/p5/image/ display] images
+* how to [https://p5js.org/reference/p5/loadImage/ load] and [https://p5js.org/reference/p5/image/ display] images 👉 [[https://editor.p5js.org/leoscarin/sketches/ydcQKi2Fo example]]
-* how to [https://p5js.org/reference/p5/loadFont/ load] and [https://p5js.org/reference/p5/textFont/ display] fonts
+* how to [https://p5js.org/reference/p5/loadFont/ load] and [https://p5js.org/reference/p5/textFont/ display] fonts 👉 [[https://editor.p5js.org/leoscarin/sketches/cQhOMqzqt example]]
+* how to use <code>[https://p5js.org/reference/p5/random/ random()]</code> 👉 [[https://editor.p5js.org/leoscarin/sketches/OmpPOf5WR example]]
 === Variables (medium) ===
+* how to run a ''modulo'' cycle (e.g. <code>x = (x + 1) % 400</code>) 👉 [[https://editor.p5js.org/leoscarin/sketches/L8lmpZ3Qz example]]
 === Conditions ===
-* how to write an ''if statement''<syntaxhighlight lang="javascript">
+* how to write an ''if statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/HdyahrbaG example]]
-if(mouseIsPressed == true){
+* how to write an ''if-else statement''  👉 [[https://editor.p5js.org/leoscarin/sketches/u7IeNxlTE example]]
-    background('red');
+* how to use ''booleans'' (<code>mouseIsPressed</code>)
-}
+* how to create booleans (e.g. <code>let state = false</code>) 👉 [[https://editor.p5js.org/leoscarin/sketches/EPsOQ5hwn example]]
-</syntaxhighlight>
+* how to use mouse coordinates as a condition (e.g. <code>if(mouseX > width/2){...}</code>) 👉 [[https://editor.p5js.org/leoscarin/sketches/o7aJnB0Pf example]]
-* how to write an ''if-else statement''<syntaxhighlight lang="javascript">
-if(mouseIsPressed == true){
+=== Interactive poem ===
-    background('red');
-} else {
+* 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]
-    background('blue');
-}
+== Class #03 ==
-</syntaxhighlight>
-* how to use ''booleans'' (<code>mouseIsPressed</code>, <code>mouseIsClicked</code>, anything that returns <code>true</code>/<code>false</code>)
+=== Variables (Advanced) ===
-* how to
+* 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>) 👉 [[https://editor.p5js.org/leoscarin/sketches/sHFPkLjKg example]]
+* how to use an index variable (e.g. <code>list[i]</code>)
+* how to load ''json'' datasets👉 [[https://editor.p5js.org/scarscarin/sketches/e5Wf3Kn_W 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> 👉 [[https://editor.p5js.org/leoscarin/sketches/r1gEJ3BGp 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> 👉 [[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>) 👉 [[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>) 👉 [[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 👉 [[https://editor.p5js.org/leoscarin/sketches/NyF6DESHc example] by Leo, [https://editor.p5js.org/vvvvvvv.q/sketches/mAG2D-wAi example] by Vanessa, Minjae, Anabel]
+== Class #04 ==
+=== Buttons (P5) ===
+* how to create a button and make it clickable in P5 👉 [[https://editor.p5js.org/scarscarin/sketches/wRwjjqdGx example]
+* how to make a counter from the button 👉 [[https://editor.p5js.org/scarscarin/sketches/SnwSWylYj example]]
+* how to make conditional statements with the counter 👉 [[https://editor.p5js.org/scarscarin/sketches/MpEMwpxE5 example]]
+* how to use the counter for size values 👉 [[https://editor.p5js.org/scarscarin/sketches/BYIv100ZR example]]
+* how to map the counter to other ranges of values 👉 [[https://editor.p5js.org/scarscarin/sketches/H3cck39VP example]]
+* how to style a button 👉 [[https://editor.p5js.org/scarscarin/sketches/JraN0Ilj5 example]]
+=== Text Inputs (P5) ===
+* how to create a text input and retrieve its value [[https://editor.p5js.org/scarscarin/sketches/MmDKL5DlX example]]
+* how to create an HTML element from a text input [[https://editor.p5js.org/scarscarin/sketches/fqBtc9Vg0 example]]
+=== Chatbot ===
+* how this sketch works 👉 [[https://editor.p5js.org/scarscarin/sketches/w7vOMLsj1 chatdog (bare)]]
+* ... with some CSS knowledge, you also understand how this one works too 👉 [[https://editor.p5js.org/scarscarin/sketches/doJuXup6M chatdog (with css)]]
+== Class #05 ==
+=== HTML ===
+* how HTML works [[https://website-house.netlify.app/ Website House]]
+* how to create a simple HTML document [[https://editor.p5js.org/scarscarin/sketches/VXE0gd7uD example]]
+* how to use media elements in HTML [[https://editor.p5js.org/scarscarin/sketches/BlXlracuC example]]
+* how to use the <a> tag [[https://editor.p5js.org/scarscarin/sketches/5D-D7-NKn example]]
+=== CSS ===
+* how CSS works [[https://website-house.netlify.app/ Website House]]
+* how to apply CSS in <head><style> [[https://editor.p5js.org/scarscarin/sketches/g0QBbWWxc example]]
+* how to apply CSS in style.css [[https://editor.p5js.org/scarscarin/sketches/yGzvLmVXp example]]
+* how selectors work [[https://www.w3schools.com/css/css_selectors.asp CSS selectors]]
+* how [https://www.w3schools.com/css/css_margin.asp margins] and [https://www.w3schools.com/css/css_padding.asp paddings] work [[https://www.w3schools.com/css/css_boxmodel.asp box model]]
+* how the display property works [[https://www.w3schools.com/css/css_display_visibility.asp CSS Display]]
+* how the position property works [[https://www.w3schools.com/css/css_positioning.asp CSS Position]]
+=== 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 [https://code.kabkimd.nl code.kabkimd.nl] editor
+=== Hypertext Narrative ===
+* how to combine all the knowledge from the previous classes into the design and development of a "hyper-narrative". That is a narrative piece told through hyper-text, or the use of multiple HTML pages interconnected through <code><a></code> tags.