Lab9f14 < CS111

CS111 Web>CS111Fall2014>AssignmentsF14>Lab9f14 (2014-10-30, Main.troy) (raw view)EditAttach
---++ <a target="_top" href="http://www.cs.uic.edu/CS111/">CS 111 - Program Design I, Fall 2014</a>
---+++ <a name="Lab_9"></a> <a name="Lab_9" title="Lab_9"></a> <a name="Lab_10" title="Lab_10"></a> Lab 9

In class we discussed an <a target="_top" href="https://www.cs.uic.edu/pub/CS111/CodeF14/Lect1028d.java">example (Lect1028d.java)</a> that rotated an image 90 degrees clockwise. We also discussed an <a target="_top" href="https://www.cs.uic.edu/pub/CS111/CodeF14/Lect1028e.java">example (Lect1028e.java)</a> that flippedan image around its main diagonal. Please note that the above two are different and we want to do ROTATION in this lab not flipping.

For this lab, you are to write one program that will prompt the user to enter if an integer value from 1 to 3. When the use enters:
   1 - rotate an image 90 degrees in a clockwise direction (as done in class in example <a target="_top" href="http://www.cs.uic.edu/pub/CS111/CodeS14/Lect0313f.java">Lect0313f.java</a>)
   1 - rotate an image 180 degrees in a clockwise direction (or counter clockwise direction since both give the same result) or
   1 - rotate an image 90 degrees in a counter-clockwise direction.
An example of a rotated image is shown below. <br />Here is the original image: <br /> <img alt="" src="http://www.cs.uic.edu/~i101/labs/caterpillar.jpg" />

Here is the same image rotated 90 degrees clockwise: <br /><img alt="" src="http://www.cs.uic.edu/~i101/labs/caterpillarRot90.jpg" />

Here is the same picture rotated 180 degrees:

<img alt="caterpillarRot180.jpg" src="%PUBURL%/CS111/Lab10f13/caterpillarRot180.jpg" />

Here is the same picture rotated 90 degrees counter-clockwise:

<img alt="caterpillarRot270.jpg" src="%PUBURL%/CS111/Lab10f13/caterpillarRot270.jpg" />

Some key issues to think about are
   * What is the size of the new rotated image based on the width and height of the original image?
   * What are the X and Y coordinates of a pixel in the new rotated images based on the X and Y coordinates of the pixel in the original image?
We will need to determine the formulas for the clockwise rotation and the counter clockwise rotation.

Consider the following 5x3 "image": <table cellspacing="0" cellpadding="0" id="table1" border="1"> <tbody><tr> <td bgcolor="#ffffff" valign="top"> a </td> <td bgcolor="#ffffff" valign="top"> b </td> <td bgcolor="#ffffff" valign="top"> c </td> <td bgcolor="#ffffff" valign="top"> d </td> <td bgcolor="#ffffff" valign="top"> e </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> f </td> <td bgcolor="#edf4f9" valign="top"> g </td> <td bgcolor="#edf4f9" valign="top"> h </td> <td bgcolor="#edf4f9" valign="top"> i </td> <td bgcolor="#edf4f9" valign="top"> j </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> k </td> <td bgcolor="#ffffff" valign="top"> l </td> <td bgcolor="#ffffff" valign="top"> m </td> <td bgcolor="#ffffff" valign="top"> n </td> <td bgcolor="#ffffff" valign="top"> o </td> </tr></tbody></table> When rotated clockwise 90 degrees, it will become: <table cellspacing="0" cellpadding="0" id="table2" border="1"> <tbody><tr> <td bgcolor="#ffffff" valign="top"> k </td> <td bgcolor="#ffffff" valign="top"> f </td> <td bgcolor="#ffffff" valign="top"> a </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> l </td> <td bgcolor="#edf4f9" valign="top"> g </td> <td bgcolor="#edf4f9" valign="top"> b </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> m </td> <td bgcolor="#ffffff" valign="top"> h </td> <td bgcolor="#ffffff" valign="top"> c </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> n </td> <td bgcolor="#edf4f9" valign="top"> i </td> <td bgcolor="#edf4f9" valign="top"> d </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> o </td> <td bgcolor="#ffffff" valign="top"> j </td> <td bgcolor="#ffffff" valign="top"> e </td> </tr></tbody></table> We can (hopefully) notice a pattern between the original X and Y positions and the rotated X and Y positions by inspecting the following summary once it is filled in with the pixel position information. <table cellspacing="0" cellpadding="0" id="table3" border="1"> <tbody><tr> <th valign="top"> <a rel="nofollow" href="Lab10f12?sortcol=0;table=3;up=0#sorted_table" title="Sort by this column">pixel</a> </th> <th valign="top"> <a rel="nofollow" href="Lab10f12?sortcol=1;table=3;up=0#sorted_table" title="Sort by this column">Original X</a> </th> <th valign="top"> <a rel="nofollow" href="Lab10f12?sortcol=2;table=3;up=0#sorted_table" title="Sort by this column">Original Y</a> </th> <th valign="top"> <a rel="nofollow" href="Lab10f12?sortcol=3;table=3;up=0#sorted_table" title="Sort by this column">Rotated X</a> </th> <th valign="top"> <a rel="nofollow" href="Lab10f12?sortcol=4;table=3;up=0#sorted_table" title="Sort by this column">Rotated Y</a> </th> </tr> <tr> <td bgcolor="#ffffff" valign="top"> a </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> b </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> c </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> d </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> e </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> f </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> g </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> h </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> i </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> ... </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> <td bgcolor="#edf4f9" valign="top"> </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> o </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> <td bgcolor="#ffffff" valign="top"> </td> </tr></tbody></table> The same will need to be done with the image rotated 180 degrees. The above image would be as follows once rotated 180 degrees: <table cellspacing="0" cellpadding="0" id="table4" border="1"> <tbody><tr> <td bgcolor="#ffffff" valign="top"> o </td> <td bgcolor="#ffffff" valign="top"> n </td> <td bgcolor="#ffffff" valign="top"> m </td> <td bgcolor="#ffffff" valign="top"> l </td> <td bgcolor="#ffffff" valign="top"> k </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> j </td> <td bgcolor="#edf4f9" valign="top"> i </td> <td bgcolor="#edf4f9" valign="top"> h </td> <td bgcolor="#edf4f9" valign="top"> g </td> <td bgcolor="#edf4f9" valign="top"> f </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> e </td> <td bgcolor="#ffffff" valign="top"> d </td> <td bgcolor="#ffffff" valign="top"> c </td> <td bgcolor="#ffffff" valign="top"> b </td> <td bgcolor="#ffffff" valign="top"> a </td> </tr></tbody></table>

The same will need to be done with the image rotated 90 degrees in the counter-clockwise direction. The above image would be as follows once rotated: <table cellspacing="0" cellpadding="0" id="table5" border="1"> <tbody><tr> <td bgcolor="#ffffff" valign="top"> e </td> <td bgcolor="#ffffff" valign="top"> j </td> <td bgcolor="#ffffff" valign="top"> o </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> d </td> <td bgcolor="#edf4f9" valign="top"> i </td> <td bgcolor="#edf4f9" valign="top"> n </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> c </td> <td bgcolor="#ffffff" valign="top"> h </td> <td bgcolor="#ffffff" valign="top"> m </td> </tr> <tr> <td bgcolor="#edf4f9" valign="top"> b </td> <td bgcolor="#edf4f9" valign="top"> g </td> <td bgcolor="#edf4f9" valign="top"> l </td> </tr> <tr> <td bgcolor="#ffffff" valign="top"> a </td> <td bgcolor="#ffffff" valign="top"> f </td> <td bgcolor="#ffffff" valign="top"> k </td> </tr></tbody></table>

---+++ <a name="Lab_Assignment_9"></a> <a name="Lab_Assignment_10" title="Lab_Assignment_10"></a> <a name="Lab_Assignment_10" title="Lab_Assignment_10"></a> Lab Assignment 9
 Due: Wednesday, 11/5/2014 by 11:59 pm

Write a Java program named <a rel="nofollow" href="https://www.cs.uic.edu/bin/edit/CS111/NetIDLab10?topicparent=CS111.Lab10f13" title="NetIDLab10 (this topic does not yet exist; you can create it)">NetIDLab9</a> .java that will do the following:
   1 <p> </p> Print out your name and your net-id
   1 Allow the user to select a picture from a file stored on the local machine
   1 Prompt the user for an integer value of 1, 2 or 3
   1 If the user enters the value of 1, call a method that will create an image that has been rotated 90 degrees clockwise
   1 If the user enters the value of 2, call a method that will create an image that has been rotated 180 degrees
   1 If the user enters the value of 3, call a method that will create an image that has been rotated 90 degrees counter-clockwise
   1 Display the rotated image
   1 Save the rotated image to a file on the local machine <br /> <p> </p>
   1 The code that does the rotation must be written in 3 different methods. One method for each different rotation.
   1 You must write your programs using good programming style which includes: <p> </p> 
      * Good variable names
      * in-line commenting
      * header block commenting for the program and each method written<br /> Be sure to include the following with the header block comment for the program. 
         * your name
         * day and time of your CS 111 lab section (i.e. Monday at 2:00)
         * A description of the project.
      * proper indentation of program statements
      * use of blank lines to separate blocks of code.
*NOTE:* The code submitted for this lab must only access each pixel once for the rotation. I.E. You are not allowed to execute the code from rotate90clockwise three times for the rotate90CounterClockwise code or vise-versa.

---+++ <a name="How_assignments_should_be_submit"></a> <a name="How_assignments_should_be_submit" title="How_assignments_should_be_submit"></a> <a name="How_assignments_should_be_submit" title="How_assignments_should_be_submit"></a> How assignments should be submitted
 You are to submit your program electronically using the link for Lab 9 on the Assignments Page in Blackboard.

-- Main.troy - 2014-10-30
Topic revision: r1 - 2014-10-30 - 18:42:29 - Main.troy
CS111
[edit this menu]
WISEST
Helping Women Faculty Advance
Funded by NSF