Processing: 'Under the hood' - Circles and Arcs

Processing Development
1

Hi,

So I have been trying to develop a separate application that relies heavy on the generation of pixel-by-pixel generation of circles and ellipses. However, do note 1) I am doing this app in Python, not Processing and 2) I am actually not so interested displaying a circle on the screen, but rather making a List/Stack of the (x,y) points that comprise that circle.

I’ve already tried out a number of the standard algorithms like Mid-Point and Bresenham’s (and even non-standard ones), and yes, they do produce a fine circle, but the particular way I am using them-- It is just not adding up right.

However, if I just ‘demo’ that same functionality in Processing, there is no problem.

In any case, seeing as Processing is open source, I just want to take a peak at the circle() and arc() functions.

I tried poking around the Processing V4 Github… But I can’t seem to find exactly where these functions reside (i.e. directory / file), or more importantly the calculations used.

Might someone direct me?

Best,
-A

2

The Processing code is unlikely to have what you’re looking for because it uses Java or OpenGL to do the actual rasterization of the geometry.

What is it about mid-point or Bresenham’s algorithms that doesn’t work for what you need? They can be tweaked to provide thick-edged, thin-edged, anti-aliased, or arbitrarily-centered circles. What’s the particular way that you want to use them?

1 Like
3

Hi @Nevermnd,

I agree with @scudly, you won’t find the actual implementation of the drawing algorithms in the Processing source code because it is at a lower level.

After cloning the repository you go up the stack of function calls:

Then you have different implementations (OpenGL and Java2D):

Which uses java.awt.Graphics2D function to draw an ellipse shape https://docs.oracle.com/javase/7/docs/api/java/awt/Graphics2D.html#draw(java.awt.Shape)

1 Like
4

I wrote a simple function creating the points of a ellipse. (I’m not that good in Python so I wrote it in Processing instead) but you should be able to adapt it:

java.util.List<Float> x=new ArrayList<Float>();
java.util.List<Float> y=new ArrayList<Float>();
void setup() {
  size(400, 400);
  genEllipse(100, 100, 40, 30);
  background(255);
  for (int i=0; i<x.size(); i++) {
    point(x.get(i), y.get(i));
    println(x.get(i), y.get(i));
  }
}
void draw() {
}
float f(float xi, float r1, float r2) {
  return r2*sqrt(1-(xi/r1)*(xi/r1));
}
float df(float xi, float r1, float r2) {
  if(sqrt(1-(xi/r1)*(xi/r1))==0) return 1000;
  return 2*r2*1/sqrt(1-(xi/r1)*(xi/r1))/r1/r1*xi;
}
void genEllipse(float xp, float yp, float r1, float r2) {
  for (float xi=-r1; xi<=r1; xi+=min(abs(1/df(xi,r1,r2)),1)) {
    x.add(xi+xp);
    x.add(xi+xp);
    float yoffset=r2*sqrt(1-(xi/r1)*(xi/r1));
    y.add(yp+yoffset);
    y.add(yp-yoffset);
  }
}

The idea behind this code is using that the plot of the function sqrt(1-x^2) is basically a half circle. Now the two radi are used to stretch this circle.
Also to make the graph more consistent I used the derivative to estimate how big of a step I should make to not make it look like the ellipse has a hole.

5

Thanks @scudly, @NumericPrime

That also explains why I couldn’t find anything when looking through the source.

I guess I didn’t realize Processing had such dependencies in that way. Makes sense though.