We Keep Coding

Objects not shown on screen & keyPressed not working (Flappy Bird Code Challenge)

I created flappy bird game following The Coding Train's tutorial on Youtube.
(https://www.youtube.com/watch?v=cXgA1d_E-jY)
The original instruction created pipes and ball as objects, but I modified mine to be created as classes instead.
I have two problems.
1)The pipes indices I created in pipes array did not show on screen,
2)ball.goup();, which would be triggered by keyPressed() does nothing on screen, but console.log shows it is working.
How should I revise my code? Thanks.
let ball;
let pipes = [];
function setup() {
createCanvas(700, 600);
ball = new Ball();
pipes.push(new Pipe());
}
function draw() {
background(0);
ball.show();
ball.falldown();
if (frameCount % 60 == 0) {
pipes.push(new Pipe());
}
//since have splice, count from back to avoid uncounted indices
for (let i = pipes.length - 1; i >= 0; i--) {
pipes[i].show();
pipes[i].move();
if (pipes[i].hits(ball)) {
console.log("hit");
}
if (pipes[i].offscreen()) {
pipes.splice(i, 1);
}
}
}
function keyPressed() {
if (key == ' ') {
ball.goup;
console.log('up');
}
}
class Ball {
constructor(x = 50, y = height / 2, g = 0.6, v = 0, l = -20) {
this.x = x;
this.y = y;
this.gravity = g;
this.velocity = v;
this.lift = l;
}
goup() {
this.velocity += this.lift;
}
falldown() {
this.velocity += this.gravity;
this.velocity *= 0.9;
this.y += this.velocity;
if (this.y > height) {
this.y = height;
this.velocity = 0;
}
if (this.y < 0) {
this.y = 0;
this.velocity = 0;
}
}
show() {
noStroke();
fill(255);
ellipse(this.x, this.y, 25, 25);
}
}
class Pipe {
constructor(x =width, y=0, w=100, t=random(2/height), b=random(2/height), s=2, c=false) {
this.x = x;
this.y = y;
this.w = w;
this.top = t;
this.bottom = b;
this.speed = s;
this.colorchange = c;
}
hits(ball) {
if (ball.y < this.top || ball.y > height - this.bottom) {
if(ball.x > this.x && ball.x < this.x + this.w){
this.colorchange = true;
return true;
}
}
this.colorchange = false;
return false
}
move() {
this.x -= this.speed;
}
show() {
fill(255);
if (this.colorchange) {
fill(255, 0, 0);
}
rect(this.x, this.y, this.w, this.top);
rect(this.x, height - this.bottom, this.w, this.bottom);
}
//delete pipe indices from the array when pipes are off screen
offscreen() {
if (this.x < -this.w) {
return true;
} else {
return false;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>

The logic is sound, but there are a couple of typos. First, the ball isn't going up because by using this.goup you're not executing the method: the parenthesis are missing. Change that line (inside the keyPressed() function) for: this.goup() and the ball will start responding to the keyboard input.
As for the pipes, they are drawing, but the default top and bottom are being defined as random(2 / height), and, being that height is equal to 600, it will result in a final value between 0 and 0.003333. To fix that, just rewrite the value assignment as t=random(height/2), b=random(height/2).
let ball;
let pipes = [];
function setup() {
createCanvas(700, 600);
ball = new Ball();
pipes.push(new Pipe());
}
function draw() {
background(0);
ball.show();
ball.falldown();
if (frameCount % 60 == 0) {
pipes.push(new Pipe());
}
//since have splice, count from back to avoid uncounted indices
for (let i = pipes.length - 1; i >= 0; i--) {
pipes[i].show();
pipes[i].move();
if (pipes[i].hits(ball)) {
//console.log("hit");
}
if (pipes[i].offscreen()) {
pipes.splice(i, 1);
}
}
}
function keyPressed() {
if (key == ' ') {
ball.goup();
//console.log('up');
}
}
class Ball {
constructor(x = 50, y = height / 2, g = 0.6, v = 0, l = -20) {
this.x = x;
this.y = y;
this.gravity = g;
this.velocity = v;
this.lift = l;
}
goup() {
this.velocity += this.lift;
}
falldown() {
this.velocity += this.gravity;
this.velocity *= 0.9;
this.y += this.velocity;
if (this.y > height) {
this.y = height;
this.velocity = 0;
}
if (this.y < 0) {
this.y = 0;
this.velocity = 0;
}
}
show() {
noStroke();
fill(255);
ellipse(this.x, this.y, 25, 25);
}
}
class Pipe {
constructor(x = width, y = 0, w = 100, t = random(height/2), b = random(height / 2), s = 2, c = false) {
this.x = x;
this.y = y;
this.w = w;
this.top = t;
this.bottom = b;
this.speed = s;
this.colorchange = c;
}
hits(ball) {
if (ball.y < this.top || ball.y > height - this.bottom) {
if (ball.x > this.x && ball.x < this.x + this.w) {
this.colorchange = true;
return true;
}
}
this.colorchange = false;
return false
}
move() {
this.x -= this.speed;
}
show() {
fill(255);
if (this.colorchange) {
fill(255, 0, 0);
}
rect(this.x, this.y, this.w, this.top)
rect(this.x, height - this.bottom, this.w, this.bottom);
}
//delete pipe indices from the array when pipes are off screen
offscreen() {
if (this.x < -this.w) {
return true;
} else {
return false;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>

I have been trying to make this ball bounce for a day. Why doesnt it work?

I am making a ball class, and in that class i want to make the ball bounce off the wall, but it remains stuck.
I have tried making the ball bounce in the draw function, but then it didnt even stopped at the wall. I tried setting the this.x and this.y away from the limit so it doesnt loop, but no succes. I am left without choises. I dont know what to do. I am just starting out and im quite enjoying coding, but this is giving me a headache.
let r;
let g;
let b;
let xpos;
let ypos;
let size;
let xlimit;
let ylimit;
let x_limit;
let y_limit;
let xspeeddir;
let yspeeddir;
function setup() {
createCanvas(800, 450);
xpos = random(20, width);
ypos = random(20, height);
ball = new Ball(xpos, ypos);
xlimit = width-15;
ylimit = height-15;
x_limit = 15;
y_limit = 15;
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
xspeeddir = random(-5,5);
yspeeddir = random(-5,5);
}
function draw() {
background(255, 238, 112);
ball.appear(r, g, b);
ball.move(xspeeddir, yspeeddir);
}
class Ball {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 30;
}
appear(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
fill(this.r, this.g, this.b);
noStroke();
ellipse(this.x, this.y, this.size, this.size);
}
move(xspeed, yspeed) {
this.speedx = xspeed;
this.speedy = yspeed;
if (this.x > xlimit) {
this.speedx = -Math.abs(this.speedx);
this.x = xlimit-1;
}
if (this.x < x_limit) {
this.speedx = Math.abs(this.speedx);
this.x = x_limit + 1;
}
if (this.y > ylimit) {
this.speedy = -Math.abs(this.speedy);
this.y = ylimit - 1;
}
if (this.y < y_limit) {
this.speedy = Math.abs(this.speedy);
this.y = ylimit + 1;
}
this.x = this.x + this.speedx;
this.y = this.y + this.speedy;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
No errors in the console

The speed of the ball is continuously "reset", when .move() is called. Set the speed in the constructor and use the attributes this.speedx and this.speedy in .move():
xspeeddir = random(-5,5);
yspeeddir = random(-5,5);
ball = new Ball(xpos, ypos, xspeeddir, yspeeddir);
function draw() {
background(255, 238, 112);
ball.appear(r, g, b);
ball.move();
}
It is not sufficient to invert the speed, you've to limit the position of the ball to the bounds of the window, too. If the ball exceeds the limit, then clamp the position in bounds.
move() {
if(this.x >= xlimit) {
this.x = xlimit; // limit to xlimit
this.speedx = -(this.speedx)
}
if (this.x <= this.size/2) {
this.x = this.size/2; // limit to this.size/2
this.speedx = -(this.speedx)
}
if (this.y >= ylimit) {
this.y = ylimit; // limit to ylimit
this.speedy = -(this.speedy)
}
if (this.y <= this.size/2) {
this.y = this.size/2; // limit to this.size/2
this.speedy = -(this.speedy)
}
this.x = this.x + this.speedx;
this.y = this.y + this.speedy;
}
let r, g, b;
let xpos, ypos;
let size;
let xlimit, ylimit;
let x_limit, y_limit;
let xspeeddir, yspeeddir;
function setup() {
createCanvas(500, 250);
xpos = random(20, width);
ypos = random(20, height);
xlimit = width-15;
ylimit = height-15;
x_limit = 15;
y_limit = 15;
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
xspeeddir = random(-5,5);
yspeeddir = random(-5,5);
ball = new Ball(xpos, ypos, xspeeddir, yspeeddir);
}
function draw() {
background(255, 238, 112);
ball.appear(r, g, b);
ball.move();
}
class Ball {
constructor(x, y, xspeed, yspeed) {
this.x = x;
this.y = y;
this.size = 30;
this.speedx = xspeed;
this.speedy = yspeed;
}
appear(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
fill(this.r, this.g, this.b);
noStroke();
ellipse(this.x, this.y, this.size, this.size);
}
move() {
if(this.x >= xlimit) {
this.x = xlimit; // limit to xlimit
this.speedx = -(this.speedx)
}
if (this.x <= this.size/2) {
this.x = this.size/2; // limit to this.size/2
this.speedx = -(this.speedx)
}
if (this.y >= ylimit) {
this.y = ylimit; // limit to ylimit
this.speedy = -(this.speedy)
}
if (this.y <= this.size/2) {
this.y = this.size/2; // limit to this.size/2
this.speedy = -(this.speedy)
}
this.x = this.x + this.speedx;
this.y = this.y + this.speedy;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

variable is not changing properties inside a class

I'm making a ball class / object that bounces around like the DVD screen thing. But when the balls hit the edge the variable that controles their X and Y speeds dont change.
I've already tried running the same IF statement outside the class whith the exact same names and everything and then it works but as soon as i do it inside the class it breaks.
var dvd1;
var dvd2;
function setup() {
createCanvas(400, 400);
dvd1 = new dvdlogo();
dvd2 = new dvdlogo();
}
function draw() {
background(255);
dvd1.move(2, 3);
dvd1.show(200, 200, 200);
dvd2.move(3, 2);
dvd2.show(255, 0, 0);
}
class dvdlogo {
constructor() {
this.x = 0;
this.y = 0;
}
move(speedX, speedY) {
this.x = this.x + speedX;
this.y = this.y + speedY;
//speedX and Y arn't changing when the statement is true
if (this.y >= height || this.y <= 0) {
speedY = -speedY;
}
if (this.x >= width || this.x <= 0) {
speedX = -speedX;
}
}
show(r, g, b) {
noStroke();
fill(r, g, b);
ellipse(this.x, this.y, 50, 50);
}
}
this is what the balls should do: https://editor.p5js.org/wiski/sketches/06p20NSgZ
this is what they do: https://editor.p5js.org/wiski/sketches/mym6EJenN
(If you know how to fix it tell me on here if u change the code in the web editor it doesn't send the changes to me thx in advance)

speedX and speedY are no global variables, they are parameters of the function move. speedY = -speedY changes the value of the parameter, but that doesn't effect the call of the function with the constant values dvd1.move(2, 3);.
The value of speedX and speedY is always 2 repectively 3, because the function move is called with this constant values.
Add attributes .speedX and .speedY to the class dvdlogo and use the attributes rather than parameters:
function setup() {
createCanvas(400, 400);
dvd1 = new dvdlogo(2, 3);
dvd2 = new dvdlogo(3, 2);
}
function draw() {
background(255);
dvd1.move();
dvd1.show(200, 200, 200);
dvd2.move();
dvd2.show(255, 0, 0);
}
class dvdlogo {
constructor(speedX, speedY) {
this.x = 0;
this.y = 0;
this.speedX = speedX;
this.speedY = speedY;
}
move() {
this.x = this.x + this.speedX;
this.y = this.y + this.speedY;
if (this.y >= height || this.y <= 0) {
this.speedY = -this.speedY;
}
if (this.x >= width || this.x <= 0) {
this.speedX = -this.speedX;
}
}

You are so close!
You are passing the xSpeed and the ySpeed in each frame with the .move() function this is making your if statement redundant!
What I recommend is specifying the xSpeed and ySpeed in the constructor, this way it'll be stored in the object for you, so your if statement can alter the fields directly!
var dvd1;
var dvd2;
function setup() {
createCanvas(400, 400);
dvd1 = new dvdlogo(2, 3);
dvd2 = new dvdlogo(3, 2);
}
function draw() {
background(255);
dvd1.move();
dvd1.show(200, 200, 200);
dvd2.move();
dvd2.show(255, 0, 0);
}
class dvdlogo {
constructor(xSpeed, ySpeed) {
this.x = 0;
this.y = 0;
this.speedX = xSpeed;
this.speedY = ySpeed;
}
move() {
this.x = this.x + this.speedX;
this.y = this.y + this.speedY;
if (this.y >= height || this.y <= 0) {
this.speedY = -this.speedY;
}
if (this.x >= width || this.x <= 0) {
this.speedX = -this.speedX;
}
}
show(r, g, b) {
noStroke();
fill(r, g, b);
ellipse(this.x, this.y, 50, 50);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

Corner Collision angles in p5.js

Summary:
In attempt to make a simple collision detection system between a moving rect and a falling circle, I would like to make it more realistic.
Main question:
-The main thing I would like to solve is detecting when the circle Object is hitting the corner of the rect and in return having the circle bounce based off of that angle.
The Code:
var balls = [];
var obstacle;
function setup() {
createCanvas(400, 400);
obstacle = new Obstacle();
}
function draw() {
background(75);
obstacle.display();
obstacle.update();
for (var i = 0; i < balls.length; i++) {
balls[i].display();
if (!RectCircleColliding(balls[i], obstacle)){
balls[i].update();
balls[i].edges();
}
//console.log(RectCircleColliding(balls[i], obstacle));
}
}
function mousePressed() {
balls.push(new Ball(mouseX, mouseY));
}
function Ball(x, y) {
this.x = x;
this.y = y;
this.r = 15;
this.gravity = 0.5;
this.velocity = 0;
this.display = function() {
fill(255, 0, 100);
stroke(255);
ellipse(this.x, this.y, this.r * 2);
}
this.update = function() {
this.velocity += this.gravity;
this.y += this.velocity;
}
this.edges = function() {
if (this.y >= height - this.r) {
this.y = height - this.r;
this.velocity = this.velocity * -1;
this.gravity = this.gravity * 1.1;
}
}
}
function Obstacle() {
this.x = width - width;
this.y = height / 2;
this.w = 200;
this.h = 25;
this.display = function() {
fill(0);
stroke(255);
rect(this.x, this.y, this.w, this.h);
}
this.update = function() {
this.x++;
if (this.x > width + this.w /2) {
this.x = -this.w;
}
}
}
function RectCircleColliding(Ball, Obstacle) {
// define obstacle borders
var oRight = Obstacle.x + Obstacle.w;
var oLeft = Obstacle.x;
var oTop = Obstacle.y;
var oBottom = Obstacle.y + Obstacle.h;
//compare ball's position (acounting for radius) with the obstacle's border
if (Ball.x + Ball.r > oLeft) {
if (Ball.x - Ball.r < oRight) {
if (Ball.y + Ball.r > oTop) {
if (Ball.y - Ball.r < oBottom) {
let oldY = Ball.y;
Ball.y = oTop - Ball.r;
Ball.velocity = Ball.velocity * -1;
if (Ball.gravity < 2.0){
Ball.gravity = Ball.gravity * 1.1;
} else {
Ball.velocity = 0;
Ball.y = oldY;
}
return (true);
}
}
}
}
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
Expected output:
I would like to see the falling circles bounce off the rectangle with respect to where they are hitting on the rectangle.
If the circles hit the corners they should bounce differently versus hitting dead center.

Prerequisite
The ball's velocity must be a vector (XY components), not just a single number.
1. Determine if the circle might hit a side or a corner
Obtain the components of the vector from the center of the rectangle to the circle, and check it against the rectangle's dimensions:
// Useful temporary variables for later use
var hx = 0.5 * obstacle.w;
var hy = 0.5 * obstacle.h;
var rx = obstacle.x + hx;
var ry = obstacle.y + hy;
// displacement vector
var dx = ball.x - rx;
var dy = ball.y - ry;
// signs
var sx = dx < -hx ? -1 : (dx > hx ? 1 : 0);
var sy = dy < -hy ? -1 : (dy > hy ? 1 : 0);
If both sx, sy are non-zero, the ball might hit a corner, otherwise it might hit a side.
2. Determine whether the circle collides
Multiply each sign by the respective half-dimension:
// displacement vector from the nearest point on the rectangle
var tx = sx * (Math.abs(dx) - hx);
var ty = sy * (Math.abs(dy) - hy);
// distance from p to the center of the circle
var dc = Math.hypot(tx, ty);
if (dc <= ball.r) {
/* they do collide */
}
3. Determine the collision normal vector
(tx, ty) are the components of the normal vector, but only if the ball's center is outside the rectangle:
// epsilon to account for numerical imprecision
const EPSILON = 1e-6;
var nx = 0, ny = 0, nl = 0;
if (sx == 0 && sy == 0) { // center is inside
nx = dx > 0 ? 1 : -1;
ny = dy > 0 ? 1 : -1;
nl = Math.hypot(nx, ny);
} else { // outside
nx = tx;
ny = ty;
nl = dc;
}
nx /= nl;
ny /= nl;
4. Resolve any "penetration"
(No immature jokes please)
This ensures that the ball will never penetrate into the surface of the rectangle, which improves the visual quality of the collisions:
ball.x += (ball.r - dc) * nx;
ball.y += (ball.r - dc) * ny;
5. Resolve the collision
If the circle is travelling in the direction of the normal, don't resolve the collision as the ball might stick to the surface:
// dot-product of velocity with normal
var dv = ball.vx * nx + ball.vy * ny;
if (dv >= 0.0) {
/* exit and don't do anything else */
}
// reflect the ball's velocity in direction of the normal
ball.vx -= 2.0 * dv * nx;
ball.vy -= 2.0 * dv * ny;
Working JS snippet
const GRAVITY = 250.0;
function Ball(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.vx = 0;
this.vy = 0;
this.display = function() {
fill(255, 0, 100);
stroke(255);
ellipse(this.x, this.y, this.r * 2);
}
this.collidePage = function(b) {
if (this.vy > 0 && this.y + this.r >= b) {
this.y = b - this.r;
this.vy = -this.vy;
}
}
this.updatePosition = function(dt) {
this.x += this.vx * dt;
this.y += this.vy * dt;
}
this.updateVelocity = function(dt) {
this.vy += GRAVITY * dt;
}
}
function Obstacle(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.display = function() {
fill(0);
stroke(255);
rect(this.x, this.y, this.w, this.h);
}
this.update = function() {
this.x++;
if (this.x > width + this.w /2) {
this.x = -this.w;
}
}
}
var balls = [];
var obstacle;
function setup() {
createCanvas(400, 400);
obstacle = new Obstacle(0, height / 2, 200, 25);
}
const DT = 0.05;
function draw() {
background(75);
obstacle.update();
obstacle.display();
for (var i = 0; i < balls.length; i++) {
balls[i].updatePosition(DT);
balls[i].collidePage(height);
ResolveRectCircleCollision(balls[i], obstacle);
balls[i].updateVelocity(DT);
balls[i].display();
}
}
function mousePressed() {
balls.push(new Ball(mouseX, mouseY, 15));
}
const EPSILON = 1e-6;
function ResolveRectCircleCollision(ball, obstacle) {
var hx = 0.5 * obstacle.w, hy = 0.5 * obstacle.h;
var rx = obstacle.x + hx, ry = obstacle.y + hy;
var dx = ball.x - rx, dy = ball.y - ry;
var sx = dx < -hx ? -1 : (dx > hx ? 1 : 0);
var sy = dy < -hy ? -1 : (dy > hy ? 1 : 0);
var tx = sx * (Math.abs(dx) - hx);
var ty = sy * (Math.abs(dy) - hy);
var dc = Math.hypot(tx, ty);
if (dc > ball.r)
return false;
var nx = 0, ny = 0, nl = 0;
if (sx == 0 && sy == 0) {
nx = dx > 0 ? 1 : -1; ny = dy > 0 ? 1 : -1;
nl = Math.hypot(nx, ny);
} else {
nx = tx; ny = ty;
nl = dc;
}
nx /= nl; ny /= nl;
ball.x += (ball.r - dc) * nx; ball.y += (ball.r - dc) * ny;
var dv = ball.vx * nx + ball.vy * ny;
if (dv >= 0.0)
return false;
ball.vx -= 2.0 * dv * nx; ball.vy -= 2.0 * dv * ny;
return true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

I'll try to present a solution, which keeps as may from the original code as possible. The solution intends to be a evolution of the code presented in the question.
Add a sideward movement (selv.sideV) to the Ball object, which is initialized by 0:
function Ball(x, y) {
this.x = x;
this.y = y;
this.r = 15;
this.gravity = 0.5;
this.velocity = 0;
this.sideV = 0
// ...
}
Move the ball to the side in update, by the sideward movement and reduce the sideward movment:
this.update = function() {
this.velocity += this.gravity;
this.y += this.velocity;
this.x += this.sideV;
this.sideV *= 0.98;
}
Create function for an intersection test of 2 boxes:
function IsectRectRect(l1, r1, t1, b1, l2, r2, t2, b2) {
return l1 < r2 && l2 < r1 && t1 < b2 && t2 < b1;
}
And a function which can calculate the refection vector R of an incident vector V to a the normal vector of surface N (the reflection like a billiard ball):
function reflect( V, N ) {
R = V.copy().sub(N.copy().mult(2.0 * V.dot(N)));
return R;
}
When the Ball collides with the Obstacle, then you've to handle 3 situations.
The Ball fully hits the top of the Obstacle: IsectRectRect(oL, oR, oT, oB, Ball.x, Ball.x, bT, bB)
The Ball hits the left edge of the Obstacle: IsectRectRect(oL, oL, oT, oB, bL, bR, bT, bB)
The Ball hits the right edge of the Obstacle: IsectRectRect(oR, oR, oT, oB, bL, bR, bT, bB)
In each case the normal vector for the reflection has to be calculated. This is the vector from either the top or the edge of the Obstacle to the center of the Ball.
Use the function reflect to bounce the Ball on the Obstacle:
function RectCircleColliding(Ball, Obstacle) {
let oL = Obstacle.x;
let oR = Obstacle.x + Obstacle.w;
let oT = Obstacle.y;
let oB = Obstacle.y + Obstacle.h;
let bL = Ball.x - Ball.r;
let bR = Ball.x + Ball.r;
let bT = Ball.y - Ball.r;
let bB = Ball.y + Ball.r;
let isect = false;
let hitDir = createVector(0, 1);
if ( IsectRectRect(oL, oR, oT, oB, Ball.x, Ball.x, bT, bB) ) {
isect = true;
} else if ( IsectRectRect(oL, oL, oT, oB, bL, bR, bT, bB) ) {
hitDir = createVector(Ball.x, Ball.y).sub(createVector(oL, oT))
isect = hitDir.mag() < Ball.r;
} else if ( IsectRectRect(oR, oR, oT, oB, bL, bR, bT, bB) ) {
hitDir = createVector(Ball.x, Ball.y).sub(createVector(oR, oT))
isect = hitDir.mag() < Ball.r;
}
if ( isect ) {
let dir = createVector(Ball.sideV, Ball.velocity);
R = reflect(dir, hitDir.normalize());
Ball.velocity = R.y;
Ball.sideV = R.x;
let oldY = Ball.y;
Ball.y = oT - Ball.r;
if (Ball.gravity < 2.0){
Ball.gravity = Ball.gravity * 1.1;
} else {
Ball.velocity = 0;
Ball.y = oldY;
}
return true;
}
return false;
}
See the example, where I applied the changes to your original code:
var balls = [];
var obstacle;
function setup() {
createCanvas(400, 400);
obstacle = new Obstacle();
}
function draw() {
background(75);
obstacle.display();
obstacle.update();
for (var i = 0; i < balls.length; i++) {
balls[i].display();
if (!RectCircleColliding(balls[i], obstacle)){
balls[i].update();
balls[i].edges();
}
//console.log(RectCircleColliding(balls[i], obstacle));
}
}
function mousePressed() {
balls.push(new Ball(mouseX, mouseY));
}
function Ball(x, y) {
this.x = x;
this.y = y;
this.r = 15;
this.gravity = 0.5;
this.velocity = 0;
this.sideV = 0
this.display = function() {
fill(255, 0, 100);
stroke(255);
ellipse(this.x, this.y, this.r * 2);
}
this.update = function() {
this.velocity += this.gravity;
this.y += this.velocity;
this.x += this.sideV;
this.sideV *= 0.98;
}
this.edges = function() {
if (this.y >= height - this.r) {
this.y = height - this.r;
this.velocity = this.velocity * -1;
this.gravity = this.gravity * 1.1;
}
}
}
function Obstacle() {
this.x = width - width;
this.y = height / 2;
this.w = 200;
this.h = 25;
this.display = function() {
fill(0);
stroke(255);
rect(this.x, this.y, this.w, this.h);
}
this.update = function() {
this.x++;
if (this.x > width + this.w /2) {
this.x = -this.w;
}
}
}
function IsectRectRect(l1, r1, t1, b1, l2, r2, t2, b2) {
return l1 < r2 && l2 < r1 && t1 < b2 && t2 < b1;
}
function reflect( V, N ) {
R = V.copy().sub(N.copy().mult(2.0 * V.dot(N)));
return R;
}
function RectCircleColliding(Ball, Obstacle) {
let oL = Obstacle.x;
let oR = Obstacle.x + Obstacle.w;
let oT = Obstacle.y;
let oB = Obstacle.y + Obstacle.h;
let bL = Ball.x - Ball.r;
let bR = Ball.x + Ball.r;
let bT = Ball.y - Ball.r;
let bB = Ball.y + Ball.r;
let isect = false;
let hitDir = createVector(0, 1);
if ( IsectRectRect(oL, oR, oT, oB, Ball.x, Ball.x, bT, bB) ) {
isect = true;
} else if ( IsectRectRect(oL, oL, oT, oB, bL, bR, bT, bB) ) {
hitDir = createVector(Ball.x, Ball.y).sub(createVector(oL, oT))
isect = hitDir.mag() < Ball.r;
} else if ( IsectRectRect(oR, oR, oT, oB, bL, bR, bT, bB) ) {
hitDir = createVector(Ball.x, Ball.y).sub(createVector(oR, oT))
isect = hitDir.mag() < Ball.r;
}
if ( isect ) {
let dir = createVector(Ball.sideV, Ball.velocity);
R = reflect(dir, hitDir.normalize());
Ball.velocity = R.y;
Ball.sideV = R.x;
let oldY = Ball.y;
Ball.y = oT - Ball.r;
if (Ball.gravity < 2.0){
Ball.gravity = Ball.gravity * 1.1;
} else {
Ball.velocity = 0;
Ball.y = oldY;
}
return true;
}
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

Event Listener only listening to two figures on the screen in Javascript and HTML Canvas

I have run into a problem with my program, which essentially moves 100 figures on a browser window and changes their direction if the user presses a key down. In order to determine if a user has pressed a key, I used an event listener, but the problem is that the event listener only works for two of the figures on the screen. I can only change the direction of two figures, while the other figures continue to move around the screen and not respond to user input. I have attached all of my code below, and I would really appreciate if someone could help me figure out the problem! Thanks!
let canvas = document.querySelector("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
// console.log(innerWidth)
// console.log(innerHeight)
let c = canvas.getContext("2d")
let changeDirection = undefined
let repeatone = 0
let repeattwo = 0
window.addEventListener('keydown', function(event) {
repeatone = 0
repeattwo = 0
changeDirection = true
console.log(changeDirection)
})
window.addEventListener('keyup', function(event) {
changeDirection = false
console.log(changeDirection);
})
function random_rgba() {
var o = Math.round,
r = Math.random,
s = 255;
return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
}
// c.arc(xCircle, yCircle, radius, 0, Math.PI * 2, false)
function Circle(x, y, dx, dy, radius, color) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.radius = radius
this.color = color
this.draw = function() {
// c.strokeStyle = this.color
c.beginPath()
c.strokeStyle = this.color
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
c.stroke()
}
this.update = function() {
repeatone += 1
if (changeDirection === true && repeatone <= 1) {
this.dx = -this.dx
this.dy = -this.dy
if (this.x >= innerWidth - this.radius) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.radius) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
} else if (changeDirection === false || repeatone > 1) {
if (this.x >= innerWidth - this.radius) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.radius) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
}
}
}
function Rectangle(x, y, dx, dy, height, width, color) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.height = height
this.width = width
this.color = color
this.draw = function() {
c.beginPath()
c.fillStyle = this.color
c.fillRect(this.x, this.y, this.width, this.height)
}
this.update = function() {
repeattwo += 1
if (changeDirection === true && repeattwo <= 1) {
this.dx = -this.dx
this.dy = -this.dy
if (this.x >= innerWidth - this.width) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.height) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
} else if (changeDirection === false || repeattwo > 1) {
if (this.x >= innerWidth - this.width) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.height) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
}
}
}
// let x = Math.floor((Math.random() * innerWidth) + 1)
// let dx = Math.floor((Math.random() * 10) + 1)
// let y = Math.floor((Math.random() * innerHeight) + 1)
// let dy = Math.floor((Math.random() * 10) + 1)
//
// console.log("X Value " + x)
// console.log("Y Value " + y)
// console.log("X Velocity Value " + dx)
// console.log("Y Velocity Value " + dy)
//
let rectangleArray = []
let circleArray = []
for (var i = 0; i < 50; i++) {
let xRect = Math.floor((Math.random() * innerWidth) + 1)
let dxRect = Math.floor((Math.random() * 10) + 1)
let yRect = Math.floor((Math.random() * innerHeight) + 1)
let dyRect = Math.floor((Math.random() * 10) + 1)
let heightRect = Math.floor((Math.random() * 250) + 1)
let widthRect = Math.floor((Math.random() * 250) + 1)
let colorRect = random_rgba()
let xCircle = Math.floor((Math.random() * innerWidth) + 1)
let dxCircle = Math.floor((Math.random() * 10) + 1)
let yCircle = Math.floor((Math.random() * innerHeight) + 1)
let dyCircle = Math.floor((Math.random() * 10) + 1)
let heightCircle = Math.floor((Math.random() * 250) + 1)
let widthCircle = Math.floor((Math.random() * 250) + 1)
let colorCircle = random_rgba()
let radiusCircle = Math.floor((Math.random() * 100) + 1)
rectangleArray.push(new Rectangle(xRect, yRect, dxRect, dyRect, heightRect, widthRect, colorRect))
circleArray.push(new Circle(xCircle, yCircle, dxCircle, dyCircle, radiusCircle, colorCircle))
}
console.log(circleArray)
console.log(rectangleArray)
function animate() {
requestAnimationFrame(animate)
c.clearRect(0, 0, innerWidth, innerHeight)
for (var i = 0; i < rectangleArray.length; i++) {
rectangleArray[i].draw()
rectangleArray[i].update()
}
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].draw()
circleArray[i].update()
}
}
animate()
<canvas></canvas>

You had a lot of code, I remove a lot of it...
Take a look at the new logic under the addEventListener
Troubleshooting cases like this the first thing I do is reduce the scope:
you had 100 figures, I took it down to 6
your animation was too fast, I reduced the speed.
lot's of random stuff on the code that created the figures, I hard-coded some of that.
you had changeDirection, repeatone & repeattwo, I could not figure out what you needed those for so I remove them.
let canvas = document.querySelector("canvas")
canvas.width = canvas.height = innerWidth = innerHeight = 300
let c = canvas.getContext("2d")
window.addEventListener('keydown', function(event) {
for (var i = 0; i < rectangleArray.length; i++) {
rectangleArray[i].dx *= -1
rectangleArray[i].dy *= -1
}
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].dx *= -1
circleArray[i].dy *= -1
}
})
function random_rgba() {
var o = Math.round,
r = Math.random,
s = 255;
return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
}
// c.arc(xCircle, yCircle, radius, 0, Math.PI * 2, false)
function Circle(x, y, dx, dy, radius, color) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.radius = radius
this.color = color
this.draw = function() {
// c.strokeStyle = this.color
c.beginPath()
c.strokeStyle = this.color
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
c.stroke()
}
this.update = function() {
if (this.x >= innerWidth - this.radius) {
this.dx = -this.dx
} else if (this.x <= this.radius) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.radius) {
this.dy = -this.dy
} else if (this.y <= this.radius) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
}
}
function Rectangle(x, y, dx, dy, height, width, color) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.height = height
this.width = width
this.color = color
this.draw = function() {
c.beginPath()
c.fillStyle = this.color
c.fillRect(this.x, this.y, this.width, this.height)
}
this.update = function() {
if (this.x >= innerWidth - this.width) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.height) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
}
}
function randSpeed() {
return (Math.random() - 0.5) * 5
}
let rectangleArray = []
let circleArray = []
for (var i = 0; i < 3; i++) {
let heightRect = Math.floor((Math.random() * 100) + 1)
let widthRect = Math.floor((Math.random() * 100) + 1)
rectangleArray.push(new Rectangle(80, 80, randSpeed(), randSpeed(), heightRect, widthRect, random_rgba()))
let radiusCircle = Math.floor((Math.random() * 50) + 1)
circleArray.push(new Circle(80, 80, randSpeed(), randSpeed(), radiusCircle, random_rgba()))
}
function animate() {
requestAnimationFrame(animate)
c.clearRect(0, 0, innerWidth, innerHeight)
for (var i = 0; i < rectangleArray.length; i++) {
rectangleArray[i].draw()
rectangleArray[i].update()
}
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].draw()
circleArray[i].update()
}
}
animate()
<canvas></canvas>