代写COMP 1010、program留学生代做、代写Python，Java，c++程序设计

日期：2019-11-20 10:43

ASSIGNMENT 4: Nested Loops & Functions with Parameters & Return values

DEPARTMENT AND COURSE NUMBER: COMP 1010

COURSE TITLE: Introduction to Computer Science 1

TERM: Fall 2019

1

Assignment 4

DUE DATE: FRIDAY NOVEMBER 22ND, 2019 AT 11:59 PM.

This assignment covers nested loops, and functions that take parameters and have return values.

Notes:

? Name your sketch using your name, the assignment number, and the question number,

exactly as in this example: LastnameFirstnameA4.

? Your program must run upon download to receive any marks.

? Submit one PDE file for the highest question completed, labelled with the number of the

highest question completed. If you create your own target images, you can also submit

those in a zip file.

? Assignments must follow the programming standards document published on the course

website on UM Learn.

? After the due date and time assignments may be submitted but will lose 2% of marks per

hour late or portion thereof.

? You may submit a solution file multiple times, but only the most recent version will be

marked.

? These assignments are your chance to learn the material for the exams. Code your

assignments independently. We use software to compare all submitted assignments to each

other, and pursue academic dishonestly vigorously.

? If you are asked to use parameters or return values from functions you MUST do that to

receive full marks.

Background: Quick Colour Game

The Quick Colour Game is a colouring application and a game in one. A user can simply colour

the grid however they want, or they can try to colour the grid to match the target image shown,

trying to do so in as few moves as possible.

The interaction has three components: a user can select a single cell, a row of cells or a column

of cells. Then the user selects a colour and that colour is applied to whatever has been selected (a

column, a row and/or a cell). Note that it is possible for a user to select a row and a cell and a

column at the same time and then apply a colour to all of them in one move (see demo movie).

A simple score of the number of moves is displayed. The score increases every time colour is

applied. If a column and a cell were coloured at the same time, that counts as only one move.

There are five target images provided with the assignment. If you want to use these images

(rather than create your own), you will have to make your colouring grid the same size (8

columns, 12 rows). The cell size is 30. You’ll also want to use the same colours, which are:

#D12020, #515DD8, #21AF20, #F5EF74, #F59219, #B219F5, and #FFFFFF. You will want to

use the built-in color type, and create constants like this: final color RED = #D12020;

ASSIGNMENT 4

DEPARTMENT AND COURSE NUMBER: COMP 1010

2

If you want to make a different size grid and/or use different colours, you can, but then you will

have to create and load custom images. (Hint: don’t attempt this unless you get done early).

Part 1: Application Setup

Set up an Active Processing program that will

draw the initial configuration. There are six main

components:

1. The colour wells (at least 7 colours)

2. The colouring grid (8 cols x 12 rows)

3. The target image

4. The ‘score’ label

5. The row selectors

6. The column selectors

Each of these components should be drawn in

their own separate draw function. You can

arrange the layout of the game however you

want, as long as you have the above components.

Use globals (constants or variables, as appropriate) to store position and size of each component,

the number of moves, and the currently selected cell, column or row. Hint: if a column, row or

cell isn’t currently selected, you probably want to store something like -1 in that variable.

Store the target images (target0.png, target1.png, etc.) inside the folder for your Processing

script. To get one of these to display, you can use the following code, which creates an off-screen

buffer, loads an image into that buffer, then displays the buffer at a specified location on canvas:

PImage target; // create a variable that can point to an off-screen buffer

String filename = "target1.png"; // create filename

target = loadImage(filename); // load image file into off-screen buffer

image(target, x, y); // display the buffer on canvas at location x, y

Note that you will need use whatever constants you have declared for specifying where the target

image goes. You will also need to modify this code so that you aren’t always loading

target1.png. A different image should randomly load each time you run the game. All of the

images have almost the same filename, except for one number, so how can you randomly

generate an appropriate filename?

The grid must be drawn using nested for loops. It should be drawn as a series of boxes with a 1-

pixel grey outline and no fill. DO NOT draw this as a series of vertical and horizontal lines. This

way, in the next part, when you select a cell, you can simply repaint that cell with a highlight

color outline. Then when the cell becomes unselected again, you redraw it with a grey outline.

ASSIGNMENT 4

DEPARTMENT AND COURSE NUMBER: COMP 1010

3

Part 2: Allow selection of a cell

All of the user interaction in this program should be handled through Processing’s

mouseClicked() function. For Part 2, you will want to create and call a method to check if a click

happened over the colouring grid. This method should take in the position of the mouse click

and should return a cell number that is the selected cell. More details below.

What is a cell number? Think of the cells in the grid as numbered from 0, from the top-left to the

bottom right, like this:

0 1 2 3

4 5 6 7

8 9 10 11

If a cell was clicked on, you need to determine which cell was clicked in and return that cell

number. You will want to use integer division and modulo to calculate the cell number. As you

are working on this, it’s a good idea to use println() statements to print out which cell number

this function is returning, to make sure that you are doing this right.

Make sure that if a cell was already selected, and the user didn’t select a new cell, the old

selected cell still stays selected.

Once you get that working, there is a twist. If

the user clicked in a cell, and that specific cell

was already selected, it should be unselected.

(This is the user changing their mind). In this

case, you should return -1.

Once you are sure the cell number is correct,

modify your drawGrid() method to change the

outline colour of the cell, if it is the selected

cell.

Here is an image showing cell selection:

Part 3: Allow row and column selection

This part is similar to Part 2, but you need to allow the user to select a row or a column using the

dot controls to the left and top of the colouring grid. Do the rows first, then do the columns.

Once again, selection should be handled through the mouseClicked() function. Create a function

called something like checkRowSelectors(…). Pass in the location of the click. This function

should return a row number if a row was selected, otherwise it should return -1. If the user didn’t

click on a row control at all, and a row was already selected, that row should remain selected. If a

user clicks on a row control and that specific row was already selected, your function should

return -1. Again, use println() statements to check that you are getting the correct row.

ASSIGNMENT 4

DEPARTMENT AND COURSE NUMBER: COMP 1010

4

Once you have the row selection function working properly, modify your drawRowSelectors()

function to highlight the selected row control.

Here is an image showing row selection and an image showing column selection:

Once you have the above working, follow the same process for column selection.

Part 4: Colour selection & application

Now it all comes together!

Create a checkColourSelection(…) function that is called from mouseClicked(). This function

should take in the click location, and if a colour well is clicked on, apply that colour to any

selected row, column or cell.

This needs to be done in two steps, first figure out what colour was selected (if no colour is

selected, nothing should happen at all).

Then, apply colour to any selected row, column and/or cell. You will want to create a function

for applying colour to each of these things (i.e. applyColourCell(…) should take in the cell

number and the colour, colour in that cell and then unselect the cell).

Here are colours applied to a row, column and an individual cell (note that you won’t have num

moves properly updating yet):

ASSIGNMENT 4

DEPARTMENT AND COURSE NUMBER: COMP 1010

5

Hint: if it seems like the colours aren’t being applied, ensure that you do NOT have a

background() call inside draw, as that would paint over colours applied in the previous draw call.

Part 5: Keep Score

You want to increment the number of moves the user has made whenever they apply colour to

the grid. So, in the function that checks for colour selection, if colour is going to be applied to a

cell, a row, a column (or some combination), you should increment the number of moves. Do

this before applying the colour, because after colour is applied, these items become unselected!

Make sure that your label that draws the score is updating appropriately.

BONUS Challenge (no points for this)

If you finish the assignment early and you want a bonus challenge… write a function that checks

for a perfect match (the colours in the colouring grid match the colours in the target image). To

do this, you would need to use the color c = get(x,y); command to check the colour

anywhere on the Canvas. If the colours match, display a congratulatory message to the user.

Hand In:

Hand in one pde file only***, containing the answer to the highest question you completed. It

must run without errors, or you will lose all of the marks for the test run. Make sure your file is

named exactly as specified in the instructions at the beginning of the assignment.

The marker will run your program, and may change the canvas size and the value of the

constants. It should still work if any constants are changed in a reasonable way.

Coding style is worth 3 points on this assignment. Follow course coding style guidelines.

***If you used your own target images, you may additionally upload a zip file of the target

images, but this must be separate from your pde file.