Creative Coding/Trajectory: Difference between revisions

Newer edit →

VisualWikitext

Revision as of 16:37, 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()
how to use shape functions
how to use color functions
how to use map() and sin()

Variables (beginner)

how to use an environment variable (e.g. width, height, mouseX, mouseY, frameCount, etc)
how to declare a variable (e.g. let x = 0)
how to change a variable using an operator (e.g. x++, x = x - 2, x = mouseX, etc)
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

Class #02

Functions (medium)

how to use text functions
how to load and display images
how to load and display fonts
how to use random()

Variables (medium)

how to run a modulo cycle (e.g. x = (x + 1) % 400)

Conditions

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

Interactive poem

how to combine conditions and text functions to create an 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))
how to load json dictionaries
how to create your own json dictionary
how to use an index variable (e.g. list[i])

Functions (Advanced)

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

@@ Line 14: / Line 14: @@
 * how to use [https://p5js.org/reference/#Shape shape functions]
 * how to use [https://p5js.org/reference/#Setting color functions]
+* how to use <code>[https://p5js.org/reference/p5/map/ map()]</code> and <code>[https://p5js.org/reference/p5/sin/ sin()]</code>
 === Variables (beginner) ===
@@ Line 33: / Line 34: @@
 * 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/loadFont/ load] and [https://p5js.org/reference/p5/textFont/ display] fonts
+* how to use <code>[https://p5js.org/reference/p5/random/ random()]</code>
 === Variables (medium) ===
+* how to run a ''modulo'' cycle (e.g. <code>x = (x + 1) % 400</code>)
 === Conditions ===
-* how to write an ''if statement''<syntaxhighlight lang="javascript">
+* how to write an ''if statement''
-if(mouseIsPressed == true){
+* how to write an ''if-else statement''
-    background('red');
+* how to use ''booleans'' (<code>mouseIsPressed</code>, <code>mouseIsClicked</code>)
-}
+* how to create booleans (e.g. <code>let state = false</code>)
-</syntaxhighlight>
+* how to use mouse coordinates as a condition (e.g. <code>if(mouseX > width/2){...}</code>)
-* 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
-    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>)
+* how to load ''json'' dictionaries
+* how to create your own ''json'' dictionary
+* how to use an index variable (e.g. <code>list[i]</code>)
+=== Functions (Advanced) ===
+* how to use <code>mouseClicked()</code>, <code>keyPressed()</code> and <code>keyReleased()</code>
+* how to declare a new function (e.g. <code>function myFunction() {...}</code>)
+* how to use <code>createButton()</code> and <code>''button''.'''mousePressed'''(''callback'')</code>