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 |
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