We Keep Coding

3D Render With JS

I have a 3D Render of moving cubes, they are different colors, so it's like a rainbow. But I want to know if there is a way to make the squares pulse colors.
https://repl.it/#AlexanderLuna/R-A-I-N-B-O-W#index.html

colorMode(HSB, nums.x * nums.y, 1, 1) Is your answere.
Apply it in the update function and play around with the colors by altering 'nums.x * nums.y' values.
Use a timer or a simple tick (you can simply do tick++ in the update function) as a modifier until it reaches a certain iteration and then reset (or jump the value). You should get the desired effect.

Okey.. apparently I'm procrastinating and spent the last hour playing around with your Repl..
This might not be exactly what you're after, but maybe it'll help some..
class Cube {
constructor(x_, y_, z_, size_, offset_) {
this.x = x_;
this.y = y_;
this.z = z_;
this.size = size_;
this.offset = offset_;
this.angle = 0;
this.tick = 1; // starting point
this.hueSpeed = 2; // tick modifier
}
update(f) {
this.y = map(f(this.angle + this.offset), -1, 1, this.size / 2, height - this.size / 2);
this.angle += 0.05;
colorMode(HSB, this.tick, 1, 1);
/**
* The request is there to simply regulate the frequency of the tick a bit..
* Though we do need to cancel the previous request if hadn't yet fired
* Which I'm apparently to lazy to do atm
*/
window.requestAnimationFrame((e)=>{
this.tick += this.hueSpeed;
(this.tick > 150 || this.tick < 2) && (this.hueSpeed *= -1);
});
}
render() {
push();
stroke(0);
translate(this.x, this.y, this.z);
box(this.size);
pop();
}
}
This is the cube.js script file, the only one altered.

Collision check between vectors - moving vectors - HTML, JS, P5

I have created the collision check function for my player to every time when the object (in this case vector - circle) touches the player (also a vector - circle) the game is over.
I have managed to create a logic and there is a collision check working, however it's not calculating the actual distance between elements (instead of ending game when they actually touch its ending when they are some distance from each other.
Both objects are moving - obstacle is moving x+=6 and the player is following the coursor so the speed varies.
I have tried adjusting distance slightly and I have managed to end the game when the x of obstacle is touch x of the player but could not managed actually to when boarders touch. I attach the code I have below;
class Player {
constructor(x, y, r) {
this.pos = createVector(x, y);
this.r = r;
this.vel = createVector(500, 500);
this.mag = 3;
this.velLerp = 0.1;
}
update() {
let mouse = createVector(mouseX - width / 2,
mouseY - height / 2);
mouse.setMag(this.mag);
this.vel.lerp(mouse, this.velLerp);
this.pos.add(this.vel);
collisionCheck(obstacle) {
let d = p5.Vector.dist(this.pos, obstacle.pos);
if (d < this.r + obstacle.r) {
console.log("GAME OVER");
return true;
}

The issue is caused by the fact that the movement of the circles is 3 (this.mag) pixel. You just get the exact point of contact by chance. Most time they are intersecting.
If a collision is detected, change the player's position slightly by an offset of this.r + obstacle.r - d:
collisionCheck(obstacle) {
let d = p5.Vector.dist(this.pos, obstacle.pos);
if (d < this.r + obstacle.r) {
let shift = p5.Vector.sub(this.pos, obstacle.pos);
shift.setMag(this.r + obstacle.r - d);
this.pos.add(shift);
console.log("GAME OVER");
return true;
}
}

Give circle random direction after hitting another circle in p5.js

Im am creating a COVID-19 simulator where every circle in the simulation is a person. When two persons hit each other, i want the direction that they "bounce" off each other to be random. Currently i just mirror the current speed, which means the the persons follow a pre defined path, even when bouncing of each other.
This is my "move" function
move() {
if (this.willMove) {
this.xPos += this.xSpeed;
this.yPos += this.ySpeed;
}
}
This where i do my collision detection
collision(other) {
let distance = dist(this.xPos, this.yPos, other.xPos, other.yPos);
if (distance < this.personRadius + other.personRadius) {
this.changeDirection();
return true;
} else {
return false;
}
}
The things handeling the changing of direction:
changeDirection() {
this.mirrorXSpeed();
this.mirrorYSpeed();
}
mirrorXSpeed() {
this.xSpeed = this.xSpeed * -1;
}
mirrorYSpeed() {
this.ySpeed = this.ySpeed * -1;
}
I have tried multiplying the speed by -0.95, but this just decreases the speed.
The full project can be found here: https://github.com/perkynades/Simulation-of-COVID19/tree/part1

This might help, it will make all the people bounce in a random direction when called.
You will have to add this.speed to your person constructor, and make sure angle mode is set to radians.
changeDirection() {
//This next line will change the speed by a random amount,
//delete it if you don't like it,
//or change the range for a different behavior
this.speed += random(1,3) * random([-1,1])
let ang = random(PI * 2)
this.changeXSpeed(ang);
this.changeYSpeed(ang);
}
changeXSpeed(ang) {
this.xSpeed = this.speed * cos(ang);
}
changeYSpeed(ang) {
this.ySpeed = this.speed * sin(ang);
}
}
If you want a more realistic bounce, I would check out Chris courses video on Collision detection it gives a natural fell to circle on circle collisions, and even though it is not all P5.js, it is was very helpful to me and I hope that it will be for you too.

Why does the ball go through the paddle in Squashball game?

I'm working on yet another squash ball type (paddle hits ball) game using Javascript/HTML and I'm stuck at an issue that seems quite common in other context, but as far as I've looked I've found no good solution for this instance of it. Basically my game (unlike say pong) allows you to move your paddle in any direction. Yet if the paddle moves too fast towards a moving ball, the ball will go through it instead of allowing it to bounce.
I've tried using the velocity of the paddle and the ball to predict the next location of the ball but it still seems
My strategy has come down to tracking the velocity of the paddle and predicting where is it going to be next and then using that for my intersection, to avoid any coordinate gaps lost when moving the paddle to fast.
this.vx = this.x - this.lastX;
this.vy = this.y - this.lastY;
// predict next point
this.nextX = this.x + this.vx;
this.nextY = this.y + this.vy;
Then on my game loop I reverse the velocity if a collision is detected from the point calculation
const { paddle, ball } = this;
const isBallGoingLeft = Math.sign(ball.vx) === -1;
const paddleX = isBallGoingLeft ? paddle.nextX + paddle.w : paddle.nextX;
const nextBallX = isBallGoingLeft ? ball.nextX : ball.nextX + ball.w;
// insersect function found here
// found here: http://paulbourke.net/geometry/pointlineplane/
if (
intersect(
ball.x,
ball.y,
nextBallX,
ball.nextY,
paddleX,
paddle.y,
paddleX,
paddle.y + paddle.h
)
) {
ball.x = isBallGoingLeft ? paddleX : paddle.x - ball.w;
ball.vx = -ball.vx;
}
You can see a full fiddle here: https://jsfiddle.net/r8f0mxjn/4/
I would like to have the ball bounce when the paddle is coming towards it as well as add increase the velocity of the ball from the velocity of the paddle.

How do I put a height limit within a canvas game?

Right so I'm a bit new to JS and I wanted to know how to put a roof or height limit within this small canvas game. It's practically W3's code but the teacher told us to just model after it. I wanted to fix the annoying issue of just jumping over the map to avoid obstacles.
I don't really know what to try since the height is set by canvas. I tried to make a new function based of hitBottom() which failed.
Just wanted to put the roof or height limit. Here's the original source: Here. Everything is literally the same except colors.

What you want to do is see if the current y-position is lower than 0, since that would be the 'roof' of the room. If the player y position is lower than 0, reset it back to 0, and stop the acceleration.
this.hitTop = function() {
if (this.y < 0) {
this.y = 0;
this.gravitySpeed = 0;
}
}
And to the newpos function, you want to call this function, so add this:
this.hitTop();

Check for y position in newPos method after increasing the y position. If it is less than 0 then make it 0. Code should look like below;
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
/* Add below 4 lines */
if (this.y <= 0) {
this.y = 0;
this.gravitySpeed = 0;
}
/* Add above 4 lines */
this.hitBottom();
}
Happy coding ;)