This repository contains supporting code for the lectures MaGrCGGe (MKB2) and STEM1 (GMB) in the summer term 2024

The code has been developed and demonstrated using Visual Studio Code. Settings and extension recommendations are committed. Make yourself familiar with the terminal in VS Code.

Open myP5arrow/index.html using the live server extension. You can draw two arrows and display their sum or difference.

Open myP5arrowDot/index.html using the live server extension. You can draw two arrows and display a projection of one onto another that uses the dot product.

Open index.html using the live server extension. Change the drawStuff() method in main.js in order to experiment with vectors and matrices in 2D. The implementation of the mathematical functions (add, scale, ...) is done in math.js.

Open rotation.html using the live server extension. Move the slider to rotate the image. Below the image, the rotation matrix is shown, once with numbers and once with sine and cosine of the rotation angle.

The code is based on the three.js hello world application, created by following this installation guide. In order to use the code Node.js needs to be installed. You can check if it is already installed by typing:

node --version

into the terminal. Then install three.js and vite via npm as recommended by three.js by typing:

npm install 

(The package.json is already committed so that this command is enough.)

From your terminal, go to the camerasThreeJS subfolder and run vite:

cd camerasThreeJS
npx vite

This starts a local vite server. If everything went well, you'll see a URL like http://localhost:5173 appear in your terminal, and can open that URL to see your web application. Every time the code is changed and saved, the page is reloaded automatically. You can stop the server by pressing Ctrl-C in the terminal.

There are two examples in the camerasThreeJS folder:

camerasThreeJS/index.html calls the main.js script and renders a cube either in orthographic or perspective projection.

The application renders a colored cube on the screen with a fixed size of 1000 by 1000 pixels using a perspective camera. There are the following interactions possible:

• Orbit controls to change the camera. You can rotate the cube with the left mouse button. Note that mathematically the camera is orbiting the cube. You can translate the camera by holding the shift key while clicking the left mouse button and moving the mouse. It is also possible to zoom with the mouse wheel.
• Pressing 'o' switches to an orthographic camera.
• Pressing 'p' switches to an perspective camera.
• Pressing 'f' switches between the fixed screen size and window screen size.
• Pressing 'q' starts and stops a rotation of the cube. For most of those interactions the corresponding transformation matrix is printed on the console. Open your browsers developer tools (usually F12) to see the matrix values.

The code is demonstrated in the lecture in order to explain how the projection matrices for both orthographic and perspective cameras are defined. It is highly recommended to change the code in order to understand the topic. Here are the most important lines of code listed:

• Change the screen size in line 4 if your monitor resp. browser window is not large enough to display 1000 by 1000 pixels.
• The camera parameters are defined in lines 12ff.
  • The values for left, right, top, bottom, near and far resp. aspect and fovy are set as numbers that makes it easy to calculate during the lecture.
  • Note that the camera position and orientation is set in the function setupCamera() to z=2 so that the cube object which is placed in the origin can be seen. The camera parameter rotation is set to (0,0,0) which is the default setting and makes the camera "look" towards the negative z-axis.
• In the lines 97ff the key events are handled.
• In line 83 the animation loop is called and the cube is rotated if the doAnimate variable is true.
• In line 71 the function printMatrix(matrix) is defined which prints out matrix values on the console. Note that three.js internally stores matrices in column-major order.

The second example is inspired from the three.js WebGL camera example. After running npx vite navgiate to webgl_camera.html (check the port, if this link does not work).

The application shows a side by side comparison of the rendered image (left) and how the camera space is defined (right). The scene can also be changed with the Orbit controls and you can switch between orthographic and perspective camera using the keys o and p as in the other example.

Here the JavaScript code is embedded in the html file. This file also refers to the CSS file main.css so that the layout is a bit nicer.