In this blog post, we will examine a JavaScript code written for the p5.js editor, which aims to find the most optimal guess for a Pokemon guessing game. The game works by having the user input various criteria (generation, type, height, and weight), and the program will guess the Pokemon that fits those criteria. The program will then update its guess based on the user's feedback until it guesses correctly.
`maxGen`
variable is set to 8, which represents the highest generation of Pokemon that the program will consider,
and `minHeight`
is set to 0.1, which represents the shortest height of a Pokemon that the program will consider.
The program then loads a JSON file containing information on all the Pokemon, including their name, generation, type, height, and weight.
The JSON data is then used to create a `pokemon`
class, which stores this information for each Pokemon.
let pokedex = [];
let ideal;
let pokeJson;
let maxGen = 8, minGen = 1, maxHeight = 100.0, minHeight = 0.1, maxWeight = 999.9, minWeight = 0.1, maxTypes = 19;
class pokemon{
constructor(name, gen, type1, type2, ht, wt){
this.name = name;
this.gen = gen;
this.type1 = type1;
this.type2 = type2;
this.ht = ht;
this.wt = wt;
this.dist = 0;
}
}
function preload(){
pokeJson = loadJSON('pokedex.json')
}
After loading the JSON data and creating the `pokemon`
class,
the program initializes the canvas and generates the five most common Pokemon types and the five closest Pokemon to the geometric median.
The geometric median is the point that minimizes the sum of the distances to all the points in a given set.
The five closest Pokemon to the geometric median are selected because they are likely to be the most representative Pokemon of the set.
function setup() {
// Create the input fields for the user to input criteria
criteriaNeeded = createElement('p1', '> is higher, < is lower, = is correct, ! is wrong, - is swap' + '
enter:gen type1 type2 height weight' + '
ex: =!-<<
');
criteriaNeeded.position(20,10);
input = createInput();
input.position(20, 65);
button = createButton('submit');
button.position(input.x + input.width, 65);
button.mousePressed(updateGuess)
// Create an array to store the distribution of types
for(let i = 0; i <= 18; i++){
typeDist.push(0);
}
// Create the canvas and add the Pokemon from the JSON data to the pokedex
createCanvas(400, 400);
for (let test of Object.keys(pokeJson)) {
//add the pokemon to the dex
pokedex.push(new pokemon(test, pokeJson[test][0],pokeJson[test][1],pokeJson[test][2],pokeJson[test][3],pokeJson[test][4]))
}
// Generate the 5 or less most common types
mostCommonTypes();
// Generate the 5 or less closest pokemon to the geometric median
geometricMedian();
// Calculate the type fitness scores of the median options
calcFitness();
The `updateGuess()`
function is called when the user inputs a guess using the interface provided.
It takes the user input, validates it using regular expressions, and updates the search criteria based on the input.
If the input is invalid, the function does nothing.
Once the search criteria have been updated, the function loops through the `pokedex`
array and checks each Pokemon against the criteria.
If a Pokemon does not meet the criteria, it is marked for removal.
If a Pokemon does meet the criteria, its type is checked against the input.
If a Pokemon's type matches the input, it is marked as a correct guess.
If the Pokemon's type does not match the input, it is marked as a wrong guess.
Once all of the Pokemon have been checked, the correct and wrong guesses are used to update the distribution of types in the remaining Pokemon.
Finally, the function calls `geometricMedian()`
to generate the new guess options, and `calcFitness()`
to calculate their type fitness scores.
The new guess options are sorted by their type fitness scores, and the first option (i.e., the one with the best type fitness score) is selected as the new guess.
The new guess is displayed on the interface using the `createElement()`
function.
Overall, the code is a clever implementation of a simple guessing game.
By using a data-driven approach, the code is able to quickly and efficiently narrow down the possible options and select the best guess.
The code also demonstrates how p5.js can be used to create simple web-based interfaces for interactive applications.