P5play

12COMP

programming

layout

handy code

database

is a 2D game engine to help you turn your ideas into JavaScript code.

P5.play documentation from CodeHs

For P5Play-miniskills project you must use GitHub Codespaces
Your teacher will give you a link to the GitHub Classroom assignment

Below are a set of mini skills which will give you the skills needed to develop a game for 12COMP.

If you need further help you can go to the P5.play website

NOTE: In all programming languages there is more than one way to accomplish something. So you might find other ways to code up a solution other than those described below. I suggest you start with what is used in the tasks below.

EG: To find the current position of the mouse you could use:

The P5.play variable mouse
The P5.play variables mouse.x and mouse.y
The P5.js variables mouseX and mouseY
The system onmousemove and e.clientX e.clientY

EG: To detect keyboard input you could use:

The P5.play kb.pressing()
The system event handler document.addEventListener

When you are looking for bugs, don't forget that you can use the Console (Ctrl-Shift-i).

TASKS

Notes:

P5.js calls:

function setup() once at the start.
function draw() by default 60 times per second.

Try this:

making the canvas size match the window size by using the system supplied variables: windowWidth & windowHeight instead of numbers for w, h But don't forget to subtract something for the heading...

TASK 01: CREATE A SPRITE

Use the module: t01_create_sprite.js

Commands for setup:

cnv = new Canvas(w, h);

Create a rectangle:

????? = new Sprite(x, y, w, h, 'd');

?????.color = 'ccc';

Create a circle:

????? = new Sprite(x, y, d, 'd');

?????.color = 'ccc';

Commands for the draw loop:

background('ccc');

where:

x, y is the X & Y position of the sprite

w, h is the size; width & height and d is the diameter

????? is the name you give the sprite

ccc is the colour

Try this

place you sprite near the top of the screen and make it fall instead of moving sideways.
rotate the sprite anti-clockwise by making the .rotationSpeed value negative.

TASK 02: MOVE A SPRITE

Use the module: t02_move_sprite.js
Copy your code from t01_create_sprite.js
DON'T overwrite the comments at the start.

Commands for setup:

cnv = new Canvas(w, h);

????? = new Sprite(x, y, w, h, 'd');

?????.color = 'ccc';

?????.rotationSpeed = 2;

?????.vel.x = 2;

Commands for the draw loop:

background('ccc');

where:

x, y is the X & Y position of the sprite

w, h is the size; width & height and d is the diameter

????? is the name you give the sprite

ccc is the colour

Notes:

The last parameter specifies the physics simulation associated with the sprite. In the case below, the 'd' specifies the sprite is dynamic which is the default.

????? = new Sprite(x, y, w, h, 'd');

The physics options are:

'd' dynamic - allows sprite to move freely & be affected by gravity.
's' static - sprite can't be moved
'k' kinematic - sprite can be moved by code but not by other sprites.
'n' none - fully removes the sprite from the physics simulation.

Try this:

Create three more sprites.
Try the other physics options out on them.
What happens when they hit eachother?
What happens if you add world.gravity.x = 5?

TASK 03: GRAVITY

Use the module: t03_gravity.js
Copy your code from t02_move_sprite.js

DON'T overwrite the comments at the start

Commands for setup:

Add gravity to your program

cnv = new Canvas(w, h);

world.gravity.y = 10;

Add a fifth argument to your sprite - 'd'

????? = new Sprite(x, y, w, h, 'd');

?????.color = 'ccc';

?????.rotationSpeed = 2;

Commands for the draw loop:

background('ccc');

where:

x, y is the X & Y position of the sprite

w, h is the size; width & height and d is the diameter

????? is the name you give the sprite

ccc is the colour

Try this:

create more platforms and make your falling sprite fall from one platform to another.
rotating the platforms slightly using the .rotation property:
- .rotation = 0.5 rotates 1/2 a degree clockwise.
- .rotation = -1 rotates 1 degree anti-clockwise.

adding the .bounciness property to the falling sprite.
adding the .friction property to the falling sprite.
adding the .drag property to the falling sprite.

Example of bounciness, friction and drag

TASK 04: COLLISION

Use the module: t04_collision.js
Copy your code from t03_gravity.js

DON'T overwrite the comments at the start.

Commands for setup:

cnv = new Canvas(w, h);

world.gravity.y = 10;

????? = new Sprite(x, y, w, h, 'd');

?????.color = 'ccc';

?????.rotationSpeed = 2;

?????.vel.x = 2;

platform_1 = new Sprite(x, y, w, h, 'k');

Commands for the draw loop:

background('ccc');

where:

x, y is the X & Y position of the sprite

w, h is the size; width & height and d is the diameter

????? is the name you give the sprite

ccc is the colour

.bounciness property: the bounciness of the sprite's physics body:
- .bounciness = 0 gives no bounce. the higher the number the more bounce.
- the default is 0.2
.friction property: the amount the sprite's physics body resists moving when rubbing against another physics body:
- .friction = 0 gives no friction, the higher the number the more friction.
- the default is 0.5
.drag property: the amount of resistance a sprite has to being moved:
- .drag = 0 gives no drag, the higher the number the more drag/wind resistance.
- the default is 0.

Notes:

Comment out your platform sprites.
Colour each wall differently so you can easily identify which is which on the screen.
Notice the ball's x & y positioning using width/2 & height/2

Try this:

altering the .bounciness properties.
adding a y velocity.
moving the code to create the walls into a separate function called from setup() - it makes setup() less cluttered.

TASK 05: CREATE WALLS

Use the module: t05_createWalls.js
Copy your code from t04_collision.js

DON'T overwrite the comments at the start.

Commands for setup:

cnv = new Canvas(w, h);

wallLH = new Sprite(0, height/2, 8, height, 'k');

wallLH.color = 'black';

wallRH = new Sprite(x, y, w, h, 'k');

wallTop = new Sprite(x, y, w, h, 'k');

wallBot = new Sprite(x, y, w, h, 'k');

ball_1 = new Sprite(width/2, height/2, 50, 'd');

ball_1.color = 'cyan';

ball_1.vel.x = 2;

ball_1.bounciness = 1;

ball_1.friction = 0;

ball_1.drag = 0;

Commands for the draw loop:

background('ccc');

where:

x, y is the X & Y position of the sprite

w, h is the size; width & height and d is the diameter

????? is the name you give the sprite

ccc is the colour

Notes:

The problem is that all the aliens start with the same position and the same velocities. Therefore they are stacked on top of each other and you only see the top one.

Giving the aliens different velocities and/or start positions would fix this problem. See the Try section below for a fix.

You could move the code to create the aliens into a new function and and call it from setup(). OR when the user CLICKs the start button.

Try:

setting random x & y velocities using the P5.js random() command to return a random number.

Note that you can only use the P5.js random() command once the function setup() has been called by P5.js

EG:

to obtain a random number between 6 & 8:

randNum = random(6, 8);

The problem with the method above is that all numbers are positive and so all velocities are going in the same direction.

to obtain a random number between -7 & 8:

randNum = random(-7, 8);

The problem with the method above is that random can select small

numbers which will be too slow as a velocity. And it could select 0 (zero).

to randomly select a number from a range -7 to -4 and 4 to 7:

const VELARRAY = [-1, 1];

randNum = random(4, 7) * random(VELARRAY);

TASK 06: CREATE ALIENS as boxes

Use the module: t06_createAliens.js
Copy your code from t05_createWalls.js

DON'T overwrite the comments at the start.

Commands for setup:

cnv = new Canvas(w, h);

wallLH = new Sprite(0, height/2, 8, height, 'k');

etc ...

ball_1 = new Sprite(width/2, height/2, 50, 'd');

etc ...

for (i = 0; i < ???; i++) {

alien = new Sprite(...);

alien.vel.x = 3;

alien.vel.y = 4;

alien.bounciness = 1;

alien.friction = 0;

}

Commands for the draw loop:

background('ccc');

where:

x, y is the X & Y position of the sprite

w, h is the size; width & height and d is the diameter

????? is the name you give the sprite

ccc is the colour

Notes:

The power of groups becomes apparent once you get into colliders...

TASK 07: GROUPS

Use the module: t07_groups.js

COPY your code from t06_createAliens.js
DON'T overwrite the comments at the start.

Commands for setup:

cnv = new Canvas(w, h);

wallLH = new Sprite(0, height/2, 8, height, 'k');

etc ...

ball_1 = new Sprite(width/2, height/2, 50, 'd');

etc ...

// Create a group for the aliens

alienGroup = new Group();

for (i = 0; i < ???; i++) {

alien = new Sprite(...);

alien.vel.x = 3;

alien.vel.y = 4;

alien.bounciness = 1;

alien.friction = 0;

alienGroup.add(alien);

}

Commands for the draw loop:

background('ccc');

where:

x, y is the X & Y position of the sprite

w, h is the size; width & height and d is the diameter

????? is the name you give the sprite

ccc is the colour

Notes:

There are three collider functions/methods:
collides - on the first frame that a sprite collides with another sprite, the collides function returns true.
colliding - while a sprite is colliding with another sprite, the colliding function returns the number of frames the collision has occurred for.
collided - on the first frame after two sprites collided, the collided function returns true.
You can either:
- test for a collision using an if statement inside the draw loop. See P5.play example
- or register a callback as in the code on the right.
When you use the .collide method to detect collisions it matters which way round you code it.

EG:

alienGroup.collides(ball_1, ballHitAlien);

will result in your function ballHitAlien being given the 2 input parameters as:

the member of alienGroup which hit ball_1
ball_1

Where as...

ball_1.collides(alienGroup, ballHitAlien);

will result in your function ballHitAlien being given the 2 input parameters as:

ball_1
the member of alienGroup which hit ball_1

When you have two sprites coming together AND you want one sprite to stay still, the sprite:
- to stay still needs its physics engine set to ‘k’
- which is to be deflected needs its physics engine set to 'd'

TASK 08: COLLIDERS

Use the module: t08_colliders.js
COPY your code from t07_groups.js
DON'T overwrite the comments at the start.

Commands for setup:

cnv = new Canvas(w, h);2

// Create a group for the aliens

alienGroup = new Group();

// Register a callback:

// if any alien in alienGroup collides with ball_1, call func2Call

alienGroup.collides(ball_1, func2Call);

Commands for the draw loop:

background('ccc');

Define the callback function

function func2Call(_ball_1, _ssss) {

// Delete the alien which was hit

_ssss.remove();

}

where:

func2Call is the function to call when ball_1 hits any alien.

_ssss is the specific sprite (in this case the alien) which was hit by ball_1

????? is the name you give the sprite

ccc is the colour

Notes:

It is sensible to use folders to group files together.
And you will be expected to use folders in the assessment.
So create a folder structure to match loadImage code
Upload the face and space images from the links below:
- - face
  - space

TASK 20: LOAD IMAGES

Use the module: t20_load_images.js

Commands before setup:

function preload() {

imgBG = loadImage('assets/images/space.jpg');

imgFace = loadImage('assets/images/face.png');

}

Commands for setup:

cnv = new Canvas(w, h);

ball_1 = new Sprite(width/2, height/2, 50, 'd');

ball_1.bounciness = 1;

ball_1.friction = 0;

ball_1.image = (imgFace);

imgFace.resize(50, 50);

Commands for the draw loop:

background(imgBG);

where:

x, y is the X & Y position of the sprite

w, h is the size; width & height and d is the diameter

????? is the name you give the sprite

ccc is the colour

Notes:

When the user CLICKs the mouse, mouse.presses() returns true.
mouse.x mouse.y are system variables holding the mouse's current position.
.moveTowards is very similar to .moveTo(xPos, yPos, n) except in this case n is the speed in pixels the sprite is to move every time through the draw loop.

Try:

removing the if (mouse.presses() so the sprite moves continiously.

TASK 21: HEAD TOWARDS THE MOUSE

Use the module: t21_head2Mouse.js
Copy your code from t03_gravity.js

DON'T overwrite the comments at the start.
Reference

Commands for setup:

cnv = new Canvas(w, h);

????? = new Sprite(x, y, w, h, 'd');

?????.color = 'ccc';

?????.rotationSpeed = 2;

Commands for the draw loop:

background('ccc');

?????.moveTowards(mouseX, mouseY, p);

if (mouse.presses()) {

?????.moveTo(xPos, yPos, n);

}

where:

xPos yPos is the X & Y position to move to.

n is the speed to move at

p is the % of distance to mouse to move each time thru the draw loop

????? is the name you give the sprite

ccc is the colour

Notes:

kb.presses is actioned ONCE when the key is pressed whereas kb.pressing is actioned whilst the key is being pressed down.
kb.released is actioned ONCE you release the key and is a good way to reset the velocity if you want to say, set velocity back to zero.

You could also use a keyboard event listener (document.addEventListener ) to detect keyboard input, however it is laggy compared to using the P5.Play kb.presses/pressing/released method.
If you want to see Geekster for more info on keyboard events and JAVASCRIPT.INFO for info on what each key returns.

TASK 22: KEYBOARD INPUT

Use the module: t22_keyboard.js
Copy your code from t21_head2Mouse.js

DON'T overwrite the comments at the start.

Commands for setup:

cnv = new Canvas(w, h);

Commands for the draw loop:

background('ccc');

if (kb.pressing('left')) {

// Set sprite's velocity to the left

}

else if (kb.pressing ('right')) {

etc...

};

if (kb.released('left')) {

// Set sprite's velocity to zero

}

etc...

Parameters and Return values.

You need to be able to write functions that use parameters and return useful data

JavaScript: Functions - Parameters & return values

Notes:

Have a look at the p5Play docs to see what you can do with text
If you change text properties, the changes stay until reset. Not until the end of the draw loop.
Challenge: Get a timer running in the center of the screen showing the number of seconds the page has been running. Use big, colorful text.

Hints:

- millis()
- Math.floor()

Bonus TASK 23: Display text

Create a new module: t23_text.js
Copy your code from t22_keyboard.js

DON'T overwrite the comments at the start.
Create a new t23_text.html
Add a button to the index.html

Commands for setup:

//Nothing to add

Commands for the draw loop:

text("Hello World", 50, 50)

var name = "Mr Bob";

text("Hello "+name, 50, 100);

Extensions

Using tiles & tilesets

Mouse Interaction

P5play element docs (note the mouse events Sprites inherit these)

Page updated

Report abuse