In this lesson we will be using P5JS to display a certain Pokemon's sprite and its information.
COPY the CDN by clicking on the button.
PASTE it to the head tag inside the index.html file:
Add this to the index.css file:
Add this code to the bottom of index.js:
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.
The website should look like this:
Add this code inside index.js:
Press the clipboard button when hovering over the image to copy the image address
Press CTRL+V or right click the mouse to Paste:
We should now see the image showing every Pokemon
It will involve finding the exact rectangle from the main image that we want to display
The syntax image(img, x, y, w, h) defines the image to draw, position to draw it, and the dimension size.
image(img, x, y, w, h)
I name the new variables sx, sy, sw, sh because they define the Sprite we want to zoom in on from our spritesheet.
sx, sy, sw, sh
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:
We should see our specified Bulbasaur sprite now!
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?
Remember, you only need to change the sx number!
When finished, try to draw Venosaur!
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:
The height of each pixel is also 64 pixels.
Add the code and fill in the blanks to display a Pidgeot sprite:
Add this above the setup function:
According to the spritesheet, the pokemonId's format looks like this:
The modulo sign % gets the remainder of a division.
The floor function will round a decimal number down to an integer.
Read the previous slides for help!
Try changing pokemonId and see if the correct Pokemon appears.
We will need to access the pokemonData we created in the last lesson.
We will need to combine the first line with the pokemon line.
Add this code inside the draw function in index.js:
We should see the first pokemonData line, but it's all in one line!
The new line character "\n" will create a new line to separate each data
Add this code to the draw function:
The canvas should be blank, don't worry. Check the console and we see the error:
Uncaught TypeError: Cannot read property 'length' of undefined
The problem is our for loop happens before our pokemonData can organize the CSV file.
Add this before our for loop in the draw function:
The data should now be visible!
Change this code in the for loop:
Wait a minute, that's not the right data!
We need to add our PokemonId by 1 to get the correct pokemonData row
The code to change is this:
We should see the correct pokemonData for our pokemonId!
Created 9 months ago
Teach coding to your students with MVCode Teach
MVCode offers an integrated product designed to teach coding to students.
Learn more about MVCode Teach