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