Creative Coding/Trajectory - Revision history

Leo at 08:10, 22 October 2025

2025-10-22T08:10:26Z

← Older revision		Revision as of 08:10, 22 October 2025
Line 101:		Line 101:
	* how to create a simple HTML document [[https://editor.p5js.org/scarscarin/sketches/VXE0gd7uD example]]		* 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 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 ===		=== 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 ===		=== Coding environment ===
Line 108:		Line 116:
	* how to code in a local code editor (VS Code, VS Codium, Pulsar, Brackets, Sublime, etc)		* 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		* 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.

Leo at 07:50, 22 October 2025

2025-10-22T07:50:08Z

← Older revision		Revision as of 07:50, 22 October 2025
Line 101:		Line 101:
	* how to create a simple HTML document [[https://editor.p5js.org/scarscarin/sketches/VXE0gd7uD example]]		* 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 media elements in HTML [[https://editor.p5js.org/scarscarin/sketches/BlXlracuC example]]

			=== CSS ===

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

Leo at 07:46, 22 October 2025

2025-10-22T07:46:28Z

← Older revision		Revision as of 07:46, 22 October 2025
Line 98:		Line 98:

	=== HTML ===		=== HTML ===
	* how HTML works [[https://website-house.netlify.app/ Website House]		* 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 create a simple HTML document [[https://editor.p5js.org/scarscarin/sketches/VXE0gd7uD example]]
	* how to use media elements in HTML [[		* how to use media elements in HTML [[https://editor.p5js.org/scarscarin/sketches/BlXlracuC example]]

Leo at 07:31, 22 October 2025

2025-10-22T07:31:51Z

← Older revision		Revision as of 07:31, 22 October 2025
Line 76:		Line 76:

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

Leo at 19:01, 22 September 2025

2025-09-22T19:01:10Z

← Older revision		Revision as of 19:01, 22 September 2025
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>

	~~<h2 style~~=~~"text-align: right">~~ Class #01 ~~</h2>~~		== 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]

	~~<h2 style~~=~~"text-align: right">~~ Class #02 ~~</h2>~~		== 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]

	~~<h2 style~~=~~"text-align: right">~~ Class #03 ~~</h2>~~		== Class #03 ==

	=== Variables (Advanced) ===		=== Variables (Advanced) ===

Leo at 19:00, 22 September 2025

2025-09-22T19:00:22Z

← Older revision		Revision as of 19:00, 22 September 2025
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>) 👉 [example]		* 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 load ''json'' ~~dictionaries 👉~~ [example]		* how to use an index variable (e.g. <code>list[i]</code>)
	* how to create your own ''json'' ~~dictionary 👉~~ [~~example]~~		* how to load ''json'' datasets👉 [[https://editor.p5js.org/scarscarin/sketches/e5Wf3Kn_W example]]
	* how to use an index variable (e.g. ~~<code>list[i]<~~/~~code>) 👉 [~~example]		* how to create your own ''json'' dataset👉 [[https://editor.p5js.org/leoscarin/sketches/QiMkO0fn4 example]]

	=== Functions (Advanced) ===		=== Functions (Advanced) ===

	* how to use <code>mouseClicked()</code>, <code>keyPressed()</code> and <code>keyReleased()</code> 👉 [example]		* 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>) 👉 [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> 👉 [example]		* how to use <code>createButton()</code> and <code>''button''.'''mousePressed'''(''callback'')</code> 👉 [[https://editor.p5js.org/leoscarin/sketches/5L4GLk0uT example]]

	=== Loops ===		=== Loops ===

	* how to make a ''for loop'' (e.g. <code>for (x = 0; x < width; x+= 50) {...}</code>) 👉 [example]		* 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>) 👉 [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 ===		=== One-button Game ===

	* how to combine these to create a digital experience constrained to one button only 👉 [example]		* 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]

Leo at 17:55, 22 September 2025

2025-09-22T17:55:41Z

← Older revision		Revision as of 17:55, 22 September 2025
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 ==		<h2 style="text-align: right"> Class #01 </h2>

	=== 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 ==		<h2 style="text-align: right"> Class #02 </h2>

	=== 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 ==		<h2 style="text-align: right"> Class #03 </h2>

	=== Variables (Advanced) ===		=== Variables (Advanced) ===

Leo at 17:46, 22 September 2025

2025-09-22T17:46:32Z

← Older revision		Revision as of 17:46, 22 September 2025
Line 11:		Line 11:
	=== Functions (beginner) ===		=== Functions (beginner) ===

	* the difference between <code>setup()</code> and <code>draw()</code> 👉 [https://editor.p5js.org/leoscarin/sketches/5bCtRn_it ~~<nowiki>[~~example]~~</nowiki>~~]		* 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 ~~<nowiki>[~~example]~~</nowiki>~~]		* 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] 👉 [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> 👉 [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) ===		=== 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) 👉 [example]		* 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 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) 👉 [example]		* 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> )		* 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'' 👉 [example]		* 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 ==		== Class #02 ==
Line 31:		Line 31:
	=== Functions (medium) ===		=== Functions (medium) ===

	* how to use [https://p5js.org/reference/#Typography text functions] 👉 [example]		* 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 👉 [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 👉 [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> 👉 [example]		* how to use <code>[https://p5js.org/reference/p5/random/ random()]</code> 👉 [[https://editor.p5js.org/leoscarin/sketches/OmpPOf5WR example]]

	=== Variables (medium) ===		=== Variables (medium) ===

	* how to run a ''modulo'' cycle (e.g. <code>x = (x + 1) % 400</code>) 👉 [example]		* how to run a ''modulo'' cycle (e.g. <code>x = (x + 1) % 400</code>) 👉 [[https://editor.p5js.org/leoscarin/sketches/L8lmpZ3Qz example]]

	=== Conditions ===		=== Conditions ===

	* how to write an ''if statement'' 👉 [example]		* how to write an ''if statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/HdyahrbaG example]]
	* how to write an ''if-else statement'' 👉 [example]		* how to write an ''if-else statement'' 👉 [[https://editor.p5js.org/leoscarin/sketches/u7IeNxlTE example]]
	* how to use ''booleans'' (<code>mouseIsPressed~~</code>, <code>mouseIsClicked~~</code>) ~~👉 [example]~~		* how to use ''booleans'' (<code>mouseIsPressed</code>)
	* how to create booleans (e.g. <code>let state = false</code>) 👉 [example]		* 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>) 👉 [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 ===		=== Interactive poem ===

	* how to combine ''conditions'' and ''text functions'' to create an interactive poem 👉 [example]		* 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 ==		== Class #03 ==

Leo at 16:56, 22 September 2025

2025-09-22T16:56:14Z

Leo at 16:40, 22 September 2025

2025-09-22T16:40:10Z

← Older revision		Revision as of 16:40, 22 September 2025
Line 67:		Line 67:
	* how to declare a new function (e.g. <code>function myFunction() {...}</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>		* how to use <code>createButton()</code> and <code>''button''.'''mousePressed'''(''callback'')</code>

			=== Loops ===

			* how to make a ''for loop'' (e.g. <code>for (x = 0; x < width; x+= 50) {...}</code>)
			* how to use a ''for loop'' with a list (e.g. <code>for (''element'' of ''list'') {...}</code>)

			=== One-button Game ===

			* how to combine these to create a digital experience constrained to one button only

← Older revision		Revision as of 16:56, 22 September 2025
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]