CSc 101: Colorful Patterns

In this assignment, you’ll be writing several “smaller” programs, all of which will require you to use nested for-loops. The purpose of the assignment is to give you additional for-loop practice. Eventually, we’ll get to writing some programs that use nested for-loops for more “useful” things, like games.

Light-up Circles

Write a processing program that mimics the below behavior:

A few important things to keep in mind:

• The canvas is a square (exact size up to you, but must be no shorter than 200 px and no larger than 1000px).
• An 8x8 grid of circles is drawn
• The red brightness level of each circle is 0.
• The blue and green brightness levels are determined by the X and Y coordinates of the mouse.
  • When the mouse is on the far right of the screen, the, green brightness goes to 255, and all the way on the right, it goes to 0.
  • Same goes for blue, but up/down instead of left/right.
• When the mouse is in the top left corner, the whole canvas goes black.

You must use nested for-loops on this problem. However, since nested for-loop are probably new to you, you can start working on it with just a single for-loop. First, try getting just a single row of circles working with the colors and mouse coordinates, like so:

Once this is working, try “nesting” another for-loop with this one, to get all of the rows to repeat.

Name the code file light_up_circles.pde.

Triangle Grid

Again, write a processing program that mimics the below behavior:

A few important things to keep in mind:

• The canvas is a square (exact size up to you, but must be no shorter than 200 px and no larger than 1000px).
• Up-to a 16x16 grid of triangles is drawn
• The size of the grid drawn is determined by the mouse X and Y position.
• The blue value increases as the mouse moves from the left side to the right side.
• The red brightness decreases as the mouse moves from the top to the bottom.
• You must use a nested for-loop to draw the triangles.

HINT: To get the grid-drawing to “follow” the mouse, you can use the mouseX and mouseY variable to control when your for-loops stop.

Name the code file triangle_grid.pde.

BONUS - Resizable Tiles

This program is not required! You may complete if for a small amount of bonus points.

Write a processing program that mimics the below behavior:

A few important things to keep in mind:

• The canvas is a grid of tiles, 5 tiles wide and 7 tiles tall.
• The brightness value of the tiles increases from top-to-bottom.
• The tiles have thick black “grout lines”
• The 5x7 tile grid scales with the canvas as it is resized!
  • So far, we have not learned how to make a canvas resizable. Everything in the assignments has been a fixed size. To make a canvas resizable, put the following line of code into the setup area: surface.setResizable(true);. The built-in width and height variables update as the canvas is resized, so you can use those to help the tile pattern scale.

Name the code file resizable_tiles.pde.

Matching Colors and Shapes

You should closely match all of the described colors from this specification.

Comments

Each program file should have a “header” comment at the top that has the following format:

//
// Author: Student Name
// Description:
//    A short description of what this program does!
// 

Even though this is a small program, it is important to get in the habit of commenting on your code. This is considered good programming style, and it even more helpful once you start writing larger programs.

Submission and grading

This was assigned on 9/22/2017. It is due on 9/29/2017 at 5:00pm.

Turn in each of the files described in the spec (2 or 3 total) the assignment 6 drop-box in D2L before the due date. Make sure to name the files exactly as this document specifies. In general, make sure to follow these instructions precisely. If you don’t, we will deduct points!!!