Goals

• Learn how to add image assets to a sketch
• Learn about how to use aspect ratios
• Use randomness and repetition to experience images in a new way

Prerequisites

1. Accept the assignment on our Github Classroom.
2. Download the git repository to your local computer.

Assignment

In this assignment you are going to play with images, while continuing to explore repetition. Your goal is to produce something that looks like this:

The user will load in an image file, which will be displayed on the right. On the left, you will create a mosaic formed by a tile randomly snipped out of the source image.

You will want to look at image, createImg, and createFileInput.

In the last assignment, we just left out the draw function altogether. For this one, I would like you to retain the draw function, but use noLoop and redraw to control when you update the canvas.

In order to properly display the raw image, I encourage you to think about the aspect ratio. While you might think about aspect ratio in terms of actual ratios (4:3, or 16:9 perhaps), we frequently will express it as a single value derived by width/height. Having a single value makes it easier to compare aspect ratios (to determine which dimension will be the limiting factor) and to rescale things without distortion.

Requirements

• The user must be able to load a custom image.
• The image must be displayed on the right half of the canvas.
• The image must be "fitted" to the canvas -- it should be scaled to fill as much of the right half of the canvas as possible while maintaining its native aspect ratio.
• The left half of the image must be completely tiled with random patches from the user's image.
• The patches should be randomly sized and from random locations.
• Patches should be "complete" (i.e., they should not attempt to select pixels that don't appear in the original image)
• The size of the displayed tiles should be independent from the size of the patch (i.e., if a new patch is chosen, it should not change the tiling, just the content).
• There should be a 'Reroll' button which selects a new random path.
• Sophisticated: The user should be able to draw a "selection rectangle" on top of the original image.
• Sophisticated: The selection rectangle will start where the user presses the mouse button down and dynamically change size as the user drags the mouse.
• Sophisticated: The selection rectangle will stop at the bounds of the image (i.e., if the user drags beyond the edge of the image, the edge of the selection rect will stop at the boundary).
• Sophisticated: The region inside the selection rectangle will be the patch used by the tiles.
• Sophisticated: When the mouse is released, the selection rectangle will go away, and the tile will remain set to the last patch.
• Sophisticated: You are free to make the selection rectangle look however you like, but it should be visible.

*A Sophisticated mark will be achieved by meeting all Sophisticated requirements*

Aesthetic choices

You are welcome to make aesthetic choices that don't interfere with the above requirements. For example, you can decide if patches are square or rectangles, and how big the tiles are. You are also welcome to further mutate and manipulate the tiles as long as they remain nominally recognizable as having come from the source image.

Finishing up

Commit your changes to git and push them back up to GitHub. I will find them there.