collisions on the canvas of 2 joined elements

Question

collisions on the canvas of 2 joined elements

Navigation

#1 by (0 votes)

0

bothering, what happens is that I have a molecule and I already have the collision with the canvas so that these molecules do not come out and bounce, the problem I have is that the collision is generated in my red atom (red circle) and not on target, I would appreciate your help on this occasion

JS

class AtomoClass{
    constructor(posx,posy,color,radio){
        this.posx=posx;
        this.posy=posy
        this.color=color;
        this.radio=radio;
        this.inicia=0;
        this.termina=2*Math.PI;
        this.angle = Math.random()*(2*Math.PI);
        this.movimientox = Math.cos(this.angle);
        this.movimientoy = Math.sin(this.angle);
        this.enlace = null;
    }
}
var atomos=[];
var ballRadius = 30;
var otroballRadius=20;
var canvasRecipiente = document.getElementById("recipiente");
var ctx = canvasRecipiente.getContext("2d");

for (var i= 0; i < 20; i++) {

    var atomoR = new AtomoClass(ballRadius+(Math.random()*(recipiente.width-(2*ballRadius))),(ballRadius+(Math.random()*(recipiente.height-(2*ballRadius)))),'red',ballRadius);
    atomos.push(atomoR);
    var atomoB = new AtomoClass(otroballRadius+(Math.random()*(recipiente.width-(2*otroballRadius))),(otroballRadius+(Math.random()*(recipiente.height-(2*otroballRadius)))),'white',otroballRadius);
    atomoB.enlace = atomoR;
    atomos.push(atomoB);

}
function atomoPinta(){
for (var j = 0; j < atomos.length; j++){
    var defaultX = atomos[j].posx;
    var defaultY = atomos[j].posy;

        if(atomos[j].enlace != null){
        defaultX = atomos[j].enlace.posx+15;
        defaultY = atomos[j].enlace.posy+25;
        }
        ctx.beginPath();
        ctx.arc(defaultX,defaultY,atomos[j].radio,atomos[j].inicia,atomos[j].termina);
        ctx.fillStyle = atomos[j].color;
        ctx.stroke();
        ctx.fill();
        ctx.closePath();
    }
}
function draw(){
    ctx.clearRect(0, 0, recipiente.width, recipiente.height);
    atomoPinta();

    for (var b = 0; b < atomos.length; b++) {

        if(atomos[b].posx + atomos[b].movimientox > recipiente.width-atomos[b].radio || atomos[b].posx + atomos[b].movimientox < atomos[b].radio) {
        atomos[b].movimientox = -atomos[b].movimientox;
        }
        if(atomos[b].posy + atomos[b].movimientoy > recipiente.height-atomos[b].radio || atomos[b].posy + atomos[b].movimientoy < atomos[b].radio) {
        atomos[b].movimientoy = -atomos[b].movimientoy;
        }
        atomos[b].posx += atomos[b].movimientox;
        atomos[b].posy += atomos[b].movimientoy;        
    }

    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

javascript canvas

asked by Jorge Gutierrez Yañez 24.09.2018 в 22:45

source

1 answer

Printing is repeated in SAP Script Update value of a field with Firestore and Android Studio

score 0 · Accepted Answer

I made some changes to your code but I'm sure you'll be able to recognize your code. In addition to the class that builds the atom, I have created another class that builds the molecule. This class has 2 atoms.

I do not keep the atoms in an array but the molecules.

Instead of calculating the movement of each atom, I calculate the movement of the center of the molecule.

The class of the molecule has a colision() method that changes the direction of movement if either of the two atoms touches the edge of the canvas.

I have left your way of calculating the speed, but this can sometimes generate a velocity = 0.

I hope this is what you wanted to do.

var canvasRecipiente = document.getElementById("recipiente");
var ctx = canvasRecipiente.getContext("2d");
var cw = (canvasRecipiente.width = window.innerWidth);
var ch = (canvasRecipiente.height = window.innerHeight);
var num_moleculas = 2;

var moleculas = [];
var ballRadius = 30;
var otroballRadius = 20;

class AtomoClass {
  constructor(posx, posy, color, radio) {
    this.posx = posx;
    this.posy = posy;
    this.color = color;
    this.radio = radio;
    this.inicia = 0;
    this.termina = 2 * Math.PI;
  }

  pinta() {
    ctx.beginPath();
    ctx.arc(this.posx, this.posy, this.radio, this.inicia, this.termina);
    ctx.fillStyle = this.color;
    ctx.stroke();
    ctx.fill();
    ctx.closePath();
  }
}

class Molecula {
  constructor() {
    let r_rojo = ballRadius + ballRadius * Math.random();
    let r_blanco = r_rojo / 2;
    
    this.centrox = 2*r_rojo + Math.random() * (recipiente.width - 4 * r_rojo);
    this.centroy = 2*r_rojo + Math.random() * (recipiente.height - 4 * r_rojo);

    this.angulo = Math.random() * 2 * Math.PI;
    this.movimientox = Math.cos(this.angulo);
    this.movimientoy = Math.sin(this.angulo);


    let posx_rojo = this.centrox + r_rojo * Math.cos(this.angulo);
    let posy_rojo = this.centroy + r_rojo * Math.sin(this.angulo);
    let posx_blanco = this.centrox + r_blanco * Math.cos(Math.PI + this.angulo);
    let posy_blanco = this.centroy + r_blanco * Math.sin(Math.PI + this.angulo);

    this.atomoR = new AtomoClass( // atomo rojo
      posx_rojo, //posx
      posy_rojo, //posy
      "red", //color
      r_rojo
    ); //radius

    this.atomoB = new AtomoClass( // atomo blanco
      posx_blanco, //posx
      posy_blanco, //posy
      "white", //color
      r_blanco
    ); //radius);//radius
  }

  pinta() {
    this.atomoR.posx = this.centrox + this.atomoR.radio * Math.cos(this.angulo);
    this.atomoR.posy = this.centroy + this.atomoR.radio * Math.sin(this.angulo);
    this.atomoB.posx =
      this.centrox + this.atomoB.radio * Math.cos(Math.PI + this.angulo);
    this.atomoB.posy =
      this.centroy + this.atomoB.radio * Math.sin(Math.PI + this.angulo);
    this.atomoR.pinta();
    this.atomoB.pinta();
  }

  movimiento() {
    this.centrox += this.movimientox;
    this.centroy += this.movimientoy;
  }

  colision() {
    if (
      this.atomoR.posx < this.atomoR.radio ||
      this.atomoR.posx > cw - this.atomoR.radio ||
      this.atomoB.posx < this.atomoB.radio ||
      this.atomoB.posx > cw - this.atomoB.radio
    ) {
      this.movimientox *= -1;
    }

    if (
      this.atomoR.posy < this.atomoR.radio ||
      this.atomoR.posy > ch - this.atomoR.radio ||
      this.atomoB.posy < this.atomoB.radio ||
      this.atomoB.posy > ch - this.atomoB.radio
    ) {
      this.movimientoy *= -1;
    }
  }
}

for (let i = 0; i < num_moleculas; i++) {
  moleculas.push(new Molecula());
}

function draw() {
  ctx.clearRect(0, 0, cw, ch);
  for (let i = 0; i < moleculas.length; i++) {
    let molecula = moleculas[i];
    molecula.colision();
    molecula.movimiento();
    molecula.pinta();
  }

  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

body,canvas{margin:0; padding:0}

<canvas id="recipiente"></canvas>