• Sketch page.

Documentation

• This week I just explored the neural network and the combination of hand pose model. I chose hand pose model since it appears the most convenient model to me. Since we did a rock-paper-scissor model in the class, I thought about other simple games and chose the simplest greedy snake since it has four directions that can ask users to decide on their own.

• Before actually writing the code, I did a little arrangement on the code since after writing the previous projects, I felt that put everything in one file will cause a bit trouble and difficult to debug and arrange. So I separated all JavaScript files into four files.

  

  Sketch.js is the main file, snake.js for the greedy snake game, training.js for the training model and exporting results, ui.js for all ui logics.

  While I initially tried to use the export and import grammar from ES6, p5js web editor doesn’t allow this one. So I used a more convention method.

  

• I began with the training file. This is simply since it’s just a bit rearrangment.

• The greedy snake codes I got the basic from ChatGPT by giving the prompts containing all the game logics as below.

Help me write a snake class that reads the training data's up, down, left, and right as the snake's movement direction. The snake eats food and grows taller, then hits a wall or pretends to die. Randomly move on the screen until food appears.

I did do a bit revision and change in logic and link to the training.js stuff, but overall I would say     this is very helpful in development.

• The ui.js file is actually the most tricky one. Since I thought more about the overall experience.

  

  I start with defining the state in the process, and split them into welcome, training, testing and playing. A very linear process.

  

  Welcome state is just the beginning state, nothing really special.

  

  The training process I upgraded a bit from clicking button to update the data to auto collection. I used time to divide the training process. And directly train the model after the collection.

  

  I also added a test state to make sure the user is satisfied with the training result and added two buttons, one retrain, one to play the game.

• Dividing the code resulting in that the main file is very clean.