Lab 9: Use an 2-dimensional array to draw a flag

For the TA
- In this lab, students must write several nested for-statement to put color value in a 2-dimensional array.
  The result is as follows:
- The lab assignment is self-explanatory and your job is to assist students (show them the answers if necessary but explain the reason) when they have questions.
Lab goals
- In this lab you will write nested for-statements to manipulate a 2-dimensional array.
  This lab will help you understand the array and for-loops better.
  Please, make sure that you have added the honor code statement at the top of your Java file:
  The deadline for completing this lab assignment is midnight, today.
Preparation: Create your ~/cs170/lab9/, and copy files
- Copy-and-paste these terminal commands:
  In this lab, we will use gedit and javac (not BlueJ !).
  (Using BlueJ in this lab has resulted in freezing up of the workstation....)

The files used in the lab

You should have 2 files in your lab 9 directory:

MyCanvas.java

This program contains the neccesary programs to make a 400x300 picture using data from a 2-dimensional array.
Specifically, it contains a method called draw() that draws a 400x300 picture using data from an 2-dimensional array that you pass to the method.
Do NOT make any changes to this program.

DrawFlag.java

This program contains a 400x300 (2-dimensional) array named pixel (edit the DrawFlag.java program and look for the following line):
This array contain the pixel color values for a 400x300 picture.

Furthermore, the DrawFlag.java program will invoke the draw() method in the MyCanvas.java program to draw a 400x300 picture using data in the array pixel:

/* =============================================================== DO NOT touch this statement (that draw the picture) =============================================================== */ pic.draw( pixel ); pic.repaint(); // Repaint the frame

(look for the above lines towards the end of the program).

In this lab, you must put the correct color (pixel) values in the 2-dimensional array variable pixel to make this flag:

Intro to making drawing with the pixel array

First, compile the DrawFlag.java program and run it using these commands:
You should see this picture:
The canvas is identified by the variable name pic.

Edit DrawFlag.java

gedit DrawFlag.java

And look for this:

/* ========================================================== Try this: for ( col = 0; col < 400; col++ ) pixel[col][100] = YELLOW; ========================================================== */

Cut and paste the for-statement before that text:

/* ========================================================== Try this: for ( col = 0; col < 400; col++ ) pixel[col][100] = YELLOW; ========================================================== */ for ( col = 0; col < 400; col++ ) pixel[col][100] = YELLOW;

Compile the DrawFlag.java program again and run it using these commands:
The canvas pic now contains this picture:

Lab Assignment - Part 1: Make the 400x300 canvas red
- Look for the the following comment:
- Write a nested for-statement that write the color value YELLOW all 400x300 elements of the pixel variable.
  Use the row variable to run through the value 0 to 299 and use the col variable to run through the value 0 to 399, and store the value YELLOW to the variable pixel[col][row].
- After writing the code, you can compile and run the program with these commands:
  and if correct, you should see a red flag.

Lab Assignment - Part 2: make a blue diagonal

Next, we will draw a blue diagonal from (0,0) to (400,300).

Look at the properties of a coordinate point (col,row) on 3 different lines in this figure:

You see that:

The coordinate points on the diagonal from (0,0) to (400,300) satisfies the Mathematical equation:
The coordinate points on the diagonal line above the diagonal from (0,0) to (400,300) satisfies the Mathematical equation:
The coordinate points on the diagonal line below the diagonal from (0,0) to (400,300) satisfies the Mathematical equation:
Therefore, a coordinate points lies between the lines 3*col - 4*row = -150 and 3*col - 4*row = 150 will satisfy this Mathematical inequaty:

TODO:

Write a nested for-loop that go through every single coordinate (col, row) and change the pixel value in pixel[col][row] to BLUE if:

After writing the code, you can compile and run the program with these commands:
and if correct, you should see a red background with a blue strip across the flag.

Lab Assignment - Part 3: make the other blue diagonal
- Next, we will draw another blue diagonal from (0,300) to (400,0).
- Look at the properties of a coordinate point (col,row) on this diagonal line in this figure:
  You see that:
  Find the equation for the other 2 lines and formulate a property for a coordinate (col, row) between the top and bottom lines.
  Then write a nested for-loop to draw this diagonal.
- After writing the code, you can compile and run the program with these commands:
  and if correct, you should see this:
Turn in
- You must turn in your work by enter these terminal commands:
  before midnight today.
For the Lead TA: