15110 Fall 2012 [Touretzky/Kaynar]

Lab 9 - Thursday, November 8, 2012

CA Demonstration

Write a Ruby function that creates a window of size 320 × 320 and draws an 8 × 8 grid of 40 × 40 squares, each colored a random color of red, green or blue.

Deliverables

  1. demo.rb (CA demo)
  2. random_boxes.rb
  3. checkerboard.rb
  4. data_display.rb
  5. random_rectangles.rb (open ended)

RubyLabs Canvas

In order to draw in Ruby, you need to create a Canvas which you can do as follows:

Canvas.init(width, height, title)

where you replace width, height and title with appropriate values. The width and height are expressed in pixels and the title is a string (with no spaces).

In a window, the coordinate system is upside down from what you might expect mathematically. The x coordinates increase from left to right, but the y coordinates increase from top to bottom. So the origin (0,0) is in the top left corner of the window.

To draw a rectangle using the Canvas, you need to create a new Rectangle and supply the coordinates of the top left and bottom right corners along with additional optional parameters:

Canvas::Rectangle.new(topleft_x, topleft_y, bottomright_x, bottomright_y, optional parameter(s))

For example, to create a red square with a blue border that has a top left coordinate of (100,100) and bottom right coordinate of (110, 110), you would execute:

Canvas::Rectangle.new(100, 100, 110, 110, :fill => "red", :outline => "blue")

Activities

  1. Write a Ruby function random_boxes() that creates a window of size 320 × 320 and draws a 40 × 40 grid of 8 × 8 squares, each colored a random color from black, white, yellow, cyan, and magenta.

    Note: your results may vary since we're using a random number generator. You may, however, be able to reproduce the result above if you call srand(15110) immediately before calling your function.

  2. Write a function data_display(matrix) that takes a 4 × 4 array (matrix) as its parameter and displays a 4 × 4 grid of rectangles in a window of size 320 (width) × 240 (height) based on the data in the matrix. If the value in a matrix cell is odd, draw a yellow rectangle in its grid location in the window and if the value in a matrix cell is even, draw a blue rectangle in its grid location in the window.

    Image for matrix = [[0,2,1,3], [4,5,6,7], [9,3,5,1], [6,2,7,0]]

  3. Write a function checkerboard() that displays an 8 × 8 checkerboard pattern using red and black squares in a window of size 400 × 400. Use loops to simplify the function. There is a pattern here so that you only need one call to the Canvas::Rectangle.new function. For this problem, you can leave out the optional parameter :outline when you create the squares.

  4. [Open ended.] Draw a picture with 100 rectangles of different sizes drawn at random places in the window with random colors.

Additional Information

You may work on this lab with another student if you wish. If you do, put a comment in the program code that includes both of your names, and both of you should submit the code.