Creative Coding/Trajectory: Difference between revisions
From I/M/D Wiki
More actions
No edit summary |
No edit summary |
||
| Line 11: | Line 11: | ||
=== Functions (beginner) === | === 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 <nowiki>[example]</nowiki>] | ||
* 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 <nowiki>[example]</nowiki>] | ||
* how to use [https://p5js.org/reference/#Setting color functions] | * how to use [https://p5js.org/reference/#Setting color functions] 👉 [example] | ||
* how to use <code>[https://p5js.org/reference/p5/map/ map()]</code> and <code>[https://p5js.org/reference/p5/sin/ sin()]</code> | * how to use <code>[https://p5js.org/reference/p5/map/ map()]</code> and <code>[https://p5js.org/reference/p5/sin/ sin()]</code> 👉 [example] | ||
=== Variables (beginner) === | === 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) 👉 [example] | ||
* how to declare a variable (e.g. <code>let x = 0</code>) | * 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 change a variable using an operator (e.g. <code>x++</code>, <code>x = x - 2</code>, <code>x = mouseX</code>, etc) 👉 [example] | ||
* how to use variables as ''arguments'' of a function (e.g. <code>circle(mouseX, mouseY, s)</code> ) | * how to use variables as ''arguments'' of a function (e.g. <code>circle(mouseX, mouseY, s)</code> ) | ||
=== Dynamic Portrait === | === Dynamic Portrait === | ||
* how to use the previous concepts to make a ''dynamic portrait'' | * how to use the previous concepts to make a ''dynamic portrait'' 👉 [example] | ||
== Class #02 == | == Class #02 == | ||
| Line 31: | Line 31: | ||
=== Functions (medium) === | === Functions (medium) === | ||
* how to use [https://p5js.org/reference/#Typography text functions] | * how to use [https://p5js.org/reference/#Typography text functions] 👉 [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 👉 [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 👉 [example] | ||
* how to use <code>[https://p5js.org/reference/p5/random/ random()]</code> | * how to use <code>[https://p5js.org/reference/p5/random/ random()]</code> 👉 [example] | ||
=== Variables (medium) === | === Variables (medium) === | ||
* how to run a ''modulo'' cycle (e.g. <code>x = (x + 1) % 400</code>) | * how to run a ''modulo'' cycle (e.g. <code>x = (x + 1) % 400</code>) 👉 [example] | ||
=== Conditions === | === Conditions === | ||
* how to write an ''if statement'' | * how to write an ''if statement'' 👉 [example] | ||
* how to write an ''if-else statement'' | * how to write an ''if-else statement'' 👉 [example] | ||
* how to use ''booleans'' (<code>mouseIsPressed</code>, <code>mouseIsClicked</code>) | * how to use ''booleans'' (<code>mouseIsPressed</code>, <code>mouseIsClicked</code>) 👉 [example] | ||
* how to create booleans (e.g. <code>let state = false</code>) | * how to create booleans (e.g. <code>let state = false</code>) 👉 [example] | ||
* how to use mouse coordinates as a condition (e.g. <code>if(mouseX > width/2){...}</code>) | * how to use mouse coordinates as a condition (e.g. <code>if(mouseX > width/2){...}</code>) 👉 [example] | ||
=== Interactive poem === | === Interactive poem === | ||
* how to combine ''conditions'' and ''text functions'' to create an interactive poem | * how to combine ''conditions'' and ''text functions'' to create an interactive poem 👉 [example] | ||
== Class #03 == | == Class #03 == | ||
| Line 57: | Line 57: | ||
* how to create lists (e.g. <code>let list = ["cat", "dog", "potato"]</code>) | * 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 use a variable from a list (e.g. <code>text(list[0], width/2, height/2)</code>) 👉 [example] | ||
* how to load ''json'' dictionaries | * how to load ''json'' dictionaries 👉 [example] | ||
* how to create your own ''json'' dictionary | * how to create your own ''json'' dictionary 👉 [example] | ||
* how to use an index variable (e.g. <code>list[i]</code>) | * how to use an index variable (e.g. <code>list[i]</code>) 👉 [example] | ||
=== Functions (Advanced) === | === Functions (Advanced) === | ||
* how to use <code>mouseClicked()</code>, <code>keyPressed()</code> and <code>keyReleased()</code> | * how to use <code>mouseClicked()</code>, <code>keyPressed()</code> and <code>keyReleased()</code> 👉 [example] | ||
* how to declare a new function (e.g. <code>function myFunction() {...}</code>) | * how to declare a new function (e.g. <code>function myFunction() {...}</code>) 👉 [example] | ||
* how to use <code>createButton()</code> and <code>''button''.'''mousePressed'''(''callback'')</code> | * how to use <code>createButton()</code> and <code>''button''.'''mousePressed'''(''callback'')</code> 👉 [example] | ||
=== Loops === | === Loops === | ||
* how to make a ''for loop'' (e.g. <code>for (x = 0; x < width; x+= 50) {...}</code>) | * how to make a ''for loop'' (e.g. <code>for (x = 0; x < width; x+= 50) {...}</code>) 👉 [example] | ||
* how to use a ''for loop'' with a list (e.g. <code>for (''element'' of ''list'') {...}</code>) | * how to use a ''for loop'' with a list (e.g. <code>for (''element'' of ''list'') {...}</code>) 👉 [example] | ||
=== One-button Game === | === One-button Game === | ||
* how to combine these to create a digital experience constrained to one button only | * how to combine these to create a digital experience constrained to one button only 👉 [example] | ||
Revision as of 16:56, 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 change a variable using an operator (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]
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,mouseIsClicked) 👉 [example] - 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]
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 load json dictionaries 👉 [example]
- how to create your own json dictionary 👉 [example]
- how to use an index variable (e.g.
list[i]) 👉 [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]
One-button Game
- how to combine these to create a digital experience constrained to one button only 👉 [example]