/p5js-learn

day 1

Introduction

Shapes and drawing

Note:

  • Cartesian coordinate system (the origin (0,0) place at the top left)

  • createCanvas()

  • 2D Primitives

    • rect()
    • line()

  • Attributes

    • rectMode();

Color

Note:

  • fill, noFill, stroke, noStroke, background, grayscale / RGB / RGBA

Error and Console

Code comments

Variables in p5.js (mouseX, mouseY)

Note:

  • mouseX, mouseY

  • setup() is called once (we should do preprocess here)

  • draw() is called multiple time

  • mousePressed() invoke when mouse pressed

  • declare, initialize, use: '3 steps variable'

  • built in function like random working only when setup() is invoke

createGraphics()

day 2

Condition statements (if)

The bouncing ball

Else and Else if, AND and OR

Boolean Variabls

Note:

  • Pressed vs Clicked, NOT operator(!), Toggle boolean state

While and for Loops

Nested Loops

Function basics

Introduction to Object-Oriented Programming (ES6)

Adding JavaScript Files

Array

day 3

Aray