VU Graphics

Lab 1a

2D Transformations and Interactions - 2D Tetris

Due: Sunday, March 25th 2018, 23:55

Start Early!!!

Individual Effort:: No team participation is really encouraged in the case of the homework or the labs.
You're are not allowed to use any libraries or extra code except gl-matrix, webgl-utils.js and some helper functions in order to initialize WebGL / load shaders. Especially Three.js is not allowed! If you're not sure or want to use some library, ask the teaching assistant first.

Late Submission:
Don't get behind in the lab assignments - always start early!
In this course you will have a total of 4 (four) grace days that you can distribute however you like. See here for more information on grace days.

Objectives:

To understand the development of graphics programs.
To understand transformations.
To investigate basic interactive programming.
To create a simple user interface.
To become closely familiar with the WebGL rendering pipeline.
To become experts in debugging graphics code.
To have fun.

Do the following before you proceed:

Make sure you have read and understood the background and became familiar with the working environment that you should have gotten to know in Lab 0.
You have a fridge full of nutritious food.

Goal:

The goal of this lab is to implement a first graphics program and learn how to handle geometry, rotation as well as translation, and user interaction. Most of the concepts are laid out in the book as well as in class including example programs.

Tasks:

Follow this guideline step-by-step, but be sure to read the overall text before you start. (So you can make some design decisions before you start, reading further steps in Assignments 1b and 3 will also help you in choosing the right structure for you code.) Make sure that you thoroughly test your program after each step so that you can find bugs easier and quicker. It's possible to solve the entire task in 2D, but it'll make future work easier for you to think about how to design the game to make an extension to 3D as easy as possible.

(15%) Set up a drawing window and draw a simple box
Set up a basic WebGL program, which initializes the drawing window.

(25%) Draw your first block
Define two primitives - one made of 2x2 blocks (or units) and one made of 1x4 blocks. Draw these 2 objects at arbitrary places on the screen. Assign a random color to each object. Make the size of a block (also called 'unit') a user defined variable, which we'll need for the tasks below. Basically if you have one pixel per block, you will only see a very tiny object. If you have 10 pixels per block (that is meant per one side of the block, hence the block would have 10^2 = 100 pixels really), things would be magnified.

(60%) Add simple user interaction and animations
Respond to user interaction from the keyboard. Implement the following:

(10%) "<-" or "a": move the object drawn one unit to the left
(10%) "->" or "d": move the object drawn one unit to the right
(10%) "/\" or "w": move the object drawn one unit up
(10%) "\/" or "s": move the object drawn one unit down
(10%) "1" or "8": rotate the object drawn 90 degrees counterclockwise
(10%) "3" or "0": rotate the object drawn 90 degrees clockwise

Animate the transformations and make sure to make them frame rate independent. We want smooth transitions (which means you really 'see' the intermediate steps when a block is rotating).

Extra Credit (max 7%)

(2%) Background image
Replace the boring black background with any image you would like to. This could be a landscape, a geometric pattern or anything else you would like to have there.

(2%) Multiple colors
Assign some pattern of multiple colors to the blocks to make them look more beautiful. We would like to see a creative idea here.

(3%) Tetris shapes
Instead of the boring block add more complex Shapes as you can usually find for tetris. You might want to think of T-shaped, L-shaped objects or something stairlike.

Hints

Do not write all your code in one big file. Be as modular as you can.
Keep in mind what you will need for assignment 1b which directly follows this one.
Keep in mind that you can possibly reuse many parts of this assignment for assignment 3. This might be easier if your tetris blocks are already in 3D instead of being just 2D shapes!

Submission

Please submit all files required by your program in one zip file.
Be sure to submit any comments or remarks in a 'readme.txt' file!
Your submission should follow this naming conventionn: <student number>_<surname>_lab1a.zip
Be sure to double check your final submission by unzipping it in another directory on a computer in the PC LAB and testing it. (Especially for last minute submissions.) A project that doesn't run will not receive any points.
Submit your files on Moodle.

Grading Criteria

Grading the labs will be based on the following:

80%: Correctness and adherence to assignment specification.
10%: Readability and structure of code, use of comments, indentation, etc.
5%: Efficiency and speed (only an issue if its very inefficient)
5%: Adherence to lab procedures (submitting, naming conventions, etc)

Last modified: February 28, 2018

Lukas Herzberger / lukas DOT herzberger AT univie DOT ac DOT at