Random 我怎样才能随机移动这个三角形？p5.js

由于几天来我尝试设置三角形的动画，我想在画布上随机移动它。我所有的测试都失败了，所以如果你有一些建议，我愿意接受

我希望我的三角形像自由电子一样在x轴和y轴上随机移动，将来我希望有其他三角形随机移动，当它们相互接触时会反弹，但这是另一个步骤

我的代码：

设x=50；
设y=200；
设y1=100；
设y2=200
设x1=100；
设x2=150；
速度=5；
让我们开始着色；
让我们结束颜色；
设amt=0；
函数设置（）{
startColor=颜色（“hsl（172,100%，50%）”；
endColor=颜色（“hsl（335100%，50%）”；
createCanvas（窗口宽度，800）；
帧率（45）；
}
函数绘图（）{
彩色模式（RGB）；
背景（25223810）；
shape（）；//Appel de la函数形状
bounce（）；//appel de la fonction bounce
}
函数bounce（）{
x=x+速度；
x1=x1+速度；
x2=x2+速度；
y=y+速度
y1=y1+速度
y2=y2+速度
如果（x2>窗宽| | x<0）{
速度=速度*-1；
}
}
函数形状（）{
如果（金额>=1）{
金额=0；
设tmpColor=startColor；
startColor=endColor；
endColor=tmpColor；
}
amt+=0.01；
let colorTransition=lerpColor（起始颜色、结束颜色、金额）；
仰泳（）；
填充（颜色转换）；
三角形（x，y，x1，y1，x2，y2）；
}

首先，你有一个代码可以让你的三角形始终朝着同一个方向移动。要使其随机，您可以更改您使用的速度：

现在，每次调用

bounce

都会将三角形移动

速度

像素。因此，如果在调用

shape（）

之前在

draw（）

中添加以下内容，三角形将开始随机移动一小部分：

speed = map(random(), 0, 1, -5, 5);

有很多不同的方法可以做到这一点，这里我们利用处理的

random（）

来生成一个介于

0

和

1

之间的数字，以及

map（）

来获得介于

-5

和

5

之间的值

现在的问题是，您只有一种类型的速度，并且应用于轴

x

和

y

。您想要的可能是将

speedX

和

speedY

两个不同的值应用于您位置的两个组件

---

一旦你尝试这样做，你就会意识到为

speedX

和

speedY

设置两个变量不是很方便，你宁愿为你的位置设置一个变量，其中包含两个分量

x

和

y

，速度也一样。这样您就可以执行

位置=位置+速度
。这要求您重构代码以使用更面向对象的范例。要了解如何做到这一点，最好的在线资源之一是youtube频道的“代码的本质”播放列表。
我每天都在工作，我听从你的建议，现在这就是我的产品，谢谢大家

let triangle1;
let triangle2;
let triangle3;
let triangle4;
let triangle5;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;


function setup() {
    startColor = color("hsl(172, 100%, 50%)");
    endColor = color("hsl(335, 100%, 50%)");
    createCanvas(windowWidth, 800);
    //creer notre triangle
    triangle1 = new Triangles(200, 100, 0, 4);
    triangle2 = new Triangles(100, 50, 2, 0);
    triangle3 = new Triangles(50, 200, -1, 4);
    triangle4 = new Triangles(250, 400, 4, 4);
    triangle5 = new Triangles(150, 500, 0, 2);

}

function draw() {
    colorMode(RGB);
    background(252, 238, 10);
    triangle1.show();
    triangle1.move();
    triangle2.show();
    triangle2.move();
    triangle3.show();
    triangle3.move();
    triangle4.show();
    triangle4.move();
    triangle5.show();
    triangle5.move();

}


class Triangles {
    //configuration de l'objet
    constructor(triX, triY, speedX, speedY){
        this.x = triX;
        this.y = triY;
        this.speedX = speedX;
        this.speedY = speedY;

    }

    show(){
        if (amt >= 1) {
            amt = 0;
            let tmpColor = startColor;
            startColor = endColor;
            endColor = tmpColor;
        }
        amt += 0.01;
        let colorTransition = lerpColor(startColor, endColor, amt);
        noStroke();
        fill(colorTransition);
        noStroke();
        triangle(this.x, this.y, this.x + 25, this.y + 40, this.x -25, this.y + 40);
    }
    move(){
        this.x += this.speedX;
        this.y += this.speedY;

        if(this.x > width || this.x < 0){

            this.speedX *= -1;

        }
        if(this.y > height || this.y < 0){

            this.speedY = this.speedY * -1;

        }
    }
}

让三角形1；
设三角形2；
让三角形3；
设三角形4；
让三角形5；
让speedX；
让快速；
让我们开始着色；
让我们结束颜色；
设amt=0；
函数设置（）{
startColor=颜色（“hsl（172,100%，50%）”；
endColor=颜色（“hsl（335100%，50%）”；
createCanvas（窗口宽度，800）；
//克里尔-诺特尔三角
三角形1=新三角形（200,100,0,4）；
三角形2=新三角形（100,50,2,0）；
三角形3=新三角形（50200，-1,4）；
三角形4=新三角形（250、400、4、4）；
三角形5=新三角形（150500,0,2）；
}
函数绘图（）{
彩色模式（RGB）；
背景（25223810）；
三角形1.show（）；
三角形1.move（）；
三角形2.show（）；
三角形2.move（）；
三角形3.show（）；
三角形3.move（）；
三角形4.show（）；
三角形4.move（）；
三角形5.show（）；
三角形5.move（）；
}
类三角形{
//欧比特构型
建造师（triX、triY、speedX、speedY）{
这个.x=triX；
这个.y=triY；
this.speedX=speedX；
这个。迅速的=迅速的；
}
show（）{
如果（金额>=1）{
金额=0；
设tmpColor=startColor；
startColor=endColor；
endColor=tmpColor；
}
amt+=0.01；
let colorTransition=lerpColor（起始颜色、结束颜色、金额）；
仰泳（）；
填充（颜色转换）；
仰泳（）；
三角形（这个.x，这个.y，这个.x+25，这个.y+40，这个.x-25，这个.y+40）；
}
移动（）{
this.x+=this.speedX；
this.y+=this.speedY；
if（this.x>宽度| | this.x<0）{
此参数为.speedX*=-1；
}
if（this.y>高度| | this.y<0）{
this.speedY=this.speedY*-1；
}
}
}
谢谢您的时间和提示！我将分享我的代码，当它与你给我的帮助工作