【My Study Note】P5.play Library
SPrite
Default
function setup() {
new Sprite();
}New Sprite
var box, circle;
function setup() {
new Canvas(50, 200);
world.gravity.y = 10;
// ( x, y, w, h, collider)
box = new Sprite(25, 70, 10, 90, 'static');
// same as setting the values separately
// box.x = 25;
// box.y = 70;
// box.width = 10;
// box.height = 90;
// box.collider = 'static';
// ( x, y, d, collider)
circle = new Sprite(25, 140, 10, 'static');
}
function draw() {
clear();
}Inside the Sprite constructor, new Sprite(), you can specify the sprite’s position, size, and collider type.
By default, if no inputs are given to the Sprite constructor, new sprites are positioned at the center of the canvas, with a width and height of 50 pixels, and a dynamic collider.
Create a Sprite
createSprite(x, y, width, height);
example: var mario = createSprite (200, 200, 50, 50);Draw a Sprite
// Draw individually
mario.draw();Simply creating a campus will not cause it to appear on the canvas. We can either draw individually or draw them all at once with the drawSprites() function, which should be placed inside the draw() function.
Adding an image to the Sprite
var manImage;
var man;
function preload(){
manImage = loadImage('images/man.png');
}
function setup(){
createCanvas (400, 400);
man = createSprite (200, 200, 50, 50);
man.addImage (manImage);
}
function draw(){
background(240, 255, 240);
drawSprites();
}Sprites should have at least one image and the image should be preloaded in the preload() function and then added to the sprite. Also, to be able to add the image to the sprite, we will need to store the sprite in a variable.
Multiple Images
We can make the movement of the characters by using the multiple images with using addAnimation() function instead of addImage().In addition, we also give the animation a label, as a sprite might have multiple animations.
var mario;
function preload(){
mario = createSprite (200, 200, 50, 50);
mario.addAnimation ("walk", 'folder/Walk (1).png', 'folder/Walk (2).png', 'folder/Walk (3).png', 'folder/Walk (4).png', 'folder/Walk (5).png', 'folder/Walk (6).png', 'folder/Walk (7).png', 'folder/Walk (8).png');
mario.scale = 0.3;
}Scale
// 画像の大きさを0.1倍にする。
santa.scale = 0.1Movement in x and y
// x座標に2pxずつ進む。
santa.setVelocity(2, 0);Manage the speed of the movement
car.speed = 2;function keyPressed()
function keyPressed() {}This function would be called every time when the key is pressed.
Direction
// Moving to the direction "0" with the speed "2"
santa.direction = 0;
santa.speed = 2;Collide
// This would be happened when variable(sprite) "Mario" crash into variable(sprite) "food"
if (mario.collide(food)) {
food = createSprite (random (0, width), random (0, height), random (10, 50), random (10, 50));
mario.scale += 0.1;
}This function prevents two sprite from oevrlapping.
Overlap
if (mario.overlap(food)) {
food = createSprite (random (0, width), random (0, height), random (10, 50), random (10, 50));
mario.scale += 0.1;
}collider: dynamic
Just the opposite of the “collider:static”.
Sprite Shapes
Square
sprite_square = new Sprite();
sprite_square.width = 100;
sprite_square.height = 50;Circle
sprite = new Sprite();
sprite.diameter = 100;
// Can be like this as well
sprite.d = 200;Specify x,y,w,h individually
sprite.x = 300;
sprite.y = 100;
sprite.w = 300;
sprite.y = 100;Position
sprite = new Sprite();
sprite.pos = {x:200, y:100};Rotation
// Specify the angle
sprite.rotation = 45;Radius
sprite = new Sprite();
sprite.r = 200;Specity the color
sprite.color = color(0,0,0);Text with color and size
sprite.textColor = color(0, 255, 255);
sprite.text = "Hello";
sprite.textSize = 20;Sprite Physics
world.gravity
// yの方角に10pxずつ重力として落ちていく
world.gravity.y = 10;
ball = new Sprite();
ball.diameter = 50;
ball.y = 30;
floor = new Sprite();
floor.collider = 'static';
floor.y = 190;
floor.w = 400;
floor.h = 5;Slopped Floor
//ボールが棒に落ちた後、棒が傾いているから滑り落ちていく。
world.gravity.y = 10;
ball = new Sprite();
ball.diameter = 50;
ball.y = 30;
floor = new Sprite();
floor.collider = 'static';
floor.y = 190;
floor.w = 400;
floor.h = 5;
floor.rotation = 2;Sprite Movement
Teleport
if (mouse.presses()) {
player.x = mouse.x;
player.y = mouse.y;
}moveTo
if (mouse.presses()) {
// (position, speed)
player.moveTo(mouse, 8);
}move
// This caused when Keyboard "left" was clicked
if (kb.presses('left')) {
// (distance, direction, speed)
player.move(50, 'left', 3);
}moveTowards
// In this case, the player moves towards the mouse by 10% of the distance to the mouse on every p5.js draw call.
Unchanged: player.moveTowards(mouse, 0.1);Pixel Art
var smiley;
function setup() {
new Canvas(500, 120);
// y and b are actually creating the color difference and "." is creating the blank
var str = `
..yyyyyy
.yybyybyy
yyyyyyyyyy
yybyyyybyy
.yybbbbyy
..yyyyyy`;
// You can also change the color
var palette = {
'y': color(255, 220, 60),
'b': color(20)
};
smiley = new Sprite();
// 18 is a size of this art
smiley.img = spriteArt(str, 18, palette);
}
function draw() {
background(255);
}Collides, Colliding, and Collided
Collides
if (player.collides(pillar)) {
player.vel.y = -5;
pillar.h -= 52;
}On the first frame that a sprite collides with another sprite, the collides function returns true.
Colliding
if (block.colliding(floor)) {
block.color = 'red';
} else block.color = 'blue';The colliding function returns the number of frames the collision has occurred for.
Collided
if (block.collided(floor)) {
floor.collider = 'dynamic';
}On the first frame after two sprites collided, the collided function returns true.
Positions
Overlap
function setup() {
new Canvas(200, 128);
sprite1 = new Sprite(90, 50);
sprite2 = new Sprite(115, 75);
sprite1.overlaps(sprite2);
}
function draw() {
clear();
}Layer
sprite1.layer = 2;
sprite2.layer = 1;By default sprites are drawn in the order they were created in. You can change the draw order by editing sprite’s .layer property. Sprites with the highest layer value get drawn first.
Remove()
if (player.overlaps(coin)) coin.remove();Rotation
rotation (teleport)
if (kb.pressing('ArrowRight')) sprite.rotation = 90;
else sprite.rotation = 0;rotationSpeed
sprite.rotationSpeed = 1;rotate
This is the angle and the speed
if (kb.presses('left')) sprite.rotate(-45, 3);
if (kb.presses('right')) sprite.rotate(45, 3);rotateTo
if (mouse.presses()) sprite.rotateTo(mouse, 0, 5);Use the rotateTo function to rotate a sprite so that it faces a position, which can also be given in x,y coordinates. The optional parameter follwing the position is the angle at which the sprite should be facing the target position. The optional parameter at the end is the rotation speed.
rotateTowards
sprite.rotateTowards(mouse);Use the rotateTowards function to rotate a sprite towards a position. Has the same optional second parameter as the rotateTo function. The third optional parameter is the tracking speed, a percent of the distance the sprite moves on each frame to the target rotation angle, 0.1 (10%) by default.
Chain Colliders
There are three different chain modes: vertex, distance, and line.
vertex mode
let floor, ball;
function setup() {
new Canvas(500, 200);
world.gravity.y = 10;
// ([vertex0, vertex1, vertex2, ...])
floor = new Sprite([[20, 60], [200, 140], [450, 180]]);
floor.collider = 'static';
ball = new Sprite(40, 0, 20);
}
function draw() {
clear();
rect(floor.x - 2, floor.y - 2, 4, 4);
}To use vertex mode, provide the Sprite constructor with an array of vertex arrays. Each vertex array should contain [x, y] coordinates. In these mini-examples the sprite’s (x, y) position is highlighted by a small black square.
distance mode
let ground, ball;
function setup() {
new Canvas(500, 200);
world.gravity.y = 10;
// (x, y, [distance0, distance1, ...])
ground = new Sprite(30, 90, [[20, 20], [60, -10], [50, 10]], 'static');
ball = new Sprite(40, 0, 20);
}
function draw() {
clear();
rect(ground.x - 2, ground.y - 2, 4, 4);
}To use distance mode, provide the Sprite constructor an (x, y) position and an array of distance arrays. These arrays should contain [x, y] distances relative to the previous vertex. The (x, y) position will be the first vertex in the chain.
line mode
let shelf, orb;
function setup() {
new Canvas(500, 200);
world.gravity.y = 10;
// (x, y, [length0, angle0, length1, ...])
shelf = new Sprite(250, 100, [50, 20, 50, -20, 50, -20], 'static');
orb = new Sprite(200, 0, 20);
}
function draw() {
clear();
rect(shelf.x - 2, shelf.y - 2, 4, 4);
}To use line mode, provide the Sprite constructor an (x,y) position and a list of line lengths and angles. Each angle is relative to the previous line’s angle.
It’s best to use line mode for small and/or symmetrical chains.
Note that the line mode chain’s (x, y) position is located at half the chain’s width and half the chain’s height, which may not be a point on the chain.
Polygon Colliders
pentagon
function setup() {
new Canvas(500, 200);
// ( x, y, sideLength, polygonName)
new Sprite(250, 100, 80, 'pentagon');
}
function draw() {
clear();
}irregular polygon: vertex mode
function setup() {
new Canvas(500, 200);
new Sprite([[8, 8], [140, 192], [300, 90], [8, 8]]);
}
function draw() {
clear();
}If the start and end of a chain is at the same point and the resulting shape is convex, it automatically becomes a polygon!
irregular polygon: distance mode
function setup() {
new Canvas(500, 200);
new Sprite(250, 100, [
[100, 40],
[-100, 40],
[0, -80]
]);
}
function draw() {
clear();
}If you use distance mode to create a polygon it’s origin will be at the center instead of the start!
pentagon chain
function setup() {
new Canvas(500, 200);
// (x, y, [length, angle, repeat])
let s = new Sprite(250, 100, [80, -72, 5]);
s.shape = 'chain';
}
function draw() {
clear();
}You can force a convex polygon to be a chain by setting sprite.shape = ‘chain’
Regular polygons can be created from a list with the line length, angle, and repeat.
The formula for the angle of a regular polygon is 360 / n, where n is the number of sides. Make that angle negative to orient the polygon with one of its edges on top.
star
function setup() {
new Canvas(500, 200);
// ( x, y, [l0, a0, l1, a1, repeat])
new Sprite(250, 100, [60, -72, 60, 144, 5]);
}
function draw() {
clear();
}p5.play logo
function setup() {
new Canvas(500, 200);
new Sprite(250, 100, [40, 74, 40, -74, 60, 50, 5]);
}
function draw() {
clear();
}bounciness (Increase the bounciness)
ball.bounciness = 1;mass (indicates how heavy the object is)
newBall.mass = 100;