需要帮助，使这些猫头鹰对象中的每个对象都能自己在画布上反弹，而不是在同一条路径上反弹

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>