how can I make change the color of an object with a condition using rgba colors in canvas

Question

I'm trying to make a blackhole simulation, and although I'm almost done, I wish to make disappear the dots that are drawn on the blackhole progressively, here is my code:

 
 
  
       
       test trou noir

now as you can see, I created a variable called ccolor which is integrated in the rgba code, but I don't know why the colors don't tend to zero, so the circles that are inside the blackhole gradually disappear, if someone could lend me a hand it'd be great

markE · Accepted Answer

In update, if any circles[i] is captured by the Blackhole you decrement its this.color. It might be easier if you change this.color to an integer that you use to create a fillStyle:

ctx.fillStyle='rgba(' + this.color + ',' + this.color + ',' + this.color + ',1)'.

Here's a quick demo:

View this demo Full Page or the black hole is off-screen

var canvas, ctx;
var blackhole;
var circle;
var circles = new Array();
var G = 6.67e-11, //gravitational constant
  pixel_G = G / 1e-11,
  c = 3e8, //speed of light (m/s)
  M = 12e31, // masseof the blackhole in kg (60 solar masses)
  pixel_M = M / 1e32
Rs = (2 * G * M) / 9e16, //Schwarzchild radius 
  pixel_Rs = Rs / 1e3, // scaled radius 
  ccolor = 128;

function update() {
  var pos, i, distance, somethingMoved = false;
  for (i = 0; i < circles.length; i++) {
    pos = circles[i].position;
    distance = Math.sqrt(((pos.x - 700) * (pos.x - 700)) + ((pos.y - 400) * (pos.y - 400)));
    if (distance > pixel_Rs && visible(circles[i])) {
      var delta = new Vector2D(0, 0);
      var forceDirection = Math.atan2(pos.y - 400, pos.x - 700);
      var evelocity = Math.sqrt((2 * pixel_G * pixel_M) / (distance * 1e-2));
      delta.x += Math.cos(forceDirection) * evelocity;
      delta.y += Math.sin(forceDirection) * evelocity;
      pos.x += delta.x;
      pos.y += delta.y;
      somethingMoved = true;
    } else {
      circles[i].color -= 0.50;
    }
  }
  if (somethingMoved) {
    drawEverything();
    requestAnimationFrame(update);
  };
}

function visible(ball) {
  return ball.position.x > ball.radius && ball.position.x < canvas.width - ball.radius &&
    ball.position.y > ball.radius && ball.position.y < canvas.height - ball.radius;
}

function drawEverything() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  blackhole.draw(ctx);
  for (var i = 0; i < circles.length; i++) {
    if (visible(circles[i])) {
      circles[i].draw(ctx);
    }
  }
}

function init() {
  canvas = document.getElementById("space");
  ctx = canvas.getContext('2d');
  blackhole = new Ball(pixel_Rs, {
    x: 700,
    y: 400
  }, 0);

  for (var i = 0; i < 200; i++) {
    var vec2D = new Vector2D(Math.floor(Math.random() * 1400), Math.floor(Math.random() * 800));
    circle = new Ball(5, vec2D, ccolor);
    circles.push(circle);
  }
  drawEverything();
  requestAnimationFrame(update);
}

function Ball(radius, position, color) {
    this.radius = radius;
    this.position = position;
    this.color = color;
  }
  //
Ball.prototype.draw = function(ctx) {
  var c=parseInt(this.color);
  ctx.fillStyle = 'rgba(' + c + ',' + c + ',' + c + ',1)';
  ctx.beginPath();
  ctx.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fill();
};

function Vector2D(x, y) {
  this.x = x;
  this.y = y;
}

init();

body{ background-color: #021c36; margin: 0px; }

how can I make change the color of an object with a condition using rgba colors in canvas

Answers (2)

Related Questions