Week 3 : Quiz

1. Consider a grading system where numbers are turned into letters. Fill in the blanks in the following code to complete the boolean expression.
 
var grade = random(0, 100);

if (grade>=90) {
  text("Grade: A", 10, 50);
} else if (grade>=80) {
  text("Grade: B", 10, 50);
} else if (grade>=70) {
  text("Grade: C", 10, 50);
} else if (grade>=60) {
  text("Grade: D", 10, 50);
} else {
  text("You Failed!", 10, 50);
}
 
2. Move a rectangle across a window by incrementing a variable. Start the shape at x coordinate 0 and use an if statement to have it stop at coordinate 100. Rewrite the sketch to use constrain() instead of the if statement. Fill in the missing code.
// Rectangle starts at location x
var leftwall = 0;
var rightwall = 100;

function setup() {
  createCanvas(200, 200);
}

function draw() {
  background(255);
  
  var xc = constrain(mouseX, leftwall, rightwall);
  
  // Display object
  fill(0);
  rect(xc, 100, 20, 20)

}
3. Write a program that implements the above rollover. In other words, if the mouse is over a rectangle, the rectangle changes color. Here is some code to get you started. (How might you do this for a circle?)
var x = 50;
var y = 50;
var w = 100;
var h = 75;

function setup() {
  createCanvas(200, 200);
}
function draw() {
  background(140);

  stroke(0);

  if (mouseX>=50 && mouseX<=150 && mouseY>=50 && mouseY<=125) {
    fill(0);
  } else {
    fill(255);
  }

  rect(x, y, w, h);
}

4. Recreate the above sketch so that the squares fade from white to black when the mouse leaves their area. Hint: you need four variables, one for each rectangle’s color.
// 4 rectangles 
var bright1 = 0;
var bright2 = 0;
var bright3 = 0;
var bright4 = 0;

function setup(){
  createCanvas(320,240);
}

function draw(){
  //events occuring 
  if (mouseX < 160 && mouseY < 120){ bright1 = 255; } else if (mouseX > 160 && mouseY < 120){
    bright2 = 255;
  } else if (mouseX < 160 && mouseY > 120){
    bright3 = 255;
  } else if (mouseX > 160 && mouseY > 120){
    bright4 = 255;
  }
  
  //fade out 
  bright1 = bright1-2;
  bright2 = bright2-2;
  bright3 = bright3-2;
  bright4 = bright4-2;
  
  //rectangles
  fill(bright1);
  rect(0,0,160,120);
  fill(bright2);
  rect(160,0,160,120);
  fill(bright3);
  rect(0,120,160,120);
  fill(bright4);
  rect(160,120,160,120);
  
  //line
  stroke(255);
  line(0,120,160,120);
  line(160,0,160,120);
}

5. Recreate the above image with a for loop.

6.  Recreate the above image with a nested loop.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top