CSCI 343 Computer Graphics
College of the Holy Cross, Fall 2023
Home | | Syllabus | |
Assignments | | Lecture Notes | |
Documentation
Assignment 2Due: Thursday, September 21, in classProblem 1: Mapping onto windows A fundamental operation in a graphics system is to map a point (x,y) which lies within a clipping rectangle, to a point (xs, ys), which lies in the viewport of a window on the screen. In OpenGL, the rectangle for the clipping rectangle is defined by the function call: glOrtho2D(x_min, x_max, y_min, y_max); The viewport rectangle in OpenGL is defined by: glViewport(u, v, w, h); Here, u and v indicate the lower left corner and w and h represent the width and height, respectively, as shown in the diagram below: Find the mathematical equations that map (x,y) onto (xs, ys). That is, given the point (x, y), find the corresponding point (xs, ys) in terms of x, y, x_min, x_max, y_min, y_max, u, v, w, and h. Show your work for full credit!
Problem 2. Alquerque
The Game of AlquerqueAccording to the book, Games of the World (published by the Swiss Committee for UNICEF, Zurich, 1975): "Alquerque is the Spanish name for a board game introduced into Spain by the Moors, who ruled most of the country for five hundred years. Called el-quirkat in Arabic, the game is mentioned in the Moorish book, Katib al-Aghami, written in the tenth century, but it is known to have been played for several thousands of years in Egypt and the Middle East. There is an unfinished alquerque diagram engraved in one of the roofing slabs of the temple at Kurna, Egypt, which was built around 1400 B.C. Several versions of alquerque are described and illustrated in the great Libro de Juegos (Book of Games) of King Alfonso the Learned. One of them, the alquerque de doce, or twelve-man alquerque, closely resembles the game still played in the cafes and bodegas of Spain. It is essentially an early form of checkers: Alfonso's book says that it resembles chess, 'in that it is played with the mind.' The book also notes that the initial advantage lies with the person who has the second move, rather than the first, and that 'if the game is played by two equally knowledgeable players, the game will end in a draw.' " Alquerque is a game for two players who each have a set of twelve playing pieces, either black or white. The game is played on a board with 25 positions that are arranged in a 5 x 5 square, as shown below. At the beginning of the game, the black and white pieces are arranged on the board as follows (with green and blue instead of black and white):
The lines indicate paths along which pieces can be moved. (Note that not all diagonal paths are included.) Turns alternate between the two players. A simplified version of the rules of the game are as follows: For each turn, a piece may be moved from its current position to any adjacent empty position along the valid paths shown with lines in the above diagram. If a current player's piece is adjacent to an opponent's piece, and the space behind the opponent's piece is empty, the player's piece may jump over the opponent's piece, occupy the empty position, and remove the opponent's piece from the board. The opponent's piece is considered "captured" as in checkers, and does not return to play. The winner is the first player to capture all of his or her opponent's pieces. To illustrate the rules, consider the initial arrangement of the board, and let the positions be labelled as follows:
Suppose that the player with the green pieces is allowed to make the first move. The only valid moves at this point are to move one of the pieces in positions 7, 12, 17 or 18 into position 13. Suppose the green player chooses to move the piece from position 7, leaving the following arrangement of pieces:
According to the above rules, the player with the blue pieces then has the following options: move one of the pieces from position 3 or 8 into position 7, or jump the piece from position 19 into position 7. If the blue player chooses the last option, she could then permanently remove the green piece from position 13. Your task will be to write a JavaScript program to display the board and allow the users to make moves for the game. As extra credit, you can have your program serve as a referee for two people playing the above simplified version of the game of Alquerque. Your program should prompt each player to specify a move, and update the game board for each move made. If you write the referee code, it should check that the move is valid, keep track of the state of the gameboard, and inform the players when there is a winner. The state of the gameboard should be displayed graphically in the Drawing window, using WebGL graphics commands. Players should specify their move by clicking the left mouse button in the vicinity of appropriate locations on the gameboard display. The browser window can be used to print prompts to the current player to specify the source and destination locations of their desired move (use document.write( )). Your solution will be evaluated for programming style and correctness, as well as the quality of your graphical display. In order to help you organize your thinking, follow the following steps. (Read through all the steps before you begin, and think carefully about how you will go about each part before you start any coding). Part a.
for (i = 0; i < 5; i ++){
vertices.push(vec2(i*xdist + x, y));
vertices.push(vec2(i*xdist + x, y + boardheight));
}
You should set up the board and pieces so that you will be able to reset the pieces to their beginning states for the menu in part c to work. So you might want to have a function that initializes the states for all the positions on the board. Think ahead when setting up the pieces, so you can program the following parts more easily. For example, you might want to have an array that keeps track of the state of each position on the game board. This variable should take on one of three values depending on whether the position is occupied by player 1, player 2 or neither. Part b. Write a mouse() function that allows the user to move a piece from one position to another by clicking the left mouse button on the appropriate squares. Note that the user will have to click the mouse twice to indicate the source and destination positions. Note: On my computer, the mouse positions returned by the browser in response to a click are off by 10 pixels in both the x and y dimensions. (I think this is due to a border between the edge of the browser window and the canvas). If this is true for your computer, you will need to subtract 10 from each mouse position before converting it to the clip coordinates. You will need to use global variables to keep track of how many times the mouse has clicked, and which positions the user clicked on. If the user clicks too far outside a board position, that click should not count as a valid selection. The program should set the state of the destination position to contain the same color piece that the source position had. It should then set the source position to have no player on it. To aid me in grading this part, please have the program print a statement to the console window when the user correctly clicked on valid position for a move (i.e. the user clicked in a square). The console log should indicate which position the user clicked on. Write to the console window the following function call:
console.log("Location " + (i+1) + " selected.");
If you are not coding the referee part of this assignment, then you may allow a player to move onto an occupied position, changing the color if necessary to the color of the moved piece. The initial location of the piece that was moved should now be empty, with no piece drawn in that space. (You can do this by using a conditional to test for the empty state inside the loop that renders the pieces.) If you write your code carefully, you can make it so that clicking on a square twice will remove it from the board. This will make it so you can play the game without the automatic referee. Part c. Create a button and place it in the browser window. The button should have the text on it saying "Restart". When the user clicks on this button, it should reset the board and pieces to their starting positions and states. Note: To include both the canvas and button on the same browser window and to get different responses to mouseclicks on each of these elements, they must be separated by the <div> tag. E.g.: <div> <canvas id="gl-canvas" width="500" height="500"> Oops ... your browser doesn't support the HTML5 canvas element </canvas> </div> <div> <P> <button id = "Restart">Restart</button> </div>
Turning in this assignment
Home | | Syllabus | | Assignments | | Lecture Notes | | Documentation
Constance Royden--croyden@holycross.edu
|
