处理 - 从当前像素创建圆圈

Question

我正在使用处理，我正在尝试从我的显示器上的像素创建一个圆圈。 我设法拉出屏幕上的像素并从中创建一个不断增长的圆圈。

但是我正在寻找更复杂的东西，我想让它看起来好像显示器上的像素正在从它们当前的位置移动并形成一个转圈或类似的东西。

这是我现在拥有的：

    int c = 0;
    int radius = 30;
    allPixels = removeBlackP();
    void draw {
    loadPixels();
    for (int alpha = 0; alpha < 360; alpha++)
   {

      float xf =  350 + radius*cos(alpha);
      float yf =  350 + radius*sin(alpha);
      int x = (int) xf;
      int y = (int) yf;
      if (radius > 200) {radius =30;break;}
      if (c> allPixels.length) {c= 0;}
      pixels[y*700 +x] = allPixels[c];
      updatePixels();
  }
  radius++;
  c++;
  }

removeBlackP 函数返回一个数组，其中包含除黑色像素之外的所有像素。

此代码对我有用。有一个问题是圆圈只有int 的数字，所以圆圈内的一些像素似乎无法填充，我可以忍受。我正在寻找一些更复杂的东西，就像我解释的那样。

谢谢！

Answer 1

填充属于圆的扫描线的所有像素。使用这种方法，您将绘制圆圈内的所有位置。对于每条线计算起始坐标（结束一个是对称的）。伪代码：

for y = center_y - radius; y <= center_y + radius; y++
    dx = Sqrt(radius * radius - y * y)
    for x = center_x - dx; x <= center_x + dx; x++
          fill a[y, x] 

当您找到所有像素的位置时，您可以在初始像素位置和计算的位置之间建立关联，并逐步移动它们。

例如，如果第k个像素的初始坐标相对于中心点是（x0，y0），最终坐标是（x1，y1），并且您要进行M步，移动逐个螺旋，计算中间坐标：

calc values once:
r0 = Sqrt(x0*x0 + y0*y0)  //Math.Hypot if available
r1 = Sqrt(x1*x1 + y1*y1) 
fi0 = Math.Atan2(y0, x0)
fi1 = Math.Atan2(y1, x1)
if fi1 < fi0 then
    fi1 = fi1 + 2 * Pi;

for i = 1; i <=M ; i++
    x = (r0 + i / M * (r1 - r0)) * Cos(fi0 + i / M * (fi1 - fi0))
    y = (r0 + i / M * (r1 - r0)) * Sin(fi0 + i / M * (fi1 - fi0))
    shift by center coordinates    

Answer 2

在 Processing 中绘制圆圈的方式看起来有点复杂。

最简单的方法是使用ellipse() 函数，但不涉及像素：

如果您确实需要绘制椭圆并使用像素，您可以使用PGraphics，这类似于使用单独的缓冲区/“图层”来使用处理绘图命令进行绘制，但它也有pixels[]你可以访问。

假设你想画一个低分辨率的像素圆圆，你可以创建一个小的 PGraphics，禁用平滑，画圆，然后以更高的分辨率渲染圆。唯一的问题是这些绘图命令必须放在beginDraw()/endDraw() 调用中：

PGraphics buffer;

void setup(){
  //disable sketch's aliasing
  noSmooth();

  buffer = createGraphics(25,25);
  buffer.beginDraw();
  //disable buffer's aliasing
  buffer.noSmooth();
  buffer.noFill();
  buffer.stroke(255);
  buffer.endDraw();
}
void draw(){
  background(255);

  //draw small circle
  float circleSize = map(sin(frameCount * .01),-1.0,1.0,0.0,20.0);  
  buffer.beginDraw();
  buffer.background(0);
  buffer.ellipse(buffer.width / 2,buffer.height / 2, circleSize,circleSize);
  buffer.endDraw();

  //render small circle at higher resolution (blocky - no aliasing)
  image(buffer,0,0,width,height);
}

如果您想使用pixels[] 手动绘制一个圆，您在右侧使用极坐标到笛卡尔转换公式（x = cos（角度）* 半径，y = sin（角度）* 半径）。即使它是专注于绘制径向渐变，您可以在this answer中找到使用像素绘制圆的示例（实际上很多）