Please enable JavaScript to use CodeHS

West Virginia Discovering Computer Science

Exploring Art with Code

Students explore the intersection of art and technology by creating sketching using p5.js.

Lessons

5.1 Getting Started

  • What is Creative Coding
  • p5.js Reference Guide
  • Drawing and Shapes
  • Create a Canvas
  • Canvas Coordinates
  • +3 more

5.2 Color

  • Color
  • Create a Color Palette
  • Hex to RGB Color Converter
  • Using RGB Values
  • Background Color
  • +2 more

5.3 Variables

  • Variables
  • Using Variables: Bricks
  • Making Variables
  • Reusing Variables
  • Width and Height

5.4 The Draw Loop

  • The Draw Loop
  • A Brief History of Animation
  • Frame Rate
  • No Loop
  • Frame Count

5.5 Color Transitions

  • Animated Color Transitions
  • Color Gradient
  • Grayscale Gradient
  • Grayscale to Color
  • Color to Grayscale

5.6 Shape Transformations

  • Shape Transformations
  • Translation
  • Animated Translation
  • Rotation
  • Animated Rotation
  • +2 more

5.7 Direction

  • Direction
  • Up and Down
  • Left and Right
  • Diagonal

5.8 Mouse Data

  • Mouse Data
  • mouseX
  • mouseY
  • mouseX and mouseY
  • mouseButton
  • +1 more

5.9 Keyboard Data

  • Keyboard Data
  • keyIsPressed
  • Key Codes
  • keyIsDown
  • key

5.10 Project: Animate an Emoji

  • Project: Animate an Emoji

Courses that include this module