Lab 6

Using arrays and images and 2D transformations (translate/rotate), create a puzzle game.

  • Load multiple images (at least 6), or load one image and cut it into rectangular pieces in your code (we’ll look at this in class).
  • Start each image (each puzzle piece) in a random location with a random rotation.
  • Store the image, locations, and rotations in arrays.
  • Allow dragging puzzle pieces around with the left mouse button. Mouse dragging is shown in the mouse input notes, heading “Code for demo 2: dragging/clicking inside a box.”
  • Rotate (spin) a piece if the right mouse button is held over the piece.
  • Note, you’ll need for() loops to deal with the arrays, and pushMatrix()/popMatrix() to deal with the puzzle piece translations and rotations.

Example code:

PImage[] pieces = new PImage[6];

void setup()
  PImage cat = loadImage("Cat03.jpg");
  pieces[0] = cat.get(0, 0, 200, 200); // x, y, width, height
  pieces[1] = cat.get(200, 0, 200, 200);
  pieces[2] ...
  // or, if different images:
  pieces[0] = loadImage("image1.jpg");
  pieces[1] = loadImage("image2.jpg");

CSCI 111 material by Joshua Eckroth is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Source code for this website available at GitHub.