Project 3.2: Pixels
Create a program that draws randomly colored boxes at different scales


Create a program that draws a grid of randomly colored rectangles on the screen each time the user clicks the mouse.

  • The window must be sized exactly 512 x 512

  • Your program must start with boxes that are sized 32 x 32

  • Each time the user left clicks, the size is halved and new boxes are drawn

  • Each time the user right clicks, the size is doubled and new boxes are drawn

  • There is a minimum size of 1 and a maximum size of 512.

FAQ / Tips

Step by Step

    1. Set your window size and a variable called pixelSize

      • In draw, use text to display pixelSize to the screen

    2. Write a mousePressed method:

      • On a left click, reduce size by half

      • On a right click, double size

      • Add in minimum and maximum size requirements

    3. Make your text size, color, and positioning look good.

    4. Create a method that draws boxes on the screen based on pixelSize

      • This is the main part of your program

      • You'll need to use a nested for loop

      • This is a little drawing stars, but you won't need modulus

      • Make sure you use noStroke() to remove the outline for each rectangle

    5. Call that method in setup and on mouse press

What colors can I use?

    • As long as the colors have some randomness, feel free to change the palette. For example, it might be "shades of blue" or "fall colors."

My mousePressed() isn't doing anything!

    • Explanation: mousePressed() only works in programs with a draw method

    • Solution: Add a draw method (even if it's empty)


Click here to download a running version of the program.


Minimum Size

Maximum Size

Examples with Alternate Colors