提问者:小点点

处理-从当前像素创建圆


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

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

这就是我现在所拥有的:

    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的数字,所以圆圈内的一些像素似乎无法填充,我可以忍受。我正在寻找更复杂的东西,就像我解释的那样。

谢谢!


共2个答案

匿名用户

填充属于圆的扫描线的所有像素。使用这种方法,您将绘制圆内的所有位置。对于每一行计算开始坐标(结束一是对称的)。伪代码:

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    

匿名用户

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

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

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

假设您想绘制一个低分辨率像素圆圈,您可以创建一个小的PGraphics,禁用平滑,绘制圆圈,然后以更高的分辨率渲染圆圈。唯一的问题是这些绘图命令必须放置在getinDraw()/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);
}

如果你想使用像素[]手动绘制一个圆,你在右边使用极坐标到笛卡尔的转换公式(x=cos(角度)*半径,y=sin(角度)*半径)。即使它专注于绘制径向梯度,你也可以在这个答案中找到一个使用像素绘制圆的例子(实际上很多)