Develop Reference

Bouncing ball not staying the color assigned to it

I am writing a program for a ball to bounce off the edges of a box and change colors (much like the DVD logo). The problem is that once it changes colors, the fill function for the box overwrites the ball's color. I have tried conditionals and different function arrangements and asked my classmates for help, but none were helpful.
//
// Bounce1
// A simple bouncing ball - it has perfect bounces,
// it never slows down.
//These variables draw the canvas and the inner box
let canvasW = 900;
let canvasH = 700;
let innerborder = 100;
// These variables store the position, size, and speed.
let positionX = 300;
let positionY = 300;
let radius = 20;
let velocityX = 3;
let velocityY = 5;
//This variable helps with color change
let change = false;
function setup() {
createCanvas(canvasW, canvasH);
}
function draw() {
drawBackground();
moveBall();
drawBall();
}
function drawBackground(){
background(220);
innerRect();
}
function innerRect(){
fill (71, 71, 71);
rect (innerborder, 100, 700, 500);
}
function moveBall(){
// move the ball
positionX = positionX + velocityX;
positionY = positionY + velocityY;
const rightEdge = width - 100;
const leftEdge = 0 + 100;
const topEdge = 0 + 100;
const bottomEdge = height - 100;
// test to see if it hit an edge
if (positionX + radius > rightEdge) {
// hit the right edge
velocityX = velocityX * -1;
positionX = rightEdge - radius;
change = true;
if (change == true){
changeColor();
change = false
}
else if (change == false){
noFill();
}
}
else if (positionX - radius < leftEdge) {
// hit the left edge
velocityX = velocityX * -1;
positionX = leftEdge + radius;
change = true;
if (change == true){
changeColor();
change = false
}
else if (change == false){
noFill();
}
}
if (positionY + radius > bottomEdge) {
// hit the bottom edge
velocityY = velocityY * -1;
positionY = bottomEdge - radius;
change = true;
if (change == true){
changeColor();
change = false
}
else if (change == false){
noFill();
}
}
else if (positionY - radius < topEdge) {
// hit the top edge
velocityY = velocityY * -1;
positionY = topEdge + radius;
change = true;
if (change == true){
changeColor();
change = false
}
else if (change == false){
noFill();
}
}
}
function drawBall(){
// draw the ball
ellipse(positionX, positionY, radius * 2, radius * 2);
}
function changeColor(){
//Colors
let r = random(0, 255);
let g = random(0, 255);
let b = random(0, 255);
fill (r, g, b);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

Try storing the current ball colors in variables so you can re-call fill(ballRed, ballGreen, ballBlue) just before redrawing the ball. changed isn't necessary and doesn't really help with the fact that innerRect()'s fill() will override any other fill() calls that happened on previous frames.
const canvasW = 900;
const canvasH = 700;
const innerborder = 100;
let positionX = 300;
let positionY = 300;
let radius = 20;
let velocityX = 3;
let velocityY = 5;
let r, g, b;
let rightEdge;
let leftEdge;
let topEdge;
let bottomEdge;
function setup() {
createCanvas(canvasW, canvasH);
rightEdge = width - 100;
leftEdge = 0 + 100;
topEdge = 0 + 100;
bottomEdge = height - 100;
changeColor();
}
function draw() {
drawBackground();
moveBall();
if (checkCollision()) {
resolveCollision();
changeColor();
}
drawBall();
}
function drawBackground() {
background(220);
innerRect();
}
function innerRect() {
fill(71, 71, 71);
rect(innerborder, 100, 700, 500);
}
function moveBall() {
positionX = positionX + velocityX;
positionY = positionY + velocityY;
}
const checkCollision = () =>
positionX + radius > rightEdge ||
positionX - radius < leftEdge ||
positionY + radius > bottomEdge ||
positionY - radius < topEdge
;
const resolveCollision = () => {
if (positionX + radius > rightEdge) {
// hit the right edge
velocityX = velocityX * -1;
positionX = rightEdge - radius;
} else if (positionX - radius < leftEdge) {
// hit the left edge
velocityX = velocityX * -1;
positionX = leftEdge + radius;
}
if (positionY + radius > bottomEdge) {
// hit the bottom edge
velocityY = velocityY * -1;
positionY = bottomEdge - radius;
} else if (positionY - radius < topEdge) {
// hit the top edge
velocityY = velocityY * -1;
positionY = topEdge + radius;
}
};
function drawBall() {
fill(r, g, b);
ellipse(positionX, positionY, radius * 2, radius * 2);
}
function changeColor() {
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
After that, you might want to consider refactoring the code to put all of the loose variables and functions associated with a ball into an object. Something like
const ball = {
x: 42,
y: 42,
r: 0,
b: 0,
g: 0,
radius: 20,
vx: 3,
vy: 5,
changeColor() {
// ...
},
draw() {
// ...
},
// ...
};
and use it with ball.changeColor(). This logical grouping makes the code easier to read and extend.

p5js Moving Circles Collisions Detection

I have made a simple sketch where 4 circles are moving at a given speed. I want to change the fill color when any of the circles touches another circle.
I think the problem is that I am initializing the x and y values for ellipse in my constructor object which I need to update as the circle moves, but I am not sure how to do that.
// Declare objects
let bubble1;
let bubble2;
let bubble3;
let bubble4;
var centDistance;
function setup() {
createCanvas(windowWidth, windowHeight);
ellipseMode(CENTER);
// Create objects
bubble1 = new Bubble(50, 0, 2);
bubble2 = new Bubble(50, 2, 0);
bubble3 = new Bubble(50, -2, 0);
bubble4 = new Bubble(50, 0, -2);
}
function draw() {
background(0);
bubble1.display();
bubble2.display();
bubble1.move();
bubble2.move();
bubble3.display();
bubble3.move();
bubble4.display();
bubble4.move();
var d = dist(bubble1.x, bubble1.y, bubble2.x, bubble2.y);
if (d < bubble1.r + bubble2.r) {
bubble1.changeCol();
bubble2.changeCol();
}
}
class Bubble {
constructor(r, xSpeed, ySpeed) {
this.x = width / 2;
this.y = height / 2;
this.r = r;
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.fillColor = color(255);
this.move = function() {
if (this.x > width / 2 + 200 || this.x < width / 2 - 200) {
this.xSpeed = -this.xSpeed;
}
if (this.y > height / 2 + 200 || this.y < height / 2 - 200) {
this.ySpeed = -this.ySpeed;
}
this.x += this.xSpeed;
this.y += this.ySpeed;
}
this.display = function() {
fill(this.fillColor);
stroke(255);
ellipse(this.x, this.y, 2 * this.r);
}
this.changeCol = function() {
this.fillColor = color(0);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

The problem is that when the animation starts both circles are colliding, bubble1 and bubble2 in this example.
then you change the color to black inside your changeCol function and they both turn black and then stay that way indefinitely.
Your code is working the problem is that this.fillColor will not be re-initialized every re-render since you've instanciated your objects inside the setup function, so you have to re-paint the circles when they're not touching one another.
if (d < bubble1.r+bubble2.r) {
bubble1.changeCol(255);
bubble2.changeCol(255);
} else {
bubble1.changeCol(0);
bubble2.changeCol(0);
}
this.changeCol = function (col) {
this.fillColor = color(col);
}

P5.js how to do 8 directional lerp color/color change?

A last issue i have in this code is that i am not sure how to create color change effect as 8 directional.
I can only map a mouseX to make it lerpColor horizontally or vertically .
But how do i make it work through moving both mouseX and mouseY?
I had it in shift_Color method within the class. I tried to state that within a certain dist(), lerpColor. But now it only showing black color rather than the changing color effect.
let cubes = [];
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
backCol = color(243, 243, 243);
//background(backCol);
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
let xPos = map(i, 0, 9, 50, width - 50);
let yPos = map(j, 0, 9, 50, height - 50);
cubes.push(new Cubes(xPos, yPos));
}
}
}
function draw() {
background(backCol);
noFill();
for (let a = 0; a < cubes.length; a++) {
cubes[a].update();
}
}
class Cubes {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 30;
this.stroke = 70;
this.gap = 110
this.shift1 = color(96);
this.shift2 = color(244);
}
update() {
this.shape();
this.shift_Color();
}
shape() {
push();
stroke(this.stroke);
//fill(this.shift1);
this.shift_Color();
translate(this.x - width / 2, this.y - height / 2, 0);
this.magnetic()
box(this.size);
pop();
}
shift_Color() {
let distance = dist(mouseX, mouseY, this.x, this.y);
if (distance < this.gap) {
this.shift1 = color(96);
this.shift2 = color(244);
this.shiftX = map(mouseX - width/2,this.gap,distance,0,1.0);
this.change = lerpColor(this.shift1, this.shift2, this.shiftX);
fill(this.change);
} else {
fill(this.shift1);
}
}
magnetic() {
let distance = dist(mouseX, mouseY, this.x, this.y);
if (distance < this.gap) {
this.attract = atan2(mouseY - this.y, mouseX - this.x);
rotateX(this.attract);
rotateY(this.attract);
} else {
rotateX(millis() / 1000);
rotateY(millis() / 1000);
}
}
}

If I understood your question properly, there are two problems in your code.
The first is the fact that because you are trying to map the distance between mouse and the cube to number between 0 and 1, you should write lerpColor(this.shift2, this.shift1, this.shiftX) instead of lerpColor(this.shift1, this.shift2, this.shiftX), since this.shift2 is the lighter color and will be the inner color.
Another problem is when mapping the change variable, change should be calculated based on the distance between mouse and the cube (which is the distance variable), not mouseX or mouseY. Solution is to simply do map(distance, 0, this.gap, 0, 1);.
let cubes = [];
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
backCol = color(243, 243, 243);
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
let xPos = map(i, 0, 9, 50, width - 50);
let yPos = map(j, 0, 9, 50, height - 50);
cubes.push(new Cubes(xPos, yPos));
}
}
}
function draw() {
background(backCol);
noFill();
for (let cube of cubes) {
cube.update();
}
}
class Cubes {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 30;
this.stroke = 70;
this.gap = 110
this.shift1 = color(96);
this.shift2 = color(244);
}
update() {
this.shape();
this.shift_Color();
}
shape() {
push();
stroke(this.stroke);
//fill(this.shift1);
this.shift_Color();
translate(this.x - width / 2, this.y - height / 2, 0);
this.magnetic()
box(this.size);
pop();
}
shift_Color() {
let distance = dist(mouseX, mouseY, this.x, this.y);
if (distance < this.gap) {
this.shiftX = map(distance, 0, this.gap, 0, 1);
// this.shiftX = map(mouseX - width/2,this.gap,distance,0,1.0);
this.change = lerpColor(this.shift2, this.shift1, this.shiftX);
// this.change = lerpColor(this.shift1, this.shift2, this.shiftX);
fill(this.change);
} else {
fill(this.shift1);
}
}
magnetic() {
let distance = dist(mouseX, mouseY, this.x, this.y);
if (distance < this.gap) {
this.attract = atan2(mouseY - this.y, mouseX - this.x);
rotateX(this.attract);
rotateY(this.attract);
} else {
rotateX(millis() / 1000);
rotateY(millis() / 1000);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
I also modified some of your code. Like the line
this.shift1 = color(96);
this.shift2 = color(244);
which is not needed currently since neither of these variable changes during execution.

I'm attempting to write a program where the ball ignores hitting a green obstacle but ends the game when a red obstacle indicates game over

I'm attempting to write a JavaScript program where the ball ignores hitting a green obstacle but ends the game when a red obstacle indicates game over. However in my code the game ends when the ball hits an obstacle of any color.
My definition of the obstacle is:
function Obstacle(x, size, horizon, color) {
this.x = x;
this.y = horizon - size;
this.size = size;
this.color = color;
this.onScreen = true;
}
/**
* handle x and onScreen values
*/
Obstacle.prototype.update = function(speed) {
/* check if offscreen */
this.onScreen = (this.x > -this.size);
/* movement */
this.x -= speed;
};
Obstacle.prototype.draw = function() {
fill(this.color);
stroke(255);
strokeWeight(2);
rect(this.x, this.y, this.size, this.size);
};
Obstacle.prototype.hits = function(ball) {
var halfSize = this.size / 2;
var minimumDistance = halfSize + (ball.radius); // closest before collision
/* find center coordinates */
var xCenter = this.x + halfSize;
var yCenter = this.y + halfSize;
var distance = dist(xCenter, yCenter, ball.x, ball.y); // calculate distance from centers
return (distance < minimumDistance); // return result
};
This is the code for the game:
function setup() {
createCanvas(600, 200);
textAlign(CENTER);
horizon = height - 40;
score = 0;
obstacleSpeed = 6;
var size = 20;
ball = new bol(size * 2, height - horizon, size);
textSize(20);
}
function draw() {
background(51);
drawHUD();
handleLevel(frameCount);
ball.update(horizon);
handleObstacles();
//handlepowerups();
}
/**
* draws horizon & score
*/
function drawHUD() {
/* draw horizon */
stroke(255);
strokeWeight(2);
line(0, horizon, width, horizon);
/* draw score */
noStroke();
text("Score: " + score, width / 2, 30);
ball.draw();
}
/**
* updates, draws, and cleans out the obstacles
*/
function handleObstacles() {
for (var i = obstacles.length - 1; i >= 0; i--) {
obstacles[i].update(obstacleSpeed);
obstacles[i].draw();
if (obstacles[i].hits(ball)) // if there's a collision
{
if (obstacles[i].color = color(225, 0, 0))
endGame();
else
obstacles[i].color = color(0, 0, 225)
}
if (!obstacles[i].onScreen) // if it's no longer showing
obstacles.splice(i, 1); // delete from array
}
}
/**
* speeds game up, pushes new obstacles, & handles score
*/
function handleLevel(n) {
if (n % 100 === 0) { // every 0.5 seconds
var n = noise(n);
if (n > 0.5)
newObstacle(n); // push new obstacle
if (n % 120 === 0) // every 2 seconds
obstacleSpeed *= 1.05; // speed up
}
score++;
}
/**
* pushes random obstacle
*/
function newObstacle(n) {
var col1 = color(225, 0, 0);
var col2 = color(0, 225, 0);
var size = random(25) + 20;
var obs = new Obstacle(width + size, size, horizon, col2);
var obs2 = new Obstacle(width + size, size, horizon, col1);
var cases = random(1);
if (cases < 0.5)
obstacles.push(obs);
else
obstacles.push(obs2)
}
function keyPressed() {
if ((keyCode === UP_ARROW || keyCode === 32) && ball.onGround) // jump if possible
ball.jump();
boingaudio.play()
}
function endGame() {
noLoop();
noStroke();
textSize(40);
text("GAME OVER", width / 2, height / 2);
if (highscore !== null) {
if (score > highscore) {
localStorage.setItem("highscore", score);
}
} else {
localStorage.setItem("highscore", score);
}
textSize(20);
text("Highscore: " + highscore, width / 2, height / 2 + 20);
gameoveraudio.play()
}
I don't understand why the ball keeps ending game for no matter what colored ball appears. Can you help me figure out what's wrong?

You seem to be assigning a value to obstacles[i].color rather than testing it:
if (obstacles[i].color = color(225, 0, 0))
endGame();
else
obstacles[i].color = color(0, 0, 225)
This should probably read:
if (obstacles[i].color == color(225, 0, 0))
endGame();
Without your else, which seemed to serve no purpose.

p5.js Collision Detection

I'm trying to use p5.js's p5.collide2D library to execute some actions. I have a main pulsing module that pulses size-wise to music playing in my sketch, and then as it hits certain shapes I have displaying, I want it to reference the different functions I've set up to transform the main module visually.
Currently in this sketch I'm trying to get the Circle2 function to draw when touchX + touchY collides with the maroon circle. I thought I was using the library correctly, but maybe not. Any help would be great. Thanks!
var circles = [];
var squares = [];
var sizeProportion = 0.2;
//additional shapes
var r = 0;
var velocity = 1;
var fillColor = color(0, 0, 0);
var hit = false;
var startTime;
var waitTime = 3000;
var drawCircles;
var drawSquares;
function preload() {
sound = loadSound('assets/findingnemoegg.mp3');
}
function setup() {
createCanvas(windowWidth, windowHeight);
amplitude = new p5.Amplitude();
sound.loop();
sound.play();
startTime = millis();
}
function draw() {
background(255);
// other shapes + information
r = r + velocity;
if ((r > 256) || (r < 0)) {
velocity = velocity * -1;
}
noStroke();
fill(144, 12, 63, r);
ellipse(100, 100, 80, 80);
// drawing circles
circles.push(new Circle1(touchX, touchY));
for (var i = 0; i < circles.length; i++) {
circles[i].display();
if (circles[i].strokeOpacity <= 0) { // Remove if faded out.
circles.splice(i, 1); // remove
}
}
//collisions
if (pointTouchcircle2(touchX, 100, 100)) { // <- collision detection
//call upon Circle2 function and have the main module draw that
} else {
//stay the same.
}
}
//starting circles
function Circle1(x, y) {
this.x = x;
this.y = y;
this.size = 0;
this.age = 0;
this.fillOpacity = 20
this.strokeOpacity = 30
this.display = function() {
var level = amplitude.getLevel();
this.age++;
if (this.age > 500) {
this.fillOpacity -= 1;
this.strokeOpacity -= 1;
}
var newSize = map(level, 0, 1, 20, 900);
this.size = this.size + (sizeProportion * (newSize - this.size));
strokeWeight(10);
stroke(152, 251, 152, this.strokeOpacity);
fill(23, 236, 236, this.fillOpacity);
ellipse(this.x, this.y, this.size);
}
}
//maroon circles
function Circle2(x, y) {
this.x = x;
this.y = y;
this.size = 0;
this.age = 0;
this.fillOpacity = 20
this.strokeOpacity = 30
this.display = function() {
var level = amplitude.getLevel();
this.age++;
if (this.age > 500) {
this.fillOpacity -= 1;
this.strokeOpacity -= 1;
}
var newSize = map(level, 0, 1, 20, 900);
this.size = this.size + (sizeProportion * (newSize - this.size));
strokeWeight(10);
stroke(173, 212, 92, this.strokeOpacity);
fill(144, 12, 63, this.fillOpacity);
ellipse(this.x, this.y, this.size);
}
}
//collision functions
function pointTouchcircle2(touch, x, y) {
if (hit = collidePointCircle(touchX,touchY,100,100,50)) {
return true
} else {
return false
}
}