COM3037- Homework 1 Solved

Important Note: Students are expected to complete the assignments using the shader-based graphical programming approach and WebGL. Solutions that use fixed-function style or other graphics libraries (including Javascript graphics libraries) will get zero. Solutions that include code sections such as glBegin-glEnd, that do not use the "webgl" context of a vertex, fragment shader, or canvas element also graded as zero.

Tasks: We talked about some simple sample programs in the lessons and there is information about them on the slides on the lesson page. You should understand and be able to run these examples before you begin this assignment.

Your task in this assignment is to write a WebGL application (HTML and Javascript codes) that displays the first letter of your first name and the last letter (uppercase) of your last name. Simple, right? However, there is one condition! You should only print letters using geometric primitives (dots, lines, and triangles). For example, the first letter of my first name is "M" and the last letter of my last name is "L" and one way to visualize them could be as in Figure 1.

Figure 1. General structure of the letters.

Here, each rectangle can be drawn using two triangles, and the round as a large point. In the example above I wanted to show how letters can be divided into primitives. The actual output should not be shown like this, but with colored figures as in Figure 2.

Figure 2. Colored letters.

To Do:

In your program, by using GUI elements and through keyboard and mouse, user should be able to,change the color for the letters;
reposition (translate), rotate, or scale the letters together or separately.
You are free to design how and for what the user can use the keyboard and mouse but there has to be at least some interaction with both of them. Also your choices should be natural and easy to use.
A report of at least 2 pages describing the program you have written in detail should be prepared (Font: Times New Roman, 12 Points). In the report, which of the functions described above (drawing letters, changing color, relocating, rotating and scaling, using the keyboard and mouse) works in the program should be specified in a table, the codes of the working parts should be shown and explained in the report.
Notes:

Your program should look nice and easy to use.
In this assignment, the expectation is that you draw 2D figures. However, you can have 3D letters drawn if you want (you need to show different faces with different colors to make the 3D structure visible).
You should prepare your code as an html (Student_No.html) and a javascript (Student_No.js) file as described in labs.
You should use the javascript files (MV.js, initShaders.js and webgl-utils.js) found in the support page of the textbook and used in the lab before. HOWEVER, after you download these files, you should put them in a folder you call common. You should also call them in the html file as in Figure 3. (Attention: To call it this way, the common folder must be in the parent folder of your html and javascript files.)
 

Figure 3. The call of the support codes in the html file.

The title, student number, name and surname information must be placed at the top of your report. When uploading your report to the e-campus, you should name it as pdf.