We Keep Coding

How can I change an object's speed in p5.js if the mouse is pressed in OOP

Hi guys i'm very new to p5/js and not quite good at OOP programming.
I want to drop a ball by changing its speed once the mouse is clicked.
After trying to write and edit the code many times, the p5 editor didn't show any error massages but there aren't anything shown up on the display. So, I need a hand and some advices to fix this kind of problem.
Thank you in advance (:
let ball1;
let circleX = 50;
let circleY = 50;
let xspeed = 0; // Speed of the shape
let yspeed = 0; // Speed of the shape
let xdirection = 1; // Left or Right
let ydirection = 1; // Top to Bottom
let rad =50;
function setup() {
createCanvas(400, 400);
ball1 = new Ball();
}
function draw() {
background(220);
ball1.x =20;
ball1.y = 50;
ball1.c = color(25,0,100)
ball1.body();
ball1.move();
ball1.bounce();
}
class Ball {
constructor(){
this.x = width/2;
this.y = height;
this.w = 30;
this.h = 30;
this.c = color(0,255,0);
this.xspeed = 0;
this.yspeed = 0;
}
body(){
noStroke();
fill(this.c);
ellipse(this.x, this.y, this.w, this.h);
}
move() {
//this.xpos = width / 2;
//this.ypos = height / 2;
this.x = this.x + this.xspeed * this.xdirection;
this.y = this.y + this.yspeed * this.ydirection;
}
bounce() {
if (this.x > width - rad || this.x < rad) {
this.xdirection *= -1;
}
if (this.y > height - rad || this.y < rad) {
this.ydirection *= -1;
}
}
if(mouseIsPressed) { // if the mouse is pressed
//set the new speed;
this.fill(0, 0, 0);
this.xspeed =1.5;
this.yspeed=1.5;
}
}

You've got some good beginnings to your code. I modified it just a bit to assist toward OOP programming. See the code at the end of my answer for the full source.
Solution
The main question you are asking involves setting the ball's speed when the mouse button is pressed. For that, you should declare a mousePressed() function in your code as such (borrowing from your if block):
function mousePressed() {
// if the mouse is pressed
// set the new speed;
ball.xspeed = 1.5;
ball.yspeed = 1.5;
}
That should set the speed of the ball and that should solve your problem.
Other thoughts
Some other steps I took to adjust your code to more working conditions include:
I created a reset() function to be used in the setup() function and potentially able to reset the animation whenever you would like.
I changed the rad variable declaration to const rad = 50 since it doesn't change
I changed the Ball constructor to include initial (x, y) coordinates when creating the ball (could be helpful if creating multiple balls)
If you want to create an arbitrary number of balls, create an array and use array.push(new Ball(x, y)) for each ball and loop through the array to move()/bounce()/body() each ball.
I'm assuming rad is meant to be the radius of the balls, so I set the this.w and this.h to rad * 2 since with and height would equate to the diameter.
let ball;
const rad = 50;
// let circleX = 50;
// let circleY = 50;
//let xspeed = 0; // Speed of the shape
//let yspeed = 0; // Speed of the shape
function setup() {
createCanvas(400, 400);
reset();
}
function draw() {
background(220);
ball.body();
ball.move();
ball.bounce();
}
function mousePressed() {
// if the mouse is pressed
//set the new speed;
ball.xspeed = 1.5;
ball.yspeed = 1.5;
}
function reset() {
ball = new Ball(width / 2, height / 2);
}
class Ball {
constructor(x, y) {
this.x = x;
this.y = y;
this.w = rad * 2;
this.h = rad * 2;
this.c = color(25, 0, 100);
this.xspeed = 0;
this.yspeed = 0;
this.xdirection = 1;
this.ydirection = 1;
}
body() {
noStroke();
fill(this.c);
ellipse(this.x, this.y, this.w, this.h);
}
move() {
this.x = this.x + this.xspeed * this.xdirection;
this.y = this.y + this.yspeed * this.ydirection;
}
bounce() {
if (this.x > width - rad || this.x < rad) {
this.xdirection *= -1;
}
if (this.y > height - rad || this.y < rad) {
this.ydirection *= -1;
}
}
}
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/p5.min.js"></script>

Numbers before code are line numbers, they might be wrong, but should be close enough...
You need to move the 64 if(mouseIsPressed){} into a function like 47 move().
Also you haven't declared and initialized 39 this.xdirection
in the constructor(){}.
I think 67 this.fill(0, 0, 0) should be fill(0).
Maybe 24 ball1.body(); should be after the other methods (24 -> 26 line).
I think the if() statements in bounce(){} are wrong, since they'd need to have AND or && instead of OR or ||.
Also you might want to make the if(mouseIsPressed) into function mousePressed(){} mouseIsPressed is a variable that is true if mouse button is down; mousePressed is a function that gets called once when user presses the mouse button.
function mousePressed(){
ball1.xSpeed = 1.5
ball1.ySpeed = 1.5
}
There might very well be other things i haven't noticed.

Why are my objects overlapping in my p5.js project?

I'm working on a project where I simulate physics with balls.
Here is the link to the p5 editor of the project.
My problem is the following, when I add a lot of ball (like 200), balls are stacking but some of them will eventually collapse and I don't know why.
Can somebody explain why it does this and how to solve the problem ?
Thanks.
Here is the code of the sketch.
document.oncontextmenu = function () {
return false;
}
let isFlushing = false;
let isBallDiameterRandom = false;
let displayInfos = true;
let displayWeight = false;
let clickOnce = false;
let FRAME_RATE = 60;
let SPEED_FLUSH = 3;
let Y_GROUND;
let lastFR;
let balls = [];
function setup() {
frameRate(FRAME_RATE);
createCanvas(window.innerWidth, window.innerHeight);
Y_GROUND = height / 20 * 19;
lastFR = FRAME_RATE;
}
function draw() {
background(255);
if (isFlushing) {
for (let i = 0; i < SPEED_FLUSH; i++) {
balls.pop();
}
if (balls.length === 0) {
isFlushing = false;
}
}
balls.forEach(ball => {
ball.collide();
ball.move();
ball.display(displayWeight);
ball.checkCollisions();
});
if (mouseIsPressed) {
let ballDiameter;
if (isBallDiameterRandom) {
ballDiameter = random(15, 101);
} else {
ballDiameter = 25;
}
if (canAddBall(mouseX, mouseY, ballDiameter)) {
isFlushing = false;
let newBall = new Ball(mouseX, mouseY, ballDiameter, balls);
if (mouseButton === LEFT && !clickOnce) {
balls.push(newBall);
clickOnce = true;
}
if (mouseButton === RIGHT) {
balls.push(newBall);
}
}
}
drawGround();
if (displayInfos) {
displayShortcuts();
displayFrameRate();
displayBallCount();
}
}
function mouseReleased() {
if (mouseButton === LEFT) {
clickOnce = false;
}
}
function keyPressed() {
if (keyCode === 32) {//SPACE
displayInfos = !displayInfos;
}
if (keyCode === 70) {//F
isFlushing = true;
}
if (keyCode === 71) {//G
isBallDiameterRandom = !isBallDiameterRandom;
}
if (keyCode === 72) {//H
displayWeight = !displayWeight;
}
}
function canAddBall(x, y, d) {
let isInScreen =
y + d / 2 < Y_GROUND &&
y - d / 2 > 0 &&
x + d / 2 < width &&
x - d / 2 > 0;
let isInAnotherBall = false;
for (let i = 0; i < balls.length; i++) {
let d = dist(x, y, balls[i].position.x, balls[i].position.y);
if (d < balls[i].w) {
isInAnotherBall = true;
break;
}
}
return isInScreen && !isInAnotherBall;
}
function drawGround() {
strokeWeight(0);
fill('rgba(200,200,200, 0.25)');
rect(0, height / 10 * 9, width, height / 10);
}
function displayFrameRate() {
if (frameCount % 30 === 0) {
lastFR = round(frameRate());
}
textSize(50);
fill(255, 0, 0);
let lastFRWidth = textWidth(lastFR);
text(lastFR, width - lastFRWidth - 25, 50);
textSize(10);
text('fps', width - 20, 50);
}
function displayBallCount() {
textSize(50);
fill(255, 0, 0);
text(balls.length, 10, 50);
let twBalls = textWidth(balls.length);
textSize(10);
text('balls', 15 + twBalls, 50);
}
function displayShortcuts() {
let hStart = 30;
let steps = 15;
let maxTW = 0;
let controlTexts = [
'LEFT CLICK : add 1 ball',
'RIGHT CLICK : add 1 ball continuously',
'SPACE : display infos',
'F : flush balls',
'G : set random ball diameter (' + isBallDiameterRandom + ')',
'H : display weight of balls (' + displayWeight + ')'
];
textSize(11);
fill(0);
for (let i = 0; i < controlTexts.length; i++) {
let currentTW = textWidth(controlTexts[i]);
if (currentTW > maxTW) {
maxTW = currentTW;
}
}
for (let i = 0; i < controlTexts.length; i++) {
text(controlTexts[i], width / 2 - maxTW / 2 + 5, hStart);
hStart += steps;
}
fill(200, 200, 200, 100);
rect(width / 2 - maxTW / 2,
hStart - (controlTexts.length + 1) * steps,
maxTW + steps,
(controlTexts.length + 1) * steps - steps / 2
);
}
Here is the code of the Ball class.
class Ball {
constructor(x, y, w, e) {
this.id = e.length;
this.w = w;
this.e = e;
this.progressiveWidth = 0;
this.rgb = [
floor(random(0, 256)),
floor(random(0, 256)),
floor(random(0, 256))
];
this.mass = w;
this.position = createVector(x + random(-1, 1), y);
this.velocity = createVector(0, 0);
this.acceleration = createVector(0, 0);
this.gravity = 0.2;
this.friction = 0.5;
}
collide() {
for (let i = this.id + 1; i < this.e.length; i++) {
let dx = this.e[i].position.x - this.position.x;
let dy = this.e[i].position.y - this.position.y;
let distance = sqrt(dx * dx + dy * dy);
let minDist = this.e[i].w / 2 + this.w / 2;
if (distance < minDist) {
let angle = atan2(dy, dx);
let targetX = this.position.x + cos(angle) * minDist;
let targetY = this.position.y + sin(angle) * minDist;
this.acceleration.set(
targetX - this.e[i].position.x,
targetY - this.e[i].position.y
);
this.velocity.sub(this.acceleration);
this.e[i].velocity.add(this.acceleration);
//TODO : Effets bizarre quand on empile les boules (chevauchement)
this.velocity.mult(this.friction);
}
}
}
move() {
this.velocity.add(createVector(0, this.gravity));
this.position.add(this.velocity);
}
display(displayMass) {
if (this.progressiveWidth < this.w) {
this.progressiveWidth += this.w / 10;
}
stroke(0);
strokeWeight(2);
fill(this.rgb[0], this.rgb[1], this.rgb[2], 100);
ellipse(this.position.x, this.position.y, this.progressiveWidth);
if (displayMass) {
strokeWeight(1);
textSize(10);
let tempTW = textWidth(int(this.w));
text(int(this.w), this.position.x - tempTW / 2, this.position.y + 4);
}
}
checkCollisions() {
if (this.position.x > width - this.w / 2) {
this.velocity.x *= -this.friction;
this.position.x = width - this.w / 2;
} else if (this.position.x < this.w / 2) {
this.velocity.x *= -this.friction;
this.position.x = this.w / 2;
}
if (this.position.y > Y_GROUND - this.w / 2) {
this.velocity.x -= this.velocity.x / 100;
this.velocity.y *= -this.friction;
this.position.y = Y_GROUND - this.w / 2;
} else if (this.position.y < this.w / 2) {
this.velocity.y *= -this.friction;
this.position.y = this.w / 2;
}
}
}

I see this overlapping happen when the sum of ball masses gets bigger than the elasticity of the balls. At least it seems so. I made a copy with a smaller pool so it doesn't take so much time to reproduce the problem.
In the following example, with 6 balls (a mass of 150 units) pressing on the base row, we see that the 13 balls in the base row overlap. The base row has a width of ca. 300 pixels, which is only enough space for 12 balls of diameter 25. I think this is showing the limitation of the model: the balls are displayed circular but indeed have an amount of elasticity that they should display deformed instead. It's hard to say how this can be fixed without implementing drawing complicated shapes. Maybe less friction?
BTW: great physics engine you built there :-)
Meanwhile I was able to make another screenshot with even fewer balls. The weight of three of them (eq. 75 units) is sufficient to create overlapping in the base row.
I doubled the size of the balls and changed the pool dimensions as to detedt that there is a more serious error in the engine. I see that the balls are pressed so heavily under pressure that they have not enough space for their "volume" (area). Either they have to implode or it's elastic counter force must have greater impact of the whole scene. If you pay close attention to the pendulum movements made by the balls at the bottom, which have the least space, you will see that they are very violent, but apparently have no chance of reaching the outside.
Could it be that your evaluation order
balls.forEach(ball => {
ball.collide();
ball.move();
ball.display(displayWeight);
ball.checkCollisions();
});
is not able to propagate the collisions in a realistic way?

How to trigger animations in correct order in p5.js?

I'm trying to trigger animations in a simple pong game when the ball bounces off each edge. However, I'm struggling to get the animations to appear the way I want them to. I want the ellipses to draw on top of each other in the order that the edges are hit. This sometimes happens, but I believe the problem is that when two animation booleans are true at the same time, whichever animation appears later in the program flow will draw over the other. So the way I've laid it out below, the blue will always draw over the yellow if both are true, and the red will always draw over both blue and yellow if both are true.
Any assistance with this would be much appreciated! Thanks.
var bg = 220;
var x = 0;
var y = 200;
var speed = 3;
var speedY = 4;
var leftAnim = false;
var leftX;
var leftY;
var leftDiam = 40;
var rightAnim = false;
var rightX;
var rightY;
var rightDiam = 40;
var topAnim = false;
var topX;
var topY;
var topDiam = 40;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(bg);
noStroke();
edgeAnimation();
fill("white");
ellipse(x, y, 40, 40);
x += speed;
y += speedY;
if (x > width) {
//set rightAnim boolean to true to trigger right edge animation
rightAnim = true;
//update animating ellipse position variables to draw it at the same point where ball bounced
rightX = x;
rightY = y;
//reverse x direction of ball
speed *= -1;
}
if (x < 0) {
leftAnim = true;
leftX = x;
leftY = y;
speed *= -1;
}
// if the ball hits the top of the canvas, reverse the y direction of the ball
if (y < 0) {
topAnim = true;
topX = x;
topY = y;
speedY *= -1;
}
//if ball hits bottom of the canvas, stop the ball's motion
if (y > height) {
speed = 0;
speedY = 0;
}
//conditional to check for collision with paddle
if (x > mouseX && x < mouseX + 100 && y == height - 60) {
speedY *= -1;
}
// Paddle
rect(mouseX, height - 40, 100, 30);
}
function edgeAnimation() {
if (leftAnim == true) {
fill("gold");
ellipse(leftX, leftY, leftDiam);
leftDiam += 20;
//if animating ellipse fills the canvas, change the background color to the ellipse color, change leftAnim boolean to false and reset the diameter's size
if (leftDiam > 1150) {
bg = "gold";
leftAnim = false;
leftDiam = 40;
}
}
if (rightAnim == true) {
fill("RoyalBlue");
ellipse(rightX, rightY, rightDiam);
rightDiam += 20;
if (rightDiam > 1150) {
bg = "RoyalBlue";
rightAnim = false;
rightDiam = 40;
}
}
if (topAnim == true) {
fill("crimson");
ellipse(topX, topY, topDiam);
topDiam += 20;
if (topDiam > 1150) {
bg = "crimson";
topAnim = false;
topDiam = 40;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

Don't use boolean states, but use list of animations.
var animation = []
Is a new edge is hit the append a new animation data set at the end (.push) of the animation list:
function draw() {
// [...]
if (x > width) {
animation.push( {color: "RoyalBlue", x: x, y: y, diam:40} );
speed *= -1;
}
if (x < 0) {
animation.push( {color: "gold", x: x, y: y, diam: 40} );
speed *= -1;
}
if (y < 0) {
animation.push( {color: "crimson", x: x, y: y, diam: 40} );
speedY *= -1;
}
// [...]
}
The animations can be drawn in a loop. Keep only that animations which doesn't exceed the limit:
function edgeAnimation() {
var keepAnimation = []
for (let i = 0; i < animation.length; ++i) {
fill( animation[i].color );
ellipse( animation[i].x, animation[i].y, animation[i].diam );
animation[i].diam += 20;
if (animation[i].diam > 1150) {
bg = animation[i].color;
} else {
keepAnimation.push(animation[i]);
}
}
animation = keepAnimation;
}
See the example, wher I applied the suggestions to the code of the question:
var bg = 220;
var x = 0;
var y = 200;
var speed = 3;
var speedY = 4;
var animation = []
function setup() {
createCanvas(400, 400);
}
function draw() {
background(bg);
noStroke();
edgeAnimation();
fill("white");
ellipse(x, y, 40, 40);
x += speed;
y += speedY;
if (x > width) {
animation.push( {color: "RoyalBlue", x: x, y: y, diam:40} );
speed *= -1;
}
if (x < 0) {
animation.push( {color: "gold", x: x, y: y, diam: 40} );
speed *= -1;
}
if (y < 0) {
animation.push( {color: "crimson", x: x, y: y, diam: 40} );
speedY *= -1;
}
//if ball hits bottom of the canvas, stop the ball's motion
if (y > height) {
x = random(20, width-20);
y = 20;
speed = random(2,4);
speedY = 6 - speed;
}
//conditional to check for collision with paddle
if (x > mouseX && x < mouseX + 100 && y < height - 59 + speedY && y > height - 60) {
speedY *= -1;
y = height - 60
}
// Paddle
rect(mouseX, height - 40, 100, 30);
}
function edgeAnimation() {
var keepAnimation = []
for (let i = 0; i < animation.length; ++i) {
fill( animation[i].color );
ellipse( animation[i].x, animation[i].y, animation[i].diam );
animation[i].diam += 20;
if (animation[i].diam > 1150) {
bg = animation[i].color;
} else {
keepAnimation.push(animation[i]);
}
}
animation = keepAnimation;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

how to create a solid object in javascript

i am working on a simple game but i am stuck i have created 2 squares one that you can move and the other is supposed to be impassable but i cant find the code to make it a solid object. i need this as the second square will be a shelf on which the 1st square (the player) will jump on. this is just the start that i came across this problem and this game is no where near finished as i can not figure out how to do this many thanks.
<!DOCTYPE HTML>
<head>
<title>Something fancy</title>
</head>
<body>
<h3>Arrow keys to move, and space to jump</h3>
<canvas id="canvas"></canvas>
<style>
canvas{border:1px solid black;}
</style>
<script>
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
width = 800,
height = 500,
shelf = {
x : width/20,
y : height - 50,
width : 60,
height : 50
};
player = {
x : width/2,
y : height - 5,
width : 50,
height : 50,
speed: 5,
velX: 0,
velY: 0,
jumping: false
},
keys = [],
friction = 0.8,
gravity = 0.8;
canvas.width = width;
canvas.height = height;
function update(){
// check keys
if (keys[38] || keys[32]) {
// up arrow or space
if(!player.jumping){
player.jumping = true;
player.velY = -player.speed*2;
}
}
if (keys[39]) {
// right arrow
if (player.velX < player.speed) {
player.velX++;
}
}
if (keys[37]) {
// left arrow
if (player.velX > -player.speed) {
player.velX--;
}
}
player.velX *= friction;
player.velY += gravity;
player.x += player.velX;
player.y += player.velY;
if (player.x >= width-player.width) {
player.x = width-player.width;
} else if (player.x <= 0) {
player.x = 0;
}
if(player.y >= height-player.height){
player.y = height - player.height;
player.jumping = false;
}
ctx.clearRect(0,0,width,height);
ctx.fillStyle = " #BA004B";
ctx.fillRect(player.x, player.y, player.width, player.height);
if(createjs.Bitmap.prototype.getBoundingRect == null){
createjs.Bitmap.prototype.getBoundingRect = function(){
return new createjs.Rectangle(
this.x - this.image.width/2,
this.y - this.image.height/2,
this.image.width,
this.image.height);
}
}
if(createjs.Rectangle.prototype.intersects == null){
createjs.Rectangle.prototype.intersects = function(rect){
return (this.x <= rect.x + rect.width &&
rect.x <= this.x + this.width &&
this.y <= rect.y + rect.height &&
rect.y <= this.y + this.height);
}
}
// draw a small red box, which will eventually become our block.
ctx.fillStyle = "red";
ctx.fillRect(shelf.x, shelf.y, shelf.width, shelf.height);
requestAnimationFrame(update);
}
document.body.addEventListener("keydown", function(e) {
keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function(e) {
keys[e.keyCode] = false;
});
window.addEventListener("load",function(){
update();
});
</script>
</body>

The code you are talking about implementing is Collision Detection code. There are different ways to implement collisions, and the "right" implementation will depend on your game's needs.
Here is a good resource that will get you over your current hurdle, and will let you continue forward. Just know that you'll want to build out some kind of collision detecting and resolving functions that will run over all of your "collidable" objects as you introduce more.
http://www.gamefromscratch.com/post/2012/11/26/GameDev-math-recipes-Collision-detection-using-an-axis-aligned-bounding-box.aspx
To completely oversimplify basic collision detection:
Give your entities a shape and position
On each update/render loop:
a. check if any of your entity shapes overlap
b. Adjust the entities back to their previous position if they should not be overlapping.

HTML5 Canvas Image Moving Flickering

In canvas, there is a image, which moves on events of arrow keys.
But it flickers in firefox and works fine on chrome and ie.
I don't want a solution like to clear only the portion of canvas, because I have other things added in canvas too.
Below is my code:
var
velY = 0,
velX = 0,
speed = 2,
friction = 0.90,
keys = [],
canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
playerDirection="img/player/player_back.png";
function update() {
if (keys[38]) {
if (velY > -speed) {
velY--;
playerDirection="img/player/player_back.png";
}
}
if (keys[40]) {
if (velY < speed) {
velY++;
playerDirection="img/player/player_front.png";
}
}
if (keys[39]) {
if (velX < speed) {
velX++;
playerDirection="img/player/player_right.png";
}
}
if (keys[37]) {
if (velX > -speed) {
velX--;
playerDirection="img/player/player_left.png";
}
}
velY *= friction;
y += velY;
velX *= friction;
x += velX;
if (x >= canvas.width - player.width) {
x = canvas.width - player.width;
} else if (x <= 5) {
x = 5;
}
if (y > canvas.height - player.height) {
y = canvas.height - player.height;
} else if (y <= 5) {
y = 5;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
playerObj = new Image();
playerObj.onload = function()
{
ctx.drawImage(playerObj, x, y);
};
playerObj.src = playerDirection;
}
update();
function handlerKeyDown(e)
{
keys[e.keyCode] = true;
}
function handlerKeyUp(e) {
keys[e.keyCode] = false;
}
Thanks in adavance.

This is what I meant with "caching the images":
var images = {}; // This will contain the Image objects
// Other definitions...
function update() {
if (keys[38]) {
if (!images.back) {
// The image object hasn't been defined yet.
images.back = new Image();
images.back.src = "img/player/player_back.png";
}
playerObj = images.back;
}
// Other checks on the pressed keys
// ...
// Computations on the position...
if (!playerObj.naturalWidth) {
// If naturalWidth/Height is 0, then the image hasn't been loaded yet.
// We update the onload listener to draw in the right position.
playerObj.onload = function() {
ctx.drawImage(playerObj, x, y);
};
// The image has already been loaded, so we just draw it
} else ctx.drawImage(playerObj, x, y);
}
(As an warning on your code, it seems that you want to handle multiple pressed keys, but the last one in the sequence up-down-right-left always "wins" over the others. Is that really what you want?)