Please enable JavaScript to use CodeHS

Connecticut Computer Science: 7th Grade

Exploring Art with Code

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

Lessons

4.1 Getting Started

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

4.2 Color

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

4.3 Variables

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

4.4 The Draw Loop

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

4.5 Color Transitions

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

4.6 Shape Transformations

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

4.7 Direction

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

4.8 Mouse Data

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

4.9 Keyboard Data

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

4.10 Project: Animate an Emoji

  • Project: Animate an Emoji

Courses that include this module