Javascript 使用p5.js在图像上晃动形状

图为：

我使用p5.js在图像上绘制随机圆圈。我有下面的代码，使圆圈出现，我想。然而，我希望所有的点也能摆动一点。我很难弄清楚这方面。谢谢你给我小费！谢谢

let-img；
让小点，大点；
设fr=30；
函数预加载（）{
img=loadImage（'images/face.png'）；
}
函数设置（）{
createCanvas（720800）；
设cvn=createCanvas（10001000）；
设x=（windowWidth-width）/2；
设y=（窗高-高度）/2；
cvn.位置（x，y）；
小点=5；
大点=20；
仰泳（）；
背景（255）；
图像（img，0，0，720，800）；
img.loadPixels（）；
帧率；
}
函数绘图（）{
设pointillize=map（mouseX，0，width，smallPoint，largePoint）；
设x=地板（随机（img.宽度））；
设y=地板（随机高度）；
设pix=img.get（x，y）；
填充（pix）；
椭圆（x，y，pointillize，pointillize）；
}

要实现所需，必须更改设置。您必须重新绘制每帧中的所有点

每帧创建一个点并将该点存储到阵列：

points=[]
函数绘图（）{
设pointillize=map（mouseX，0，width，smallPoint，largePoint）；
设x=随机（img.宽度）；
设y=随机（img.高度）；
设pix=img.get（x，y）；
push（{x:x，y:y，颜色：pix，大小：pointillize}）；
// [...]

在每个帧中绘制图像，并在其上绘制所有点：

/[…]
for（设i=0；i

为了实现“摆动”效果，我建议使用该函数，计算偏移量，并使用随时间改变偏移量

为每个点创建一个随机刻度（

sx

，

sy

）和偏移（

dx

，

dx

）：

设dx=random（）；
设dy=random（）；
设sx=random（）；
设sy=random（）；
push（{x:x，y:y，颜色：pix，大小：pointillize，dx:dx，dy:dy，sx:sx，sy:sy}）；

根据时间计算摇摆效应（

t

）。在下列情况下，摆动取决于十分之一秒（

millis（）*0.01

），摆动量为-3到3：

设t=millis（）*0.01；

设x=p.x+sin（PI*p.dx+t*p.sx）*3；
设y=p.y+sin（PI*p.dy+t*p.sy）*3；
椭圆（x，y，p.size，p.size）；

请参见示例：

let-img；
让小点，大点；
设fr=100；
函数预加载（）{
img=loadImage（'https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/parrot_image.jpg');
}
函数设置（）{
设cvn=createCanvas（img.width，img.height）；
设x=（windowWidth-width）/2；
设y=（窗高-高度）/2；
cvn.位置（x，y）；
小点=5；
大点=20；
img.loadPixels（）；
帧率；
}
点数=[]
函数绘图（）{
设pointillize=map（mouseX，0，width，smallPoint，largePoint）；
设x=随机（img.宽度），y=随机（img.高度）；
设pix=img.get（x，y）；
设dx=random（），dy=random（），sx=random（），sy=random（）；
push（{x:x，y:y，颜色：pix，大小：pointillize，dx:dx，dy:dy，sx:sx，sy:sy}）；
仰泳（）；
背景（255）；
图像（img，0，0，img.width，img.height）；
设t=millis（）*0.01；
for（设i=0；i

---

我来试试！很抱歉回复太晚，我们忙了一周