Task Instructions
This page describes how to set up a development environment, how to run the tasks, and how to submit the homework.
Keep in mind that setting up the development environment comes with significant overhead, so we recommend using the 2006 computer class PCs that already have everything ready for you (except the VSCode Extensions, which are easy for you to add).
Development Environment Setup
This is the guide on how to set up a development environment for doing JavaScript and C++ homeworks. While JS environment should work on all platforms, the C++ environment might be different. Therefore the C++ instructions are only for Windows.
Mac instructions do exist, but they do not use our CMake system. If you get it working with CMake, let us know, and we can integrate it into the tasks and update the instructions.
⟹ If you are solving the tasks on the 2006 computer class computers, you only need to install the VSCode Extensions. ⟸
We recommend you use these PCs to avoid the setup overhead and performance issues. You get 24/7 access by late September!
IDE
Both JS and C++ tasks are all done in Visual Studio Code (VSCode). We use VSCode because it is industry standard, but it also has useful extensions that make the development much easier.
VSCode Extensions
There are two main extensions that we need. For JavaScript tasks, we require the Live Server extension. This extension allows the user to start a local HTTP server, which is the environment where our task submissions execute. For C++ tasks, we need the C/C++ Extension Pack. This pack of extension contains utilities for C/C++ language as well as CMake, which is the build script system we use to configure, compile, and run our code.
Another useful extension is the Shader languages support for VS Code. This extension has the syntax highlighting for OpenGL Shading Language, which we will use in many Basic I and II tasks.
| Extension | Branch | Description |
|---|---|---|
| Live Server | JS | For running the JavaScript code in a very simple local web server. |
| C/C++ Extension Pack | C++ | For developing C/C++ and using CMake in VS Code. |
| Shader languages support for VS Code | Both | For GLSL syntax highlighting and autocomplete. |
▸ C++ Setup
This section has information about C++ specific requirements. For C++, we also need a compiler and dependency manager. Note that you only need to follow these instructions if you wish to solve the tasks on your own computer. These steps have already been done on the 2006 lab PCs.
vcpkg
Download vcpkg master branch. Run the bootstrap-vcpkg.bat (Windows) by double clicking on it or bootstrap-vcpkg.sh (Linux). Then, add the path to the downloaded directory to VCPKG_ROOT environment variable. On Windows, it is recommended to add it to a system environment variable, as opposed to user environment variable. To use vcpkg command line tools, add the VCPKG_ROOT to the PATH as well.
See how to set or change environment variables in windows and in linux (the .bashrc approach).
If the configuration phase in VSCode fails, close the VSCode window and start again. Since environement variables are loaded on the start of the program, the new variables are not seen in already started processes.
Compiler and CMake
Windows
Install Visual Studio 2022 (version 17+). Note that we need to add some individual components as well, which are shown in the picture below:
You can find them in Visual Studio Installer by going to the "Individual Components" page and then searching for these components. The version of the MSVC has to match your installed compiler version.
Linux
Install CMake. Note that the CMake has to be at least version 3.27, so the apt package might not be modern enough. Also note that the "platform" preset inside the CMakePresets.json has to inherit from "unix", not from "win".
Make sure you have GCC and G++ installed.
How Do I Run My Program?
First, we need to open the homework task directory in VSCode. This can be done in two different ways.
| 
|
| In the unpacked directory: 1) Open the context menu (right click) 2) Press Open with Code. The context menu option is only available if you checked the context menu checkbox when installing VSCode. If you did not, run the installer again. | In VSCode: 1) Press File → Open Folder 2) Browse to the unpacked directory |
▸ JavaScript
To run a JavaScript task, we need to create an HTTP server. This can be easily done if you have installed the Live Server extension by pressing this button in the bottom-right corner of VSCode:
When the server has been opened, the website should automatically open in your browser and you can see the output of your JavaScript task. If the website does not open automatically, you can go to it yourself by typing in the browser localhost:X, where X is the server port. You can see the port of the server on the Live Server button. For example, if the button's text is "Port: 5500", you write:
▸ C++
For C++, we need to configure the project, then compile it, and finally run it. If you have installed the necessary compilers and VSCode extensions, then the configuration stage happens when you open the VSCode in the task directory. This prompt should appear:
Select "Homework Task". If the prompt did not appear or you picked the wrong configuration, you can open the prompt again by first opening CMake sidebar:
And then press the small pencil button next to the selected "Configuration":
When you have selected the "Homework Task" configuration, the CMake should start downloading and installing all the dependencies that might be needed for the task. If it's the first time that a dependency is installed, it might take quite a long time. You can see if the configuration is in process when there is a loading icon next to these buttons in the bottom-left corner of the VSCode:
After the configuration is over, the buttons become usable. The first button is for building a project. This compiles the code but does not try to execute it. The second button will execute the program, but in debug mode. The final button launches the program. If there are changes to code, the debug and launch button will compile the code automatically before executing the program.
Submission
To submit a solution, create an archive (.zip, .rar, .7z) with all the files and directories of the task. If it exists, you should exclude the build directory, since we will compile the code ourselves when grading. This reduces the archive size significantly!
In CGLearn, make sure to mark the difficulty level and the time spent on the task as well. Finally, if there is a question in the task description, do not forget to answer it in the text box.