CM2030 – Graphics Programming

Task/steps

1.  Define your variables for the table, balls and the cue. Store the balls in appropriate arrays

2.  Draw the snooker table in the middle of the canvas using the correct colours, pockets and lines as described above

3.  Draw the balls in three modes a) starting positions using keystroke “1” , b) random positions (reds only) using keystroke “2” , c) random positions (reds and coloured balls) using keystroke “3” . This excludes the cue ball

4.  Give all balls the necessary restitution (for bouncing) and friction (for slowing down). You are expected to use matter.js

5.  Draw the cue. Here you have a few options: use the mouse, keyboard or a combination of them to draw and manipulate the cue so you can hit the cue ball. Top marks will be awarded when using both mouse and key interaction. Adjust the speed of the cue i.e. you don’t want your cue to hit very hard and through the balls outside the table. Zero points if cue is acting as an elastic band.

6.  The cue ball is inserted (in the “D” zone) using human interaction as above i.e. use the right combination of key/mouse etc. Zero points if cue ball already in place at start of the game without user interaction or outside the “D” .

7.  Cushions should also have the necessary physics properties for bouncing (i.e. restitution) the balls (different from the ones the balls have). You are expected to use matter.js

8.  When a red ball is in the pocket it should be removed from the array

9.  Define a function for collision detection to prompt the user of the type of impact e.g. cue-red, cue-colour, cue-cushion. The function should work only for collisions of the cue ball

Gaming aspects

1.  When the cue ball is in the pocket it should be given back to the player (run step 6 again). A potted cue ball can only be placed back inside the "D" zone

2.  If a coloured ball is potted, it should be re-spotted on its designated spot on the table

3.  If two consecutive coloured balls fall in the pocket then notify the user of this mistake

Coding style

1.  Code presentation: use appropriate syntax, comments, consistent indentation and redundant code

2.  Code competency: use of object orientation, code reusability, use of functions, variables global vs local

Extension

Since this is a creative module, we would like to give more marks for implementing further ideas. Also, you should write some words about it in the commentary (see next paragraph). Please note that we will award marks for the uniqueness of your extension and how technically challenging it appears to have been. Please note that we will not award any marks if you decide to develop the snooker app with scoring as this is not a unique extension. Try something novel or innovative that has not been seen in snooker gaming before. The extension is worth 20% of your mark.

Commentary

Explain the app design: e.g. why you used a mouse-based only cue function - how does it work? The  report quality  (i.e.  language) will  also  be  assessed. Also discuss your extension and why it is a unique idea. Be precise and deliver the information within 500 words. Include this in your main .js file.

Video demo

Demonstrate your work using a video. Verbally go through all functionalities and your development decisions. More specifically your demo should include:

•   the 3 modes as discussed in step 3 using 1,2,3 keystrokes

•   scenario: if cue ball is potted is then returned to user

•   scenario: if a coloured ball is potted it should be returned to its designated spot

•   scenario: error prompts when two coloured balls are potted

• scenario: collision detection of cue ball: cue-red, cue-colour, cue-cushion

Also talk about your extension. Always have the console window open so any behaviour is recorded. Use OBS Studio or similar software and not your mobile phone and make sure you talk through your app during the demo. We will give zero points to this question if console is not shown or you are using your mobile phone to record the demo. The video should be up to 5 minutes long.

General information

You should complete this work using the libs shown in the module. Do not use external code for this assignment. All your code and commentary will be checked for plagiarism/AI generation.

Submission requirements

1.   Compress all your code in .ZIP format and upload it in the first prompt

2.   Upload the video demo in .mp4 format in the second prompt

3.   Use alternative video submission link to upload the video demo to YouTube or similar, then submit the URL only in the third prompt