Please enable JavaScript to use CodeHS

Points

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