The above link allows you to play a dot and cross product quiz which I created to help myself and others revise for an upcoming maths exam. The following blog post provides the steps and code taken to achieve this.
Note: Sadly Unity’s WebGL settings do not currently support mobile but will look to update this when it is available.
What are Dot and Cross Products?
I provided an explanation and tutorial on how to calculate dot and cross products in an earlier blog post:
The Initial C# Script
To begin, I created a public class named “crossProduct“, in which I identified two private variables in which the 3D vectors “a” and “b” would be stored.
I then created the function “genQuestion” which would be responsible for generating two random vectors once the “Enter” key has been pressed. The “random.range” section ensures that each co-ordinate generated is always between -5 and 5 to avoid any unnecessarily difficult or higher numbered sums. These are then stored as variables “a” and “b” then outputted to the console using the “Debug.Log” command.
I then created a second function named “genAnswer” which is responsible of calculating the dot and cross product of the newly created vectors. The dot and cross product are calculated using “Vector3.Dot” and “Vector3.Cross” and using variables “a” and “b” as the parameters. The resulting answers are again outputted to the console command using “Debug.Log“.
Finally, I placed my newly created “genQuestion” and “genAnswer” functions with the “Update” to constantly check whether the Enter or Space key has been pressed to initiate them.
The final outputs to the console commands are as follows:
The Final C# Script
After completing the initial script, I wanted to amend it to render the relevant text in view of the in-game camera. As a result, this would create an application which is playable by the audience.
Ensuring the “crossProduct” script is applied to the game camera, I also added a “Text Mesh” component responsible for rendering the text on screen. I also adjust the settings to suit my needs including:
- Offset Z – The space between the render and the camera
- Font Size / Style
- Font Colour
The final settings used are those shown in the image above. However, I have left the “Text” option empty as this is where the code will dynamically change the text rendered on screen.
Adding the above code within the “genQuestion” function accesses the “text” field of the “Text Mesh” component and inputs the desired text, including the vector variables and allows it to be seen on screen.
Note: “r/n/” used with the string of text adds a line break, moving any following text to the line below.
I then added similar script under the “genAnswer” to replace the question currently displayed in the text field with the answer, therefore changing the text displayed on screen.
To finish the code I created a function named “closeApp” which closed the application once the “Escape” key was pressed. This allows the audience to exit the program if full-screen mode has been applied.
Finally, I created a Text object containing instructions of what keys to use for the player to use the application. This static text is always view-able by the player and is positioned in the top-left hand corner of the screen.
The final application is playable here:
The final C# script is shown below: