Please enable JavaScript to use CodeHS

  • Featured
  • Holiday

Images from Memorial Day

In this project, students will use JavaScript graphics to create a fun image pixelation activity using mouse events.

Medium

2 Hours

High School

Project Description

Background

In this project, students are going to take an image and ‘pixelate’ it. Essentially, they are going to represent the image as a series of dots. Students will start with one big dot, but as they mouse over the image, they will split that dot into 4 smaller dots. They can continue to mouse over the dots to make them smaller and smaller. Eventually, the dots get small enough to make out the picture.

Your Task

Through a series of activities, students will create the program. They start by first creating the helper functions to draw circles and calculate the color.

From there, students write the mouse event function to split each circle into 4 smaller circles making use of the helper functions they created in the first part.