Try to guess what the instructions would be for the following image.

Example

exercise_1_4

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Exercise 1-4: Try to guess what the instructions would be for the following screenshot.

size(200,200);
background(255);
stroke(0);
fill(0);
rect(0,0,100,100);
fill(150);
rect(100,100,100,100);
  • Joel Wright

    I understand the dimension parameters for the upper left square (rect), but it seems like the lower right should be:

    rect(100, 100, 200, 200);

    I know I’m wrong because I loaded the code and it draws exactly as you have laid it out:

    rect(100,100,100,100);

    What did I miss?

    Best Regards

  • admin

    The rectangle is defined by:

    (top left x, top left y, width, height)

    your code would be correct if you used rectMode(CORNERS), which would define the rectangle by

    (top left x, top left y, bottom right x, bottom right y)

    For more: http://www.processing.org/reference/rectMode_.html

  • Brittany

    Is your answer missing the stroke for the grey rectangle?

    Shouldn’t it read:

    size(200,200);
    background(255);
    stroke(0);
    fill(0);
    rect(0,0,100,100);
    storke(0);
    fill(150);
    rect(100,100,100,100);

  • http://www.learningprocessing.com Daniel Shiffman

    @Brittany. This is a useful comment. It’s good practice to specify the stroke() and fill() for every shape. In this case, the result is identical b/c the earlier call to stroke(0) will apply to all shapes after it.