The project itself

Each of the following sections will contain some explanations and some code blocks contained in basic editors that you will be able to edit and run. The code will contain TODO sections with possibly additional instructions as comments.

In these code blocks you will implement some small exercises which put the theory into practice.

That way you can also immediately see the results. One solution is shown either in following subsections that expand upon these implemented parts or in the full solution to the section. The full code for each section is also accessible and will be linked at the beginning of each section, so you can pick and choose what you are interested in to do yourself.

Some helper functions can be seen here, the naming and sorting might need some work:

Some of the linked files have a few part from later parts. Don't worry about those, the main results can be found in he sections themselves.

The JSMatrix library (described in the next section) follows the usual JavaScript convention of camel case ("camelCase"). The rasterizer code uses snake case. "snake_case") as it aids readability better (and mostly because the code was originally written in C++ where that convention was used and it was a a bit annoying to convert it, sorry...). As no one else will see your code if you don't want to, feel free to use whatever you like.

The algorithms and code are not meant to be high performance. Instead, this course aims to be decently short, readable and easy to use. These metrics are of course subjective, but an effort was made...

Also, while the course uses JavaScript, nothing depends on the language and you can just implement everything in your favorite language! For example, as mentioned above, the implementation was originally in C++ (and ran a lot faster due to that...).

Now a few words about the editor!

Each editor has a number of virtual "files". You can open them with the "Open" button. Some files are read-only. These are marked with a (RO) in the title. You can open them, but you can't change the contents. When you press "Run", they will be executed from left to right.

Unless you clear your cache/local storage, either in the browser itself or via the special "Reset Cache" button in each editor, code that you have written will stay in your browser's memory, even if you close it. You have to manually save though using the "Save" button, which will save all your current files. Each editor is independently saved.

You can change the theme of an editor, which is saved globally and is applied when you reload a page. Additionally, you can enable tab indentation. This is not enabled by default as not to trap users navigating via keyboard.

Editors have basic autocompletion for general JavaScript and also the custom objects you can use in all scripts. Snippets for things like for loops also exist. Also Undo/Redo (Ctrl+z/Ctrl+y) works.

"Reset File" will reset a file to its initial state, but will not overwrite the save and you can Undo this reset operation.

Below, you can see how this will look.

The next section will cover a library that is used throughout the project to work with vectors and matrices!