Rock, Paper & Scissors with Image Classification

Train a model using Teachable Machine

1. Go to the Teachable Machine site at https://teachablemachine.withgoogle.com/
2. Start the project by clicking “Image Project”
3. Record live hand gestures with the respective webcam. (or import the project.tm provided on Blackboard by clicking “Open an existing project from a file”.) Click “Train Model” after setting up the required classes. DO NOT switch to other tabs but stay on the same page during the process!
4. Test your model by uploading a “file” or using the webcam to show respective hand gestures after the model is trained.
5. Click “Export Model” and “Upload my model” to get the shareable link of the model. Save the link to MS Word or Notepad.
6. Click the top left menu bar and click "Download Project as file" to save your project. Hint: You may also try to develop a “Pose Project” to classify “Paper, Scissor, and Rock”. You may compare the accuracy and performance between “Image Project” and “Pose Project” concerning this particular task.

Create a "Rock, Paper & Scissors" game on Scratch

Simple Version(with basic game logic)

1. Go to Scratch at https://mitmedialab.github.io/prg-extension-boilerplate/create/.
2. Rename the sprite to “Player”
3. Add “Teachable Machine” extension
4. Paste your model link
5. Create Variables
6. Add codes blocks as shown below to this “Player” sprite.
7. Add “Computer” sprite as your enemy
8. Add code blocks to “Computer Sprite” as shown below
9. Authorize browser to use the camera and play a “Paper, Scissor, and Rock” game with computer.
10. Click File and then click “Save to your computer” to save your current project.
11. Record a video for a complete demonstration.

Optional Exercise

Full Version(with clear UI design and development) Go to Scratch at https://mitmedialab.github.io/prg-extension-boilerplate/create/.

1. Click “Add Extension” and choose “Teachable Machine” to add related code blocks to the Code panel.
2. You need 4 sprites for our project: “Player”, “Computer”, “Result”, and “Universal” Go to “Choose a Sprite” and click “Paint”. Then rename the sprite as “Universal”.
3. Go back to “Codes”, then paste the previous exported Teachable Machine link to “Use model…” code block.
4. Add the code blocks according to the photo below.
5. Go back to “Code” and add the code blocks according to the photo below.
6. Go to “Choose a Sprite” and click “Paint”. Then rename the sprite as “Result”.
7. Click “T” to add new text which displays “Player Win!” and rename the costume as “playerwin”. You may adjust the text according to your preference.
8. Right-click the costume to duplicate the costume twice. Amend the text as “Computer Win!” and “ Draw!”, then rename the costumes as “computerwin” and “draw” respectively.
9. Go back to “Code” and add the code blocks according to the photo below.
10. Go to “Choose a Sprite” and click “Upload Sprite”. Then upload paper.png (provided on Blackboard).
11. Click “Costumes”, go to “Choose a Costume” and select “Upload Costume”. Then upload rock.png and scissors.png (provided on Blackboard).
12. Click the “Player” sprite, then add the code blocks according to the photo below.
13. Go back to “Code” and change the sprite name to “Player”. Then right-click the “Player” sprite to duplicate the sprite and rename the copied sprite as “Computer”.
14. You may flip the sprite of computer horizontally in “Costume”
15. Click the “Computer” sprite, then add the code blocks according to the photo below.
16. You may try out the game now!