Pokedex Website using P5JS and Spritesheets

Planning
Step 1
Displaying a Pokemon Sprite and Information using P5

In this lesson we will be using P5JS to display a certain Pokemon's sprite and its information.

10

This lesson assumes you completed the "Pokedex Website using jQuery with CSV files" lesson

Step 2
Let's start by adding the CDN for P5JS into our HTML head tag.

COPY the CDN by clicking on the button.

11

PASTE it to the head tag inside the index.html file:

12
Step 3
Let's hide our table using the display setting in our CSS code

Add this to the index.css file:

13
Step 4
Let's create a canvas using Processing and display a white rectangle with black stroke outline

Add this code to the bottom of index.js:

14

NOTE: The code above the red box is from the previous lesson and collapsed. Go back to the previous lesson if your index.js is empty.

Check Your Work
Step 5
Save your code

The website should look like this:

15
Step 6
Let's now make a variable for the image of the pokemon and then display it

Add this code inside index.js:

16
Step 7
To load the image we need to access the image's address

Press the clipboard button when hovering over the image to copy the image address

1
Step 8
Now paste it inside the loadImage function

Press CTRL+V or right click the mouse to Paste:

2
Check Your Work
Step 9
Save your code

We should now see the image showing every Pokemon

3
Planning
Step 10
We will now be learning how to display only a single pokemon from this spritesheet

It will involve finding the exact rectangle from the main image that we want to display

5
Information
Step 11
We currently know that the image function needs five parameters

The syntax image(img, x, y, w, h) defines the image to draw, position to draw it, and the dimension size.

4
Information
Step 12
We can also include four more numbers to define a rectangle to zoom in

I name the new variables sx, sy, sw, sh because they define the Sprite we want to zoom in on from our spritesheet.

6
Step 13
Let's include four more parameters to our image function to zoom in on Bulbasaur

The pokemon sprites are each a 64 pixels square and the x and y position will be the top left so it is 0, 0.

Add this code:

7
Check Your Work
Step 14
Save your code

We should see our specified Bulbasaur sprite now!

8
Information
Step 15
To draw the next pokemon we will need to change the Sprite rectangle

Since the next pokemon, Ivysaur, is to the right, we need to change the sx position.

If each Sprite is 64 pixels wide, then what should sx equal?

19
Challenge
Step 16
Try to draw the Ivysaur sprite

Remember, you only need to change the sx number!

10

When finished, try to draw Venosaur!

Step 17
You should see now that we keep adding 64 pixels to sx to get the next Pokemon

Let's make a variable to simplify it as an equation, where we multiple the column number we want by 64 to get the desired sx value.

Change this code:

13
Information
Step 18
Getting a pokemon from a different row requires us to change the "sy" value

The height of each pixel is also 64 pixels.

Gen1pokemons
Challenge
Step 19
Let's add a new variable "sy" to get the desired row on the spritesheet

Add the code and fill in the blanks to display a Pidgeot sprite:

14
Step 20
Lets add a new global variable that will track which Pokemon we want to focus on

Add this above the setup function:

16
Information
Step 21
Starting at zero, let's assume each Pokemon has an ID number

According to the spritesheet, the pokemonId's format looks like this:

18
Information
Step 22
If we divide each id number by 16 (the number of columns) and take the remainder, then we get the column number!

The modulo sign % gets the remainder of a division.

2
Information
Step 23
If we divide each id number by 16 (the number of columns) and round down, then we get the row number!

The floor function will round a decimal number down to an integer.

4
Challenge
Step 24
Lets now define the column and row number based off the pokemonId

Read the previous slides for help!

5
Check Your Work
Step 25
Save your code

Try changing pokemonId and see if the correct Pokemon appears.

Planning
Step 26
Now we want to display the data for our selected Pokemon

We will need to access the pokemonData we created in the last lesson.

10
Information
Step 27
Remember the first line in our pokemonData has the data categories

We will need to combine the first line with the pokemon line.

7
Step 28
Let's draw the first line in pokemonData using a string variable and text function

Add this code inside the draw function in index.js:

6
Check Your Work
Step 29
Save your code

We should see the first pokemonData line, but it's all in one line!

8
Information
Step 30
Let's solve this by adding a new line character after each data in the first row

The new line character "\n" will create a new line to separate each data

10
Step 31
We can do this easily using a for loop to iterate each data in the first row

Add this code to the draw function:

9
Check Your Work
Step 32
Save your code

What happened?!

The canvas should be blank, don't worry. Check the console and we see the error:

Uncaught TypeError: Cannot read property 'length' of undefined

11
Information
Step 33
This is referring to the condition in our for loop where we check how long the first array row is for pokemonData

The problem is our for loop happens before our pokemonData can organize the CSV file.

12
Step 34
We need to wait for the pokemonData to be organized before accessing it

Add this before our for loop in the draw function:

13
Check Your Work
Step 35
Save your code

The data should now be visible!

14
Step 36
Let's now add the selected pokemon's data next to the category name

Change this code in the for loop:

15
Check Your Work
Step 37
Save your code

Wait a minute, that's not the right data!

16
Information
Step 38
The problem is that our pokemonId starts at 0, but the first pokemonData starts at 1

We need to add our PokemonId by 1 to get the correct pokemonData row

16
Challenge
Step 39
Fix the problem on your own

The code to change is this:

17
Check Your Work
Step 40
Save your code

We should see the correct pokemonData for our pokemonId!

18
Pokedex Website using P5JS and Spritesheets Info

Account

MVCode Clubs

Created By

Missing tiny aaronjau101

Course:

Pokedex Website

Access Level

public

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach