Creative Coding with P5.js


Lesson 1

  • Creative Coding introduction
  • Course outline
  • Inspirational projects
  • Conditional Design activity
  • Editor introduction ( and account setup
  • Homework: Pick up a creative coding project you like the most

Lesson 2

  • 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

Lesson 3

  • 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

Lesson 4

  • 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

Lesson 5

  • 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

Lesson 6/10

  • Introduction to the for-loop principle
  • Exercise: create a list of object
  • Understanding sin and cos and how to use them
  • Noise
  • FFT
  • 3D
  • Sound
  • Scene structure