Please enable JavaScript to use CodeHS

Outline


1. Getting Started With p5.js
1.1 What is Creative Coding
Video 1.1.1 What is Creative Coding
Connection 1.1.2 p5.js Reference Guide
Notes 1.1.3 Types of Sketches
Example 1.1.4 Example: Drawing
Example 1.1.5 Example: Animation
Example 1.1.6 Example: Interactivity
Free Response 1.1.7 Reflection: Types of Sketches
Free Response 1.1.8 Reflection: Goals
1.2 Drawing and Shapes
Video 1.2.1 Drawing and Shapes
Exercise 1.2.2 Create a Canvas
Connection 1.2.3 Canvas Coordinates
Exercise 1.2.4 Line
Exercise 1.2.5 Rectangle
Exercise 1.2.6 Ellipse
1.3 Color
Video 1.3.1 Color
Connection 1.3.2 Create a Color Palette
Connection 1.3.3 Hex to RGB Color Converter
Example 1.3.4 Using RGB Values
Exercise 1.3.5 Background Color
Exercise 1.3.6 Fill
Exercise 1.3.7 Stroke
1.4 Variables
Video 1.4.1 Variables
Example 1.4.2 Using Variables: Bricks
Exercise 1.4.3 Making Variables
Exercise 1.4.4 Reusing Variables
Exercise 1.4.5 Width and Height
1.5 Project: Create Your Own Emoji
Exercise 1.5.1 Project: Create Your Own Emoji
2. Animation
2.1 The Draw Loop
Video 2.1.1 The Draw Loop
Connection 2.1.2 A Brief History of Animation
Exercise 2.1.3 Frame Rate
Exercise 2.1.4 No Loop
Exercise 2.1.5 Frame Count
2.2 Color Transitions
Video 2.2.1 Animated Color Transitions
Connection 2.2.2 Color Gradient
Exercise 2.2.3 Grayscale Gradient
Exercise 2.2.4 Grayscale to Color
Exercise 2.2.5 Color to Grayscale
2.3 Shape Transformations
Video 2.3.1 Shape Transformations
Exercise 2.3.2 Translation
Exercise 2.3.3 Animated Translation
Exercise 2.3.4 Rotation
Exercise 2.3.5 Animated Rotation
Exercise 2.3.6 Scale
Exercise 2.3.7 Animated Scale
2.4 Direction
Video 2.4.1 Direction
Exercise 2.4.2 Up and Down
Exercise 2.4.3 Left and Right
Exercise 2.4.4 Diagonal
2.5 Project: Animate a Song
Exercise 2.5.1 Project: Animate a Song
3. Interactivity
3.1 What is Interactivity
Video 3.1.1 What is Interactivity
Example 3.1.2 Mouse Movement
Example 3.1.3 Mouse Click
Example 3.1.4 Keyboard Input
Free Response 3.1.5 Reflection: Interactivity
3.2 Mouse Data
Video 3.2.1 Mouse Data
Exercise 3.2.2 mouseX
Exercise 3.2.3 mouseY
Exercise 3.2.4 mouseX and mouseY
Exercise 3.2.5 mouseButton
Exercise 3.2.6 Paint and Erase
3.3 Keyboard Data
Video 3.3.1 Keyboard Data
Exercise 3.3.2 keyIsPressed
Connection 3.3.3 Key Codes
Exercise 3.3.4 keyIsDown
Exercise 3.3.5 key
3.4 Project: Create Your Own Interactive Sketch
Exercise 3.4.1 Project: Create Your Own Interactive Sketch