Please enable JavaScript to use CodeHS

Digital Art with p5.js - Outline

  1. Getting Started With p5.js

    1. 1.1 What is Creative Coding

    2. Video 1.1.1 What is Creative Coding
    3. Connection 1.1.2 p5.js Reference Guide
    4. Notes 1.1.3 Types of Sketches
    5. Example 1.1.4 Example: Drawing
    6. Example 1.1.5 Example: Animation
    7. Example 1.1.6 Example: Interactivity
    8. Free Response 1.1.7 Reflection: Types of Sketches
    9. Free Response 1.1.8 Reflection: Goals

    10. 1.2 Drawing and Shapes

    11. Video 1.2.1 Drawing and Shapes
    12. Exercise 1.2.2 Create a Canvas
    13. Connection 1.2.3 Canvas Coordinates
    14. Exercise 1.2.4 Line
    15. Exercise 1.2.5 Rectangle
    16. Exercise 1.2.6 Ellipse

    17. 1.3 Color

    18. Video 1.3.1 Color
    19. Connection 1.3.2 Create a Color Palette
    20. Connection 1.3.3 Hex to RGB Color Converter
    21. Example 1.3.4 Using RGB Values
    22. Exercise 1.3.5 Background Color
    23. Exercise 1.3.6 Fill
    24. Exercise 1.3.7 Stroke

    25. 1.4 Variables

    26. Video 1.4.1 Variables
    27. Example 1.4.2 Using Variables: Bricks
    28. Exercise 1.4.3 Making Variables
    29. Exercise 1.4.4 Reusing Variables
    30. Exercise 1.4.5 Width and Height

    31. 1.5 Project: Create Your Own Emoji

    32. Exercise 1.5.1 Project: Create Your Own Emoji

  2. Animation

    1. 2.1 The Draw Loop

    2. Video 2.1.1 The Draw Loop
    3. Connection 2.1.2 A Brief History of Animation
    4. Exercise 2.1.3 Frame Rate
    5. Exercise 2.1.4 No Loop
    6. Exercise 2.1.5 Frame Count

    7. 2.2 Color Transitions

    8. Video 2.2.1 Animated Color Transitions
    9. Connection 2.2.2 Color Gradient
    10. Exercise 2.2.3 Grayscale Gradient
    11. Exercise 2.2.4 Grayscale to Color
    12. Exercise 2.2.5 Color to Grayscale

    13. 2.3 Shape Transformations

    14. Video 2.3.1 Shape Transformations
    15. Exercise 2.3.2 Translation
    16. Exercise 2.3.3 Animated Translation
    17. Exercise 2.3.4 Rotation
    18. Exercise 2.3.5 Animated Rotation
    19. Exercise 2.3.6 Scale
    20. Exercise 2.3.7 Animated Scale

    21. 2.4 Direction

    22. Video 2.4.1 Direction
    23. Exercise 2.4.2 Up and Down
    24. Exercise 2.4.3 Left and Right
    25. Exercise 2.4.4 Diagonal

    26. 2.5 Project: Animate a Song

    27. Exercise 2.5.1 Project: Animate a Song

  3. Interactivity

    1. 3.1 What is Interactivity

    2. Video 3.1.1 What is Interactivity
    3. Example 3.1.2 Mouse Movement
    4. Example 3.1.3 Mouse Click
    5. Example 3.1.4 Keyboard Input
    6. Free Response 3.1.5 Reflection: Interactivity

    7. 3.2 Mouse Data

    8. Video 3.2.1 Mouse Data
    9. Exercise 3.2.2 mouseX
    10. Exercise 3.2.3 mouseY
    11. Exercise 3.2.4 mouseX and mouseY
    12. Exercise 3.2.5 mouseButton
    13. Exercise 3.2.6 Paint and Erase

    14. 3.3 Keyboard Data

    15. Video 3.3.1 Keyboard Data
    16. Exercise 3.3.2 keyIsPressed
    17. Connection 3.3.3 Key Codes
    18. Exercise 3.3.4 keyIsDown
    19. Exercise 3.3.5 key

    20. 3.4 Project: Create Your Own Interactive Sketch

    21. Exercise 3.4.1 Project: Create Your Own Interactive Sketch