CClab Example Codes

Example name
Slide location
Link
Use environment variables: width and height.
2.R Interactive Drawing
editor.p5js.org
Align multiple shapes with a variable.
2.R Interactive Drawing
editor.p5js.org
Place two ellipses at the same positions by re-using variables.
2.R Interactive Drawing
editor.p5js.org
Change the background color based on the mouse position.
2.R Interactive Drawing
editor.p5js.org
Use a variable and if-statements to select a shape.
2.R Interactive Drawing
editor.p5js.org
Invert color with a boolean variable and if-statements.
2.R Interactive Drawing
editor.p5js.org
Develop a color palette with variables
2.R Interactive Drawing
editor.p5js.org
Inspiration Step1
3.R Imaginary Creature
editor.p5js.org
Inspiration Step2
3.R Imaginary Creature
editor.p5js.org
Inspiration Step3
3.R Imaginary Creature
editor.p5js.org
Function, return
4.1 FunctionsLoops
editor.p5js.org
checkMouseX
4.1 FunctionsLoops
editor.p5js.org
checkMousePosition
4.1 FunctionsLoops
editor.p5js.org
checkOutofCanvas
4.1 FunctionsLoops
editor.p5js.org
For loop Step1
4.1 FunctionsLoops
editor.p5js.org
For loop Step2
4.1 FunctionsLoops
editor.p5js.org
For loop Step3
4.1 FunctionsLoops
editor.p5js.org
For loop Step4
4.1 FunctionsLoops
editor.p5js.org
For loop grid Step1
4.1 FunctionsLoops
editor.p5js.org
For loop grid Step2
4.1 FunctionsLoops
editor.p5js.org
For loop grid Step3
4.1 FunctionsLoops
editor.p5js.org
For loop grid Step5
4.1 FunctionsLoops
editor.p5js.org
Array1
4.2 Arrays and Text
editor.p5js.org
Array2
4.2 Arrays and Text
editor.p5js.org
Array3
4.2 Arrays and Text
editor.p5js.org
Array4
4.2 Arrays and Text
editor.p5js.org
Array5
4.2 Arrays and Text
editor.p5js.org
Array6
4.2 Arrays and Text
editor.p5js.org
Poem example
4R
editor.p5js.org