Question

在处理js中，我遇到了麻烦。我写的代码有效，但只适用于一个圆圈。如果有两个或更多个圆圈，它们会开始闪烁（我猜这是来自background（）的缓慢刷新率）。我的代码中是否存在错误（在下面发布），或者仅仅是处理速度的限制？

我确信必须有一种方法可以在没有滞后的情况下实现相同的效果。我已经看到在处理过程中完成了更多的延迟。

另外，当两个圆圈重叠时，它们也开始闪烁（大约两倍）。有没有办法解决这个问题？

我的代码：


    int count;
    int[] circles;
    int numCircles;
    int color, color1, color2;
    void setup()
    {
    size($(document.body).width(),600);
    smooth();
    numCircles = 1;
    color = random(0,200);
    color1 = random(0, 200);
    color2 = random(0, 200);
    strokeWeight( 10 );

     frameRate( 60 );

count = 0;
circles = new int[numCircles*4];
for(int x = 0; x<circles.length; x+=4)
{
    circles[x]=random(0,width);
    circles[x+1]=random(0,height);
    if(random(0,1)==0)
    {
     circles[x+2] = 1;
    }
    else
    {
     circles[x+2] = -1;
    }
    if(random(0,1)==0)
    {
     circles[x+3] = 1;
    }
    else
    {
     circles[x+3] = -1;
    }

}


}



void draw()
{


background(255);
fill(255);
stroke(color, color1, color2);

ellipse(circles[count], circles[count+1], 500, 500);
if(abs(circles[count]-width)<=10)
{circles[count+2]=-abs(circles[count+2])}
if(abs(circles[count+1]-height)<=10)
{circles[count+3]=-abs(circles[count+3])}

if(circles[count]<=10)
{
 circles[count+2] = abs(circles[count+2]);
}
if(circles[count+1]<=10)
{
 circles[count+3] = abs(circles[count+3]);
}
circles[count]+=circles[count+2];
circles[count+1]+=circles[count+3];

count+=4;
if(count>circles.length-4)
{count = 0;

}

}

Answer 1

我弄清楚我做错了什么

通过for循环遍历draw函数中的每个圆圈，我发现我能够更新每个圆的位置，而不会导致draw（）函数的迭代之间的延迟，从而导致闪烁。

在绘制多个对象时，processingjs会闪烁

1 个答案: