Please enable JavaScript to use CodeHS

Digital Art with p5.js

Getting Started With p5.js

Students explore the intersection of art and coding. Students learn the fundamental concepts of p5.js and create their first sketch using p5.js shape-drawing and color functions.

Lessons

1.1 What is Creative Coding

  • What is Creative Coding
  • p5.js Reference Guide
  • Types of Sketches
  • Example: Drawing
  • Example: Animation
  • +3 more

1.2 Drawing and Shapes

  • Drawing and Shapes
  • Create a Canvas
  • Canvas Coordinates
  • Line
  • Rectangle
  • +1 more

1.3 Color

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

1.4 Variables

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

1.5 Project: Create Your Own Emoji

  • Project: Create Your Own Emoji

Courses that include this module