CSc 101: Section 9 – Program Style, plus combining if and for

About half of today’s questions are style-related. In the rest of them, you’ll need to exercise combining if-statements and for-loops to do useful programing things.

Problem 1

Start by just creating a simpel 300x300 pixel canvas that resembles the one pictured. You can easily accomplish this with a few shapes.


Problem 2

Using if-statements, modify the program from the last problem so that the rectangle becomes darker when the mouse os over-top of it.


Problem 3

In this problem, you'll draw a 5x5 grid of creen squares, using a nested for-loop. Once you have the grid drawing on its own, modify the code so that the column that the mouse is currently in turns teal instead of green, as is shown below. You'll need to use if-statements inside of your for loops to do this.


Problem 4

In this problem, you'll build off of the last one. In addition to highlighting the column that the mouse is currently in with a teal color, You will also highlight the current row with red. Notice how the red and teal columns move along with the mouse. Also note that the tile at which the row and column intersect is red, not teal.


Problem 5

In this problem, you will draw a 5x5 grid of small circles *using nested for-loops*. However, you should make the grid follow the mouse around the screen. You can do this by using the `mouseX` and `mouseY` variables (plus some simple math) to initialize the loop variable, and set the loop limit. See the animation to the left.


Problem 6

(A) First, take a look at the below code. Without running it, modifying it, or re-formatting it in any way, try to figure out what it does. Take a few minutes.

void
setup () 
  {
  size(500, 200); }
int faceX = 0;
int faceY = 100;
boolean moveRight = true;
void draw()   { background(100, 150, 100);
  if (moveRight) {
faceX += 3; }else{
    faceX -= 3;  }
  if (faceX > 500) { moveRight = ! moveRight; }
  if (faceX    <    0) { moveRight = ! moveRight; }
  
  fill( 100  ,  100, 100); ellipse(faceX, faceY, 100, 100);
  fill(50, 255, 50); ellipse(faceX-20, faceY-20, 20, 20);
  ellipse(faceX+20, faceY-20, 20, 20); }

(B) Now, copy the code into processing. Without running it, spend some time working on the formatting. Don’t just use the Processing auto-formatter. Manually attempt to format this code according to all of the techniques we’ve discussed in class. Now, is it easier to figure out what it will do?

(C) Run it! Does it do what you predicted at step (A) or (B) ?

Problem 7

Repeat steps (A), (B), and (C) from problem one, but start with this code instead:

int PPW = 500;
    int __yh = 300;
  
void setup  ( )  { background(   200,     100,50);
 size(500,  500 ) ; }
int r23 =  500  ;

void draw()  {
    strokeWeight(PPW - 495);
  int bh3 = 40;
 for(int XKh = 20; XKh < r23; XKh += 40)
 {      int ay1 = 30;
     ellipse(XKh, ay1, 
ay1, bh3);}
 for(   int AB__5 = 100; 
     AB__5 < 400;
     AB__5 += 40) {
    float A77_ = AB__5 + 1;
  ellipse(AB__5, A77_, 30, 30);
  }
  int hhh$ = 450;
   for(int XKh = 20;  XKh < r23; XKh += 40) {      
         int ay1 = 30;
ellipse(XKh, hhh$, ay1, bh3); }
   }

Download Solutions