The goal of this assignment is to get you accustomed to things that we will use throughout the term. There will be a small amount of coding. While this assignment is optional, it is there for you to help avoid losing marks on future assignments for reasons that have nothing to do with understanding the material. Completing this assignment will help you avoid making such mistakes when it matters. If you hand it in, it will be marked as usual, but it will not count toward your final grade. You will also get some direct experience with the kind of code you'll be writing throughout the term. Unless you are confident that you can catch up before you are working on actual assignments, work through this warm-up assignment!

Note that it is possible that we have errors in the code we are distributing to you this term. This course is new, so things might not be as polished as we wanted. Your feedback will help us iron out any problems before they derail future assignments. The instructions in this assignment are more explicit than in the remaining assignments. In the other assignments, the following steps will not be given in so much detail.

Step 0: Course information

Get acquainted with the information associated with this course. Read the course web page and ensure your responsibilities are clear. Read the additional notes regarding assignments before completing this assignment or submitting anything.

Step 1: Piazza

You will need to enroll on the Piazza page for this course to ask questions, help your fellow students, and keep up with timely announcements. Look at the LEARN web page to find the registration link. Please register as soon as possible.

Step 2: Framework

Traditional courses in computer graphics typically use OpenGL from scratch, where students have to go through specifics of APIs. Some modern courses use a high-level graphics framework (e.g., Unity, Unreal Engine, three.js), where students still have to go through specifics of a chosen framework. For this course, we seek for something just enough to cover basic topics in computer graphics, without needing much of specifics. To this end, we are using:

• JavaScript
• WebGL
• TWGL: A Tiny WebGL helper Library, a helper library to simplify WebGL coding

We expect you do not need to look up specifics of TWGL, though we expect you learn to code in GLSL and get familiar with some WebGL specifics. One nice feature of JavaScript and WebGL is that you can use any modern browser on virtually any computer today to run your code without compilation. You can immediately see the result of your code just by opening your program on a browser. Some web browsers such as Chrome and Firefox have builtin features that allow you to develop your code while running it. We will not go into details of the setup of coding environment as things depend highly on your preference and it is part of your task in this assignment to figure those out. The absolute minimum you need are a web browser and an editor (and a simple web server for local file access - see below). To get started, download the base code from Piazza.

Step 3: Run c_warmup.html from a local web server

You may think you can just open c_warmup.html and run it. Indeed, it will probably run, but there is a problem. WebGL does not allow you to access local files directly (if you want to know why, search "CORS errors" - basically files and your program need to be on the same thing), which is needed in later assignments. This constraint is usually not an issue since WebGL code is supposed to access only those remote files on servers, not local files on your computer. However, in this course and while you are developing your own WebGL code, you may still want to access local files (e.g., images) to test your code locally. It will be too much work to upload your code to a web server and access it through HTTP when you are actively working on your code.

To resolve this issue, you will need to run a local web server such as Servez so that you can access local files via HTTP. If you are fine with using Servez, it is just as simple as you install, run, and start it. Run your local web server from the directory (folder) where you put the code using the port 8080. Setting up such a local server should be easy, but be sure to set it up properly. You do not need to enable any global (i.e., remote) or HTTPS access - just being able to HTTP access it locally is sufficient.

Once your local web server is up and running, open http://localhost:8080/c_warmup.html in your browser to run it. If your server is running properly, you should also be able to click this link to run your code. If you see an error like "this site cannot be reached", then your web server is not properly running. If the code is running properly should be able to see white noise. Let us know immediately if you don't see anything since that might imply some incompatibility issues in your environment or your web server is not running properly. Note that the base code is loading TWGL from a remote server, so you still need internet connection. If you don't like that, you can download TWGL locally and load it from there while working on your code.

Step 4: Modify the code

Modify void main() in script id="fragDraw" to do something different. The commented-out line provides another example besides white noise for your reference. Note that just commenting in this line does not count as "doing something different". Basically, write a function that takes gl_FragCoord and other uniform variables (i.e., constant variables in GLSL) to fill in gl_FragColor (i.e., the output pixel value at gl_FragCoord). You may want to read through the entire code line by line to understand what is going on.

Step 5: README

For programming assignments, you will be required to add a description about your code that is named README as a text file. Please name it either README.md or README.txt when submitting it. Include README in your submission in addition to your code. Your README should contain two sections:

• Tasks: Give short descriptions on whether each task is completed. If you wrote code that you did not get completed, you might request partial credit here. Read the additional notes for details regarding how to request partial credit.
• Specifications: This part is not a restatement of the assignment specification. It should include any details or assumptions you made that were not included in the assignment. Tell us about any extra you added or any additional files you may have generated. If you have made any assumptions about the assignment specification or the tasks, state and justify them here. If you don't have any such thing (which should be usually the case), this part can be empty.

Step 6: Submitting your work

Upload c_warmup.html and README.md (or README.txt) to LEARN. Do NOT pack them into a single .zip file. Do NOT upload any other files (e.g., TWGL files) or folders unless you have extended your code to use such files (which you normally don't, except for certain topics for the project assignment).

Step 7: Tasks

Check if you have completed the following tasks and document that what you have done in README:

1. Registered on the Piazza page.
2. Obtained the base code package.
3. Set up your own coding environment, including a local web server.
4. The correct files have been submitted to LEARN.
5. The program draws something other than the default pattern.