Demo of the p5.js library
This demo implements the classic Snake game on the interactive system for CPSC 484/584 Intro. to HCI.
Specifically, the game itself is implemented with p5.js and the data are obtained via a WebSocket. Technical details for the interactive systems are available on the course website.
Clone this repository and open index.html in a web browser.
Note that you must be connected to the Yale network.
To quickly view the game responding to actual data, start the recorder utility in play mode:
$ cd ~/recorder
$ pipenv run python src/main.py --data-path data/sample2 --mode play
The default host is localhost:4444, which you can modify in sketch.js
Three files in this repository define the project's structure:
index.html: defines the elements of the webpage (excluding the dynamic game elements, which are defined insketch.js).style.css: defines the style properties of the elements of the webpage.sketch.js: defines the game interaction and websocket connection.
Most of the components that actually implement the game are defined in sketch.js.
At a high level, the components defined therein open a websocket to one of the HCI displays, process body tracking data from the Kinect sensor to obtain a command, send that command to the game, and update the game objects and game score.
The following block diagram illustrates the components defined in sketch.js:
In order to publish changes that you make to this project, you should fork this repository and push changes to that fork.
Here are the steps, in order:
- Fork this repo by following the instructions in the GitHub documentation on forks
- Clone the forked repository. Make sure to clone the URL for SSH authentication!
$ cd ~
$ git clone [email protected]:<your forked repo>
$ cd ~/demo-p5js
- Make any changes to the files in your cloned repository.
- Commit and push to your cloned repository
$ cd ~/demo-p5js
$ git add <files you edited>
$ git commit -m "helpful commit message!"
$ git push origin main
- The pushed changes should be visible on GitHub!
If you cloned the repository with HTTPS instead of SSH, you will get an authentication error when trying to push. To convert the remote URL to SSH, follow this GitHub tutorial on managing remote repositories. If you haven't yet configured an SSH key for your GitHub account, you should follow this GitHub tutorial on adding SSH keys.