Please enable JavaScript to use CodeHS

Points

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