Flaw in processing.org website pieChart example

rtclay

In the examples section on the website, the Pie Chart example refers to the global "angles" array instead of the local function parameter "data". The example works because the sketch only calls pieChart while passing in the "angles" array. But a more robust, more copy-pasteable, less head-scratching example would refer to the "data" local variable instead of the "angle" global variable.

Who can make this change to the example on the website? Also, it is not clear which category this post ought to go into.

kfrajer

This is a modified version. Yes, I agree, the code in the website should be modified.

Kf

void setup() {
  size(640, 360);
  noStroke();
  //noLoop();  // Run once and stop
  frameRate(5);
}

void draw() {

  int[] angles = { 30, 10, 45, 35, 60, 38, 75, 67 };    
  background(100);
  pieChart(300, angles);
}

void pieChart(float diameter, int[] data) {
  float lastAngle = 0;
  float angShift=random(0.9, 1.3);
  for (int i = 0; i < data.length; i++) {
    float gray = map(i, 0, data.length, 0, 255);
    fill(gray);
    arc(width/2, height/2, diameter, diameter, lastAngle, (lastAngle+radians(data[i])*angShift));
    lastAngle += radians(data[i]*angShift);
  }
}

***Edited to reflect all angle calculations in radians

GoToLoop

// forum.Processing.org/two/discussion/17771/
// flaw-in-processing-org-website-piechart-example#Item_2

// Processing.org/examples/piechart.html

static final int[] ANGLES = { 30, 10, 45, 35, 60, 38, 75, 67 };

void setup() {
  size(640, 360);
  noLoop();
  noStroke();
}

void draw() {
  background(-1);
  pieChart(height - 24, ANGLES);
}

@ SafeVarargs final void pieChart(final int diam, final int... angles) {
  final int grey = 0400/angles.length, cx = width>>1, cy = height>>1;

  int idx = 0;
  float lastRad = 0;

  for (final int ang : angles) {
    fill(grey * idx++);
    arc(cx, cy, diam, diam, lastRad, lastRad += ang*DEG_TO_RAD);
  }
}

GoToLoop

https://GitHub.com/processing/processing-docs/issues

https://GitHub.com/processing/processing-docs/blob/4ad6d1299e3357d4475d73daeed6d6fdc6e29de7/content/examples/Basics/Form/PieChart/PieChart.pde

GoToLoop

http://studio.ProcessingTogether.com/sp/pad/export/ro.9cEo3JxuOM3wG

https://forum.processing.org/two/discussion/8115/changing-color-of-piechart

quark

The only change needed is to change the references to the angles array angles to the data array there is nothing wrong in leaving the angles array as global.

int[] angles = { 30, 10, 45, 35, 60, 38, 75, 67 };

void setup() {
  size(640, 360);
  noStroke();
  noLoop();  // Run once and stop
}

void draw() {
  background(100);
  pieChart(300, angles);
}

void pieChart(float diameter, int[] data) {
  float lastAngle = 0;
  for (int i = 0; i < data.length; i++) {
    float gray = map(i, 0, data.length, 0, 255);
    fill(gray);
    arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(data[i]));
    lastAngle += radians(data[i]);
  }
}

Since these examples as aimed at beginners I don't see the need to over complicate the syntax.

@rtclay since you discovered the error you should have the honour of raising an issue at

https://GitHub.com/processing/processing-docs/issues

kfrajer

If there is a global and local access to data, I would take the local access. This would be a good introductory approach for this example. Just my two cents. Yes, nothing awfully wrong.... Oh wait, one sec. GoToLoop also found something missing: The arc function takes radians instead of degrees as their parameters (from the arc reference ):

Use the start and stop parameters to specify the angles (in radians) at which to draw the arc.

Kf

quark

Global vs local I don't mind in this case. The problem was that the method was referring to the array using the global reference AND the parameter reference when should have been only referencing the latter.

The original example converted the angles to radians to degrees before using them so nothing new there.

kfrajer

When I copied the example and I modified, I overlooked the radians part. I modified my post to reflect proper units.

Kf

jeremydouglass

Submitted a pull request to processing-docs:

https://github.com/processing/processing-docs/pull/530