Lab 1

Topics:  Drawing, Variables and a Little Math

There are several small programs that you will write in each lab activity for this course.  You will be directed to save the programs with specific file names, and at the end of the lab you will be given directions on how to submit the programs for evaluation/grading.

  1. Use File Explorer to create a new folder named CSC108 (don’t use spaces in the name).  This is where you will store all of your work for the course.  For each lab, we will collect the programs that you will write in a common subfolder.  For this lab, use File Explorer to create a new folder in your CSC108 folder named LAB01 (don’t use spaces in file or folder names).
  2. Launch Processing, and create a new Processing program (called a sketch), saving it right away in your CSC108\LAB01 folder using the name LAB01Part1 (being sure not to use any spaces in the file name).  If you receive a message saying that the version of Processing you are running is not the most recent one, you can ignore that message and not download anything – the version of Processing installed in our labs is fine for our course purposes.
  3. Starting at the beginning of Chapter 3 of the textbook, read the text and try the code from Examples 3-1 and 3-2 — you will actually copy the code from the book and paste it into the Processing editor window to run the code.  Then make changes as suggested by the authors and see if you can get the system to do what is suggested.  If you try to paste code samples that you copy from the textbook into the Processing editor window, unfortunately the editor doesn’t put the statements on separate lines, but puts things all on one line.  So for these lab directions, I have copied the code samples from the book myself and edited them so that the statements are on separate lines.  Here are the code samples for Exercises 3-1 and 3-2:

Exercise 3-1:

size(800, 600);

Exercise 3-2:

size(480, 120);
point(240, 60);

You don’t need to save your work between Exercises unless you want to – in that case, use the “New” button from the Processing Toolbar, and use names such as LAB01Part1a, LAB01Part1b, etc. 4. Pay particular attention to the drawings shown in the “Basic Shapes” section of the text. These are the simple drawing functions that you can use in Processing. You will need to know how to draw rectangles, triangles, quads, ellipses, arcs and lines to complete this lab, so be sure you understand that section of the text. 5. Work on Exercises 3-3, 3-4, 3-5 and 3-6 (be sure to read the text in the book between the exercises, too). Exercise 3-3:

size(480, 120);
line(20, 50, 420, 110);

Exercise 3-4:

size(480, 120);
quad(158, 55, 199, 14, 392, 66, 351, 107);
triangle(347, 54, 392, 9, 392, 66);
triangle(158, 55, 290, 91, 290, 112);

Exercise 3-5:

size(480, 120);
rect(180, 60, 220, 40);

Exercise 3-6:

size(480, 120);
ellipse(278, -100, 400, 400);
ellipse(120, 100, 110, 110);
ellipse(412, 60, 18, 18);
  1. Skip ahead three sections to the “Color” section of the text and read the first part of the section on Color, working out Exercises 3-15, 3-16 and 3-17. There are several ways to set the drawing colors in Processing: if you use just one parameter, then the color will be white, black or a shade of gray. If you use three parameters, then the color will be an opaque blend of red, green and blue. Note: be sure to copy ALL of the statements in these exercises – there are more statements in the box than are displayed. You can use the [Ctrl]-A keystroke to “Select All” the text in the box before you copy.

Exercise 3-15:

size(480, 120);
background(0);               // Black
fill(204);                   // Light gray
ellipse(132, 82, 200, 200);  // Light gray circle
fill(153);                   // Medium gray
ellipse(228, -16, 200, 200); // Medium gray circle
fill(102);                   // Dark gray
ellipse(268, 118, 200, 200); // Dark gray circle

Exercise 3-16:

size(480, 120);
fill(153);                    // Medium gray
ellipse(132, 82, 200, 200);   // Gray circle
noFill();                     // Turn off fill
ellipse(228, -16, 200, 200);  // Outline circle
noStroke();                   // Turn off stroke
ellipse(268, 118, 200, 200);  // Doesn't draw!

Exercise 3-17:

size(480, 120);
noStroke();
background(0, 26, 51);        // Dark blue color
fill(255, 0, 0);              // Red color
ellipse(132, 82, 200, 200);   // Red circle
fill(0, 255, 0);              // Green color
ellipse(228, -16, 200, 200);  // Green circle
fill(0, 0, 255);              // Blue color
ellipse(268, 118, 200, 200);  // Blue circle
  1. ==Now, write a Processing program that draws a version of the flag of the country of Djibouti. Save the program using the name Lab01Part1 in the folder CSC108\LAB01. By the way, the ‘D’ is silent when you say the name of this country.==
  2. Go back to the “Basic Shapes” section and complete Exercise 3-7 and 3-8. Unless you are a math major, it is more natural to think of drawing arcs using angle measurements in degrees, so you’ll almost always use the style shown in Exercise 3-8 when using the arc function. Exercise 3-7
Go back to the "Basic Shapes" section and complete Exercise 3-7 and 3-8.  Unless you are a math major, it is more natural to think of drawing arcs using angle measurements in degrees, so you'll almost always use the style shown in Exercise 3-8 when using the arc function.

Exercise 3-8

size(480, 120);
arc(90, 60, 80, 80, 0, radians(90));
arc(190, 60, 80, 80, 0, radians(270));
arc(290, 60, 80, 80, radians(180), radians(450));
arc(390, 60, 80, 80, radians(45), radians(225));
  1. ==Write a Processing program that draws a simplified version of the letter S shown in the Mount Union CS Department logo. In other words, you are to draw a couple of arcs and a line to have the stylistic S show up in the output window. Save the program using the name Lab01Part2 in the folder.==
  2. Move forward in Chapter 3 to the “Custom Shapes” section of the text, and complete Exercises 3-19 and 3-20. Exercises 2-19
size(480, 120);
beginShape();
fill(153, 176, 180);
vertex(180, 82);
vertex(207, 36);
vertex(214, 63);
vertex(407, 11);
vertex(412, 30);
vertex(219, 82);
vertex(226, 109);
endShape();

Exercise 2-20

size(480, 120);
beginShape();
fill(153, 176, 180);
vertex(180, 82);
vertex(207, 36);
vertex(214, 63);
vertex(407, 11);
vertex(412, 30);
vertex(219, 82);
vertex(226, 109);
endShape(CLOSE);

  1. ==Write a Processing program that draws the simplified version of the flag of Ohio shown here. To draw the shapes that you’ll need to do this, make a drawing on paper and figure out the (x, y) coordinates of all the points of the shapes you’ll be drawing. You can draw this simplified Ohio flag using a Blue triangle, a White quad, a Red quad, a White ellipse and a Red ellipse. Save the program using the name Lab01Part3 in the folder CSC108\LAB01.==

  2. Copy the code shown here into the Processing editor window and run it to see what happens:

    int x, y, sum, diff, avg;
x = 22;
y = 15;
print("x = ");
println(x);
print("y = ");
println(y);

    Then Then add the following lines to the end of the program:

    sum = x + y;
diff = x - y;
avg = x + y / 2;

  3. ==Add code to the end of your program that prints the sum, difference and average values on separate lines in the Console area at the bottom of the Processing window. Use the style shown above to print a label, an equals sign and then the value of the variable on each line. Save the program using the name Lab01Part4 in the folder CSC108\LAB01.==

  4. Hey, wait a minute — that’s not the right average, is it? The average of two numbers can’t be bigger than the larger number!! The problem has to do with the precedence of the operators used in the expression: we need to do the addition first and then the division. Fix the code so that it calculates the average correctly.

  5. ==Add code to the end of your program that prints half of the difference between x and y on a separate line in the Console, using the same style as used for the other lines being printed. Save the program using the name Lab01Part5 in the folder CSC108\LAB01.==

  6. You may have noticed another anomaly in this program — the average of an even number and an odd number should be something.5, but there’s no .5 being printed. This is because we used int as the data type for our variables. Change the data type of all the variables to float, run the program again, and notice that this fixes the problem.

  7. In the text, move forward to Chapter 4, read the text and complete Exercises 4-1, 4-2 and 4-3. Exercise 4-1:

size(480, 120);
int y = 60;
int d = 80;
ellipse(75, y, d, d);    // Left
ellipse(175, y, d, d);   // Middle
ellipse(275, y, d, d);   // Right

Exercise 4-2:

size(480, 120);
int y = 100;
int d = 130;
ellipse(75, y, d, d);    // Left
ellipse(175, y, d, d);   // Middle
ellipse(275, y, d, d);   // Right

Exercise 4-3:

size(480, 120);
line(0, 0, width, height); // Line from (0,0) to (480, 120)
line(width, 0, 0, height); // Line from (480, 0) to (0, 120)
ellipse(width/2, height/2, 60, 60);

  1. Copy the code shown here into the Processing editor window and run it to see what happens:

    float x, y;
void setup() { size(600, 400); smooth(); x = 300; y = 200; }
void draw() { triangle(300, 200, 550, 150, 550, 250); }

  2. Replace the line inside the draw function with the following one, then run the program and notice that the drawing is the same:

    triangle(x, y, x + 250, y - 50, x + 250, y + 50);

    Why use the variables? Because if we want to move the shape so that it is drawn in a new location on the screen, you have to use variables. This will be illustrated in the rest of this lab exercise.

  3. Change the first two parameters in the triangle function call to be mouseX and mouseY, respectively. Then run the program and move the mouse around the window to see what difference that change makes. Then add this line as the first line in your draw function:

    background(204);

    Run the program and move the mouse around again. The background function call erases the window in a specific color before drawing the rest of the stuff in the draw function Pretty cool, huh?

  4. Replace the other two occurrences of x in the triangle function call with mouseX. Then replace the two y’s with mouseY and run the program.

  5. ==Change the parameters in the triangle function call so that the triangle points to the right, not to the left. The point of the triangle should still be at the mouse position. Save the program using the name Lab01Part6 in the folder CSC108\LAB01.==

  6. If you use File Explorer to browse to your CSC108\LAB01 folder, this folder should contain 6 sub-folders named LAB01Part1 through LAB01Part6, representing the programs you wrote and saved when completing this lab. To submit the lab for grading, we will convert the LAB01 folder to a .zip file and submit that to the Lab 1 dropbox in D2L. Follow these steps to turn in your work for Lab 1: Hand in your project by following these steps:

  1. Using File Explorer, browse to your CSC108 folder.

  2. Right-click on the folder named LAB01 and choose “Send To  ▶  Compressed (zipped) folder”. This will create a new file named LAB01.zip in the current folder, which is a compressed file that contains all of your Processing programs you saved for this lab activity.

  3. Use a web browser to login to D2L, and go to the CSC 108 course in your course list.

  4. Choose “Assessments”, then “Dropbox”, and then click on the link to the “Lab 1” dropbox folder. This will display the “Lab 1 Submit Files” page, and you will want to find the “Add a File” button about halfway down the page — click this button now.

  5. Click on the “Upload” button in the dialog window that appears, browse to CSC108, and select the file named “LAB01.zip”. Click the blue “Add” button.

  6. Click the blue “Submit” button. If you did this correctly, you should receive a “File submission successful” message in your browser. You will also receive an e-mail message confirming that you submitted the files to the CSC 108 LAB01 dropbox.

You will follow a similar pattern to submit all of your programming work in this course.