Почему одни шары показывают, что они столкнулись, а другие нет? - PullRequest
Новая
       24

Почему одни шары показывают, что они столкнулись, а другие нет?

1 голос
/ 17 апреля 2019

Я хочу, чтобы шары, в которых я появлялся, отскакивали друг от друга, когда они сталкиваются, но сначала я пытаюсь сделать так, чтобы код действительно обнаруживал, когда они сталкиваются.Для этого я меняю цвет шариков, которые сталкиваются друг с другом, а затем меняю их обратно на исходный цвет, когда они не сталкиваются.Иногда это работает, но в большинстве случаев - нет.Когда я вызываю шары, некоторые из них меняют цвет, когда они бьют друг друга, но затем не меняют цвет, когда они бьют по другому шару. 

// ctrl+alt+l to run
let fr = 60; // starting FPS
let balls = [];

function setup(){
    createCanvas(window.innerWidth,window.innerHeight);
    frameRate(fr);
}

function draw(){
    background(50);
    for(b of balls){
        b.move();
        b.show();
        b.bounce();
        for(other of balls){
            if(b != other && b.intersects(other)){
                b.changeColor(100);
        }else{
            b.changeColor(0);
        }
    }
  }
}

function mouseClicked(){
    b = new Ball(mouseX,mouseY,random(20,70),random(-10,10),random(-10,10));
    balls.push(b);
}

class Ball{
    constructor(_x,_y,_r,_sx,_sy){
        this.x = _x;
        this.y = _y;
        this.r = _r;
        this.sx = _sx;
        this.sy = _sy;
        this.brightness = 0;
    }

    move(){
        this.x += this.sx;
        this.y += this.sy;
    }

    show(){
      if(this.brightness==0){
          noFill();
      } else{
          fill(this.brightness)
      }
      stroke(255);
      strokeWeight(4);
      ellipse(this.x,this.y,this.r*2,this.r*2);
    }

    changeColor(bright){
        this.brightness = bright;
    }

    bounce(){
        if(this.x + this.r > width || this.x - this.r < 0){
            this.sx = this.sx * -1;
        }
        if(this.y + this.r > height || this.y - this.r < 0){
            this.sy = this.sy * -1;
        } 
    }

    intersects(other,color){
        if(dist(this.x,this.y,other.x,other.y) < this.r + other.r){
          return true;
        }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

1 Ответ

1 голос
/ 17 апреля 2019

В вашем коде 

for(b of balls){
    b.move();
    b.show();
    b.bounce();
    for(other of balls){
        if(b != other && b.intersects(other)){
            b.changeColor(100);
    }else{
            b.changeColor(0);
    }
}

цвет шара изменяется, если он сталкивается с другим шаром, но цвет меняется обратно, если следующий шар не 't * сталкиваются с.

В draw необходимо выполнить следующие шаги:

  • обновить позиции шаров.
  • проверить для каждого Ball объект, если он сталкивается с любым другим Ball
  • нарисовать все Ball s 
function draw(){
    background(50);

    for(b of balls){
        b.move();
        b.bounce();
    }

    for(b of balls){

        anyCollision = false;
        for(other of balls){
            if(b != other && b.intersects(other)){
                anyCollision = true;
                break;
            }
        }

        b.changeColor(anyCollision ? 100 : 0);
    }

    for(b of balls){
        b.show();
    }
}

См. пример, где я применил предложения к вашему исходному коду: 

let fr = 60; // starting FPS
let balls = [];

function setup(){
    createCanvas(window.innerWidth,window.innerHeight);
    frameRate(fr);
}

function draw(){
    background(50);
    
    for(b of balls){
        b.move();
        b.bounce();
    }

    for(b of balls){
        
        anyCollision = false;
        for(other of balls){
            if(b != other && b.intersects(other)){
                anyCollision = true;
                break;
            }
        }

        b.changeColor(anyCollision ? color(255, 0, 0) : 0);
    }

    for(b of balls){
        b.show();
    }
}

function mouseClicked(){
    b = new Ball(mouseX,mouseY,random(20,70),random(-10,10),random(-10,10));
    balls.push(b);
}

class Ball{
    constructor(_x,_y,_r,_sx,_sy){
        this.x = _x;
        this.y = _y;
        this.r = _r;
        this.sx = _sx;
        this.sy = _sy;
        this.brightness = 0;
    }

  move(){
      this.x += this.sx;
      this.y += this.sy;
  }

  show(){
    if(this.brightness==0){
        noFill();
    } else{
        fill(this.brightness)
    }
    stroke(255);
    strokeWeight(4);
    ellipse(this.x,this.y,this.r*2,this.r*2);
  }

  changeColor(bright){
      this.brightness = bright;
  }

  bounce(){
      if(this.x + this.r > width || this.x - this.r < 0){
          this.sx = this.sx * -1;
      }
      if(this.y + this.r > height || this.y - this.r < 0){
          this.sy = this.sy * -1;
      } 
  }

  intersects(other,color){
      if(dist(this.x,this.y,other.x,other.y) < this.r + other.r){
        return true;
      }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
...