Project #2 Interaction Solution



Problem: Use WebGL to implement an online program called BuildingBlocks that allows a user to build something meaningful from the following six building blocks.

  1. Red disk
  2. Green disk
  3. Blue disk
  4. Magenta square
  5. Cyan square
  6. Yellow square


The program starts with a canvas with no building blocks. A user can add, move and delete building blocks on the canvas.

  • To add a building block, a user needs to first hold down the corresponding number key. Then click the left mouse button at the target location. For example, to add a magenta square, click the left mouse button while the ‘4′ key is held down. The new building block will be centered at the cursor position at the time of clicking.
  • To move a building block, use the left mouse button to drag it.
  • To delete a building block, hold down the SHIFT key and then click the left mouse button at the building block.

Create a directory called project2 under your cs435 home directory. Move into that directory and create two files: buildingblocks.html and buildingblocks.js to complete this project.

Submission Requirements:

  • Make sure the project2 directory contain the two files: buildingblocks.html and buildingblocks.js. (Here we assume the Common directory is located in the same directory as the project2 directory, and you do not need to submit the Common directory.)

  • The title of buildingblocks.html should contain your name, CS435 or CS435, Project #2.

  • The buildingblocks.js file should contain the following information at the beginning: CS435 or CS535, Project #2, your name, a description of the program. Add other necessary comments whenever a part of the code is not obvious.

  • Compress the project2 directory into and submit the compressed file as an attachment on Blackboard.

error: Content is protected !!