Flaw in processing.org website pieChart example

edited August 2016 in Hello Processing

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.

Answers

  • edited August 2016

    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

  • edited August 2016
    // 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);
      }
    }
    
  • edited August 2016

    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

  • 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

  • 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.

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

    Kf

Sign In or Register to comment.