Please enable JavaScript to use CodeHS

New York Computer Science 7-8

Exploring Art with Code

Students explore the intersection of art and technology by creating sketches 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