javascript - 需要帮助使每个猫头鹰对象在 Canvas 上自行弹跳，而不是在同一路径上弹跳

Question

我希望每只猫头鹰都能自己在屏幕上弹跳，而不是沿着同一条路径弹跳

https://editor.p5js.org/nickBG/sketches/_96KYsurS

let rad = 45; // Width of the shape
let xpos, ypos; // Starting position of shape

let xspeed = 6; // Speed of the shape
let yspeed = 5.2; // Speed of the shape

let xdirection = 1.1; // Left or Right
let ydirection = 1.2; // Top to Bottom
let xspeed2 =10
let yspeed2  = 10

function setup() {
  createCanvas(650, 500); //sets up sketch
   noStroke();

  // Set the starting position of the owels
  xpos = width / 2;
  ypos = height / 2;
}

function draw() {
  background(125,155,155);

   for(let x = 30; x < width; x += 80){
    for(let y = 30; y < height; y += 80){
      drawEyes(100, 100);
       drawEyes(125, 100);
    }
  }
  
  // Update the position of the owels
  xpos = xpos + xspeed * xdirection;
  ypos = ypos + yspeed * ydirection;
    
  //*****
  xpos2 = xpos + xspeed * xdirection;
  ypos2 = ypos + yspeed * ydirection;
   //  reverse its direction by multiplying by -1 so owl stays on screen 
  if (xpos > width - rad || xpos < rad) {
    xdirection *= -1;
  }
  if (ypos > height - rad || ypos < rad) {
    ydirection *= -1;
  }

  display(xpos, ypos, 100);

  display(xpos2+100, ypos2, 70);
  display(xpos-130, ypos,150);
  display(xpos, ypos+130,90);
  display(xpos, ypos-120,70);
}

function drawBody(owlX, owlY, owlWidth, owlHeight) {//creates the body

  fill(139,69,19);//makes the brown body
  stroke(0);
  ellipse(owlX, owlY, owlWidth, owlHeight);

  fill(139,69,19);//makes brown head of owel 
  stroke(0);
  ellipse(owlX, owlY - owlWidth / 4, owlWidth / 1, owlHeight );
}

function drawEyes(owlX, owlY, owlWidth, owlHeight ){
  fill(255);

  if(random(10) < 9){
    fill(255);
     ellipse(owlX - 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);//left whites of eye
    ellipse(owlX + 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);//right whites of eye
     fill(0);//right pupil
  noStroke();
  ellipse( owlX + 20 , owlY - owlWidth / 2.5, owlWidth / 10, owlHeight);

//left pupil
  ellipse( owlX - 20 , owlY - owlWidth / 2.5, owlWidth / 10, owlHeight);
  }
  
  else {
    stroke(0);
    line(owlX - 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);    
    line(owlX + 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);    

  }
}

function drawBeak(owlX, owlY, owlWidth, owlHeight) {
  fill(60);
  stroke(0);
  strokeWeight();//creates the  beak 
  triangle(owlX +1, owlY - 20,owlX-8, owlY+ 1,owlX+ 20, owlY +8 );
}

function drawChin(owlX, owlY, owlWidth, owlHeight) {
  fill(160,82,1);
  stroke(0);
  strokeWeight();
  ellipse( owlX , owlY - owlWidth / 15, owlWidth / 1.3, owlHeight);//creates the off brown ellipse chin
}


function display(owlX, owlY, owlWidth, owlHeight) {//draws the owels

  drawBody(owlX, owlY, owlWidth, owlHeight);
  drawChin(owlX, owlY, owlWidth, owlHeight);
  drawEyes(owlX, owlY, owlWidth, owlHeight);
  drawBeak(owlX, owlY, owlWidth, owlHeight);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

Answer 1

您必须创建xpos、ypos、size、xspeed、yspeed<的数组、xdirection 和 ydirection。这些数组包含每只猫头鹰的单独值:

let rad = 45; // Width of the shape
let xpos, ypos; // Starting position of shape
let size;

let xspeed; // Speed of the shape
let yspeed; // Speed of the shape

let xdirection; // Left or Right
let ydirection ; // Top to Bottom

function setup() {
    createCanvas(650, 500); //sets up sketch
    noStroke();

    // Set the starting position of the owels
    let x = width / 2;
    let y = height / 2;
    xpos       = [x, x+100, x-120, x, x];
    ypos       = [y, y, y, y+130, y-120];
    size       = [100, 70, 150, 90, 70];
    xdirection = [1.1, 1.1, 1.1, 1.1, 1.1];
    ydirection = [1.2, 1.2, 1.2, 1.2, 1.2];
    xspeed     = [6, 10, 10, 10, 10];
    yspeed     = [5.2, 10, 10, 10, 10];
}

猫头鹰可以单独移动并循环绘制:

function draw() {
    background(125,155,155);

    for(let x = 30; x < width; x += 80){
        for(let y = 30; y < height; y += 80){
            drawEyes(100, 100);
            drawEyes(125, 100);
        }
    }

    for ( let i = 0; i < xpos.length; ++ i) {
        // Update the position of the owels
        xpos[i] += xspeed[i] * xdirection[i];
        ypos[i] += yspeed[i] * ydirection[i];

        if (xpos[i] > width - rad || xpos[i] < rad) {
            xdirection[i] *= -1;
        }
        if (ypos[i] > height - rad || ypos[i] < rad) {
            ydirection[i] *= -1;
        }
    }

    for ( let i = 0; i < xpos.length; ++ i) {
        display(xpos[i], ypos[i], size[i]);
    }
}

请参阅示例，其中我将更改应用于您的原始代码:

let rad = 45; // Width of the shape
let xpos, ypos; // Starting position of shape
let size;

let xspeed; // Speed of the shape
let yspeed; // Speed of the shape

let xdirection; // Left or Right
let ydirection ; // Top to Bottom

function setup() {
    createCanvas(650, 500); //sets up sketch
    noStroke();

    // Set the starting position of the owels
    let x = width / 2;
    let y = height / 2;
    xpos       = [x, x+100, x-120, x, x];
    ypos       = [y, y, y, y+130, y-120];
    size       = [100, 70, 150, 90, 70];
    xdirection = [1.1, 1.1, 1.1, 1.1, 1.1];
    ydirection = [1.2, 1.2, 1.2, 1.2, 1.2];
    xspeed     = [6, 10, 10, 10, 10];
    yspeed     = [5.2, 10, 10, 10, 10];
}

function draw() {
    background(125,155,155);

    for(let x = 30; x < width; x += 80){
        for(let y = 30; y < height; y += 80){
            drawEyes(100, 100);
            drawEyes(125, 100);
        }
    }
    
    for ( let i = 0; i < xpos.length; ++ i) {
        // Update the position of the owels
        xpos[i] += xspeed[i] * xdirection[i];
        ypos[i] += yspeed[i] * ydirection[i];

        if (xpos[i] > width - rad || xpos[i] < rad) {
            xdirection[i] *= -1;
        }
        if (ypos[i] > height - rad || ypos[i] < rad) {
            ydirection[i] *= -1;
        }
    }

    for ( let i = 0; i < xpos.length; ++ i) {
        display(xpos[i], ypos[i], size[i]);
    }
}

function drawBody(owlX, owlY, owlWidth, owlHeight) {//creates the body

  fill(139,69,19);//makes the brown body
  stroke(0);
  ellipse(owlX, owlY, owlWidth, owlHeight);

  fill(139,69,19);//makes brown head of owel 
  stroke(0);
  ellipse(owlX, owlY - owlWidth / 4, owlWidth / 1, owlHeight );
}

function drawEyes(owlX, owlY, owlWidth, owlHeight ){
  fill(255);

  if(random(10) < 9){
    fill(255);
     ellipse(owlX - 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);//left whites of eye
    ellipse(owlX + 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);//right whites of eye
     fill(0);//right pupil
  noStroke();
  ellipse( owlX + 20 , owlY - owlWidth / 2.5, owlWidth / 10, owlHeight);

//left pupil
  ellipse( owlX - 20 , owlY - owlWidth / 2.5, owlWidth / 10, owlHeight);
  }
  
  else {
    stroke(0);
    line(owlX - 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);    
    line(owlX + 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);    

  }
}

function drawBeak(owlX, owlY, owlWidth, owlHeight) {
  fill(60);
  stroke(0);
  strokeWeight();//creates the  beak 
  triangle(owlX +1, owlY - 20,owlX-8, owlY+ 1,owlX+ 20, owlY +8 );
}

function drawChin(owlX, owlY, owlWidth, owlHeight) {
  fill(160,82,1);
  stroke(0);
  strokeWeight();
  ellipse( owlX , owlY - owlWidth / 15, owlWidth / 1.3, owlHeight);//creates the off brown ellipse chin
}


function display(owlX, owlY, owlWidth, owlHeight) {//draws the owels

  drawBody(owlX, owlY, owlWidth, owlHeight);
  drawChin(owlX, owlY, owlWidth, owlHeight);
  drawEyes(owlX, owlY, owlWidth, owlHeight);
  drawBeak(owlX, owlY, owlWidth, owlHeight);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>