View source for Creative Coding/Trajectory

<span style="font-family: Georgia; color: magenta; font-size: 24pt;">✨🌈 <i>do you know...</i> 🌈✨</span>

== 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 <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] 👉 [[https://editor.p5js.org/leoscarin/sketches/q1cTX8MPZ example]]
* 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) 👉 [[https://editor.p5js.org/leoscarin/sketches/matnmaFaD example]]
* how to declare a variable (e.g. <code>let x = 0</code>) 
* 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'' 👉 [[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) ===

* 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 👉 [[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 👉 [[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'' 👉 [[https://editor.p5js.org/leoscarin/sketches/HdyahrbaG example]]
* how to write an ''if-else statement''  👉 [[https://editor.p5js.org/leoscarin/sketches/u7IeNxlTE example]]
* 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]]
* how to use mouse coordinates as a condition (e.g. <code>if(mouseX > width/2){...}</code>) 👉 [[https://editor.p5js.org/leoscarin/sketches/o7aJnB0Pf example]]

=== Interactive poem ===

* 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) ===

* 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]]