This was in the lowest of priorities in the list of things to complete. But since most of the code is done up, i was able to spend some time to work on this.
The current animation for the fire being extinguished is it literally disappearing from the screen after the fire is successfully extinguished. While that works, i had feedback that since there isn’t any kind of response when the particles are sprayed over the fire, people just thought the game is broken.
Screen Recording 2024-04-26 at 11.30.41 PM.mov
In this way, at least the fire gradually shrinks in size. Emulating that of a dying fire. This will serve as the visual feedback to show that they are doing the actions correctly as opposed to it just disappearing from the face of the earth suddenly.
I also added a start page to show the simple instructions on how to extinguish the fire. Mainly only the clenching hands part. I found that most people were able to figure out the interaction for extinguishing the fire which is to hover your hands below the flame. Such that the particles were shooting on the fire.
I am totally not inspired by my favourite childhood game. Don’t look at the right image.
https://editor.p5js.org/Dames19/sketches/7yM2hTU6g
My code was truly a mess at the end of it. I actually fed ChatGPT my entire code. I had to first affirm chatGPT that it is the software engineer in the world and that it will write its best code ever.
I guessed that worked. Because the code was a lot more organised and nothing broke. If you’re reading this. You should provide positive affirmation to chatGPT to. It pays to be nice.
These are some of the variables i created for this game and a short description to help with understandability.
| Variable | Type | Description |
|---|---|---|
video |
Object | Capture video from the webcam. |
hands |
Object | Handles hand tracking using MediaPipe. |
predictions |
Array | Stores hand landmark data from hand tracking results. |
extinguisherImg |
Image | Image of the fire extinguisher. |
fireImg |
Image | Image of the fire. |
startImg |
Image | Image for the start screen. |
firePosition |
Object | Coordinates of the fire on the canvas. |
fireSize |
Number | Diameter of the fire. |
spraying |
Boolean | Indicates if the extinguisher is spraying. |
particles |
Array | Stores particles for visual effects. |
score |
Number | Player's score. |
timer |
Number | Game timer in seconds. |
gameStarted |
Boolean | Indicates if the game has started. |
intervalId |
Number | Interval ID for the game timer. |
gameOverScreenDuration |
Number | Duration in frames for the game over screen. |
safeMargin |
Number | Margin to keep fire away from canvas edges. |
startDelay |
Number | Delay before game starts (in milliseconds). |
startScreen |
Boolean | Indicates if the start screen is displayed. |