Creative Coding with P5.js

Materials

Play with the console with print() command understanding math and string concatenation
How to comment code.
Exercise: get used with the syntax creating sentences about activity you performed with text and calculated numbers such as print("I've bought" + (100/20+2) + "orange")
Coordinate system: understanding how it works and learn about setup and draw functions as well as the createCanvas and its parameters.
Exercise: create 4 rectangles in a grid layout
Basic shapes: after the rect command, let's explore circle, line, triangle, arc, etc.
Understand the stack execution order and the specificity of the parameters
Exercise: Create a simple face with the primitive shapes
Let's color them: understand fill, stroke, noFill, noStroke and how to encode color parameters
Exercise: Give some color to the face
Homework: Create a dream house with the drawing commands

Check exercises together
Functions: what is a function, custom functions vs builtin functions to reuse or execute complex commands on demand
Demonstration of the verbose problem making the same symbol multiple times
Understand the translate command
Exercise: create 8 symbols, 2 rows using the translate compensation
Demonstrate the rowFunction to make rows
--- break ---
Variables: introduction to the concept, builtin variables (width, height, frameCount, mouseX, mouseY)
Show values with print, text, shapes prop, color
Exercise: 2 circles, radius with mouseX/Y
Exercise: 2 rect left/right with mouse in the middle
Exercise: 4 rects top/bottom/left/right with mouse in the middle
Homework: make an alien with multiple eyes (using function and translate), body and eyes color change with mouse position
Custom variables: store and reuse of custom values, modify the value at run-time.
Introduction of the mousePressed function to increment a variable
Exercise: make a circle growing and following the mouse
Exercise: make a color changer
Include an image
Homework: An alien using functions for multiple eyes, translate for position, mouseX to change body color

Check Homework
Reharshal Function, translate
How to sandbox transformations? Introducing push/pop (example function with mouse translate and foreground static)
Reharshal Variables built-in
Example about using them
Introduction Functions with parameters (user defined variables) with example
Introducing custom Variables
Introducing Random
Introduction of the keyPressed function to move an object
Exercise: create an object that moves in the four directions with the keyboard arrow
Introduction to the condition principle
Es: change color with mouseX position, num click to show more objects
Homework: Character configurator using random, keypressed, variables

Check Homework
Reharshal Functions, Variables, Random, Condition.
Conditions more examples: boolean result + comparison operators:
- condition with background col static val, variable, mouseX, dyn var
- using with keyPressed
Introduction to the time functions with print, text and circle using map
Intermediate Project Brief, the time as values: The interactive watch