I want my program to print out (“character has died”) when the ball has gone. Problem is I don’t know how to do it properly.
let balls = [];
let numBalls = 20;
let ballTextures = [];
let subaruImg, emiliaImg, remImg;
//------- Variables initialsed above ---------- //
function preload(){
subaruImg = loadImage('assets/subaru_chibi.jpg');
emiliaImg = loadImage('assets/emilaia_chibi.jpg');
remImg = loadImage('assets/rem_chibi.jpg');
ballTextures = [subaruImg, emiliaImg, remImg]; // Store my GOAT subaru and his friends in the array
}
// Preload is for images and textures
function setup() {
createCanvas(600, 600, WEBGL);
angleMode(DEGREES);
for (let i = 0; i < numBalls; i++) {
let pos = createVector(
random(-width / 2 + 20, width / 2 - 20),
random(-height / 2 + 20, height / 2 - 20),
random(-200, 200)
);
let vel = p5.Vector.random3D().mult(random(1, 2));
let r = random(20, 30);
// Let
let tex = random(ballTextures); //allows the t
balls.push(new Ball(pos, vel, r, tex));
}
frameRate(60);
}
function draw() {
background(20);
orbitControl(); // makes me be able to have 3d movementt on the canvas
//different lights
ambientLight(60, 60, 60);
directionalLight(255, 255, 255, -0.5, -1, -0.5);
// Moving point light (dynamic, cool effect)
let lightX = sin(frameCount * 0.01) * 300;
let lightY = cos(frameCount * 0.01) * 300;
let lightZ = sin(frameCount * 0.005) * 300;
pointLight(255, 255, 200, lightX, lightY, lightZ);
// Optional: visualize the light source
push();
translate(lightX, lightY, lightZ);
noStroke();
emissiveMaterial(255, 255, 200);
sphere(5); // glowing light orb
pop();
for (let i = 0; i < balls.length; i++) {
balls[i].move();
balls[i].edgeCheck();
balls[i].drawBall();
for (let j = i + 1; j < balls.length; j++) {
balls[i].checkCollision(balls[j]);
}
}
}
class Ball {
constructor(pos, vel, r, tex) {
this.pos = pos;
this.vel = vel;
this.r = r;
this.tex = tex;
this.life = 3; // start with 3 lives
this.alive = true;
}
drawBall() {
if (!this.alive) return; // don't draw if dead
push();
translate(this.pos.x, this.pos.y, this.pos.z);
texture(this.tex);
noStroke();
sphere(this.r);
pop();
}
move() {
if (!this.alive) return;
this.pos.add(this.vel);
}
edgeCheck() {
if (!this.alive) return;
if (this.pos.x + this.r > width / 2 || this.pos.x - this.r < -width / 2) {
this.vel.x *= -1;
}
if (this.pos.y + this.r > height / 2 || this.pos.y - this.r < -height / 2) {
this.vel.y *= -1;
}
if (this.pos.z + this.r > 300 || this.pos.z - this.r < -300) {
this.vel.z *= -1;
}
}
checkCollision(other) {
if (!this.alive || !other.alive) return;
let d = p5.Vector.dist(this.pos, other.pos);
if (d < this.r + other.r) {
// Swap velocities
let temp = this.vel.copy();
this.vel = other.vel.copy();
other.vel = temp;
// Separate overlapping balls
let overlap = (this.r + other.r - d) / 2;
let direction = p5.Vector.sub(this.pos, other.pos).normalize();
this.pos.add(direction.mult(overlap));
other.pos.sub(direction.mult(overlap));
// Decrease life
this.lifeCounter();
other.lifeCounter();
}
}
lifeCounter() {
this.life -= 1;
if (this.life <= 0) {
this.alive = false && new Ball(pos, vel, r, tex.subaruImg);
console.log("subaru has died");
}
if(this.life <=0) {
this.alive = false && new Ball(pos, vel, r, tex.emiliaImg);
console.log("emilia has died")
}
if(this.life <= 0){
this.alive = false && new Ball(pos, vel, r, tex.remImg);
console.log("Rem has died")
}
}
}html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>[It works perfectly seen here] [1]: https://i.sstatic.net/gJXn19Iz.png
However in the console log it does this [It shows 3 of them when the ball diseapears][2]
[2]: https://i.sstatic.net/lG4c5f09.png
The section I’m having trouble with is this method in the “ball” class at the end of the code
[life Counter method][3] [3]: https://i.sstatic.net/62zAcGBM.png
