Creative Coding/Trajectory: Difference between revisions
From I/M/D Wiki
More actions
No edit summary |
No edit summary |
||
| 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. | |||
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()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 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
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
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()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
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.