Changing color of PieChart

edited November 2015 in p5.js

This is my first attempt at using p5.js I've been starting to build out some simple code for a college project but before I went too far, I wanted to figure out how to change the colors of each individual arc of my pie chart to a pre-determined color. Right now, they are simply ranges of gray.

I've searched through p5.js' website as well as the Processing forums but I cannot find a straight answer. And everything that I've tried has not worked.


Here is my code thus far:

var angles = [ 100, 75, 50, 90, 45];

function setup() {
createCanvas(1024, 768);
noStroke();
noLoop();
}

function draw() {
background(50,100,255,50);
pieChart(300, angles);

ellipseMode(CENTER);
fill(0,0,0,100);
noStroke();
ellipse(360, 360, 75, 75);

fill(255);
noStroke();
ellipse(360, 360, 72, 72);
}

function pieChart(diameter, data) {
var lastAngle = 0;
for (var i = 0; i < data.length; i++) {
var gray = map(i, 0, data.length, 0, 255);
fill(gray);
stroke(255);
strokeWeight(1.5);
arc(360, 360, diameter, diameter, lastAngle, lastAngle+radians(angles[i]));
line(360, 360, 360 + diameter/2 * cos(lastAngle), 360 + diameter/2 * sin(lastAngle));
lastAngle += radians(angles[i]);
}
}

Answers

  • edited December 2014 Answer ✓

    Please, when posting code in this forum, highlight it and hit CTRL+K in order to format it! L-)
    Unfortunately, P5.JS doesn't accept a whole value to represent an ARGB color like Java & JS Modes do so far! :(
    Unless it's gray scale, we've gotta pass the RGBA attributes 1-by-1 or as an array.
    Therefore, if you wanna a color for each piece of that pie, best option is pass an array of RGB or RGBA arrays:

    /**
     * DrawPieChart (v2.07)
     * by  Clandrie (2014/Nov/13)
     * mod GoToLoop
     *
     * forum.processing.org/two/discussion/8115/changing-color-of-piechart
     *
     * studio.processingtogether.com/sp/pad/export/ro.9cEo3JxuOM3wG/latest
     */
    
    const ANGLES = Object.freeze([100, 75, 50, 90, 45]); // total = 360°
    
    const COLORS = Object.freeze([
      [0xff, 0, 0], [0, 0x80, 0], [0, 0, 0xff], [0xff, 0xff, 0], [0, 0xff, 0xff]
    ]);
    
    function setup() {
      createCanvas(512, 480);
      ellipseMode(CENTER).smooth().noLoop();
      stroke(0), strokeWeight(2);
    }
    
    function draw() {
      background(0100, 0200, 0400, 0300);
      drawPieChart(ANGLES, COLORS, height*3 >> 2);
      fill(0350), ellipse(width>>1, height>>1, width/6, height/6);
    }
    
    function drawPieChart(angles, colors, diam) {
      const rad = diam>>1, cw = width>>1, ch = height>>1;
      var   idx = angles.length, angΣ = 0;
    
      while (idx--) {
        var ang = radians(angles[idx]);
        var dx  = cw + rad*cos(angΣ), dy = ch + rad*sin(angΣ);
    
        fill(colors[idx]);
        arc(cw, ch, diam, diam, angΣ, angΣ += ang);
        line(cw, ch, dx, dy);
      }
    }
    
  • Answer ✓

    hi @clandrie, if I understand correctly, you want the different slices to be different colors? in order to do that, you just need to pass in 3 values instead of 1 into line 27 where it says fill(gray);

    you might want to use HSB color mode also. so you could add colorMode(HSB); in setup and then replace line 27 with: fill(gray, 255, 255);

    if you wanted to use predetermined colors you can use an array like @GoToLoop suggests above. you could first create an array of colors like this:

    var colors = [ [255, 0, 0], [100, 200, 0], ... ];

    then access them in line 27 like:

    fill(colors[0]); first color in your array or fill(colors[1]); // second color in your array

  • edited December 2014

    Hi @Imccart Thank you so much! Your code worked perfectly! :-bd


    Here is my new code for anyone interested:

    var angles = [ 100, 75, 50, 90, 45];
    var colors = [ [5, 76, 87], [30, 99, 91], [36, 84, 100], [51, 55, 82], [120, 27, 71], [170, 64, 60] ];
    
    function setup() {
    createCanvas(1024, 768);
    noStroke();
    noLoop();
    colorMode(HSB);
    }
    
    function draw() {
    background(50,100,255,50);
    pieChart(300, angles);
    
    ellipseMode(CENTER);
    fill(0,0,0,100);
    noStroke();
    ellipse(360, 360, 75, 75);
    
    fill(255);
    noStroke();
    ellipse(360, 360, 72, 72);
    }
    
    function pieChart(diameter, data) {
    var lastAngle = 0;
    for (var i = 0; i < data.length; i++) {
    fill(colors[i]);
    stroke(255);
    strokeWeight(1.5);
    arc(360, 360, diameter, diameter, lastAngle, lastAngle+radians(angles[i]));
    line(360, 360, 360 + diameter/2 * cos(lastAngle), 360 + diameter/2 * sin(lastAngle));
    lastAngle += radians(angles[i]);
    }
    }
    
  • edited December 2014

    Hi! Converted "DrawPieChart" in Java too. Having same sketch in both languages may help folks trying P5.JS!
    You can also see it running online via Processing.JS (JS Mode): =:)
    http://studio.processingtogether.com/sp/pad/export/ro.9cEo3JxuOM3wG/latest

    /**
     * DrawPieChart (v2.07)
     * by  Clandrie (2014/Nov/13)
     * mod GoToLoop
     *
     * forum.processing.org/two/discussion/8115/changing-color-of-piechart
     *
     * studio.processingtogether.com/sp/pad/export/ro.9cEo3JxuOM3wG/latest
     */
    
    static final short[]  ANGLES = { // total = 360°
      100, 75, 50, 90, 45
    };
    
    static final color[] COLORS = {
      #FF0000, #008000, #0000FF, #FFFF00, #00FFFF
    };
    
    void setup() {
      size(512, 480, JAVA2D);
      ellipseMode(CENTER);
      smooth();
      noLoop();
      stroke(0);
      strokeWeight(2);
    }
    
    void draw() {
      background(0100, 0200, 0400, 0300);
      drawPieChart(ANGLES, COLORS, height*3 >> 2);
      fill(0350);
      ellipse(width>>1, height>>1, width/6, height/6);
    }
    
    void drawPieChart(short[] angles, color[] colors, int diam) {
      final int rad = diam>>1, cw = width>>1, ch = height>>1;
      int idx = angles.length;
      float angSum = 0;
    
      while (idx-- != 0) {
        float ang = radians(angles[idx]);
        float dx  = cw + rad*cos(angSum), dy = ch + rad*sin(angSum);
    
        fill(colors[idx]);
        arc(cw, ch, diam, diam, angSum, angSum += ang);
        line(cw, ch, dx, dy);
      }
    }
    
  • edited December 2014

    And why not "CoffeeScript Mode" version as well?: O:-)

    ###
     * DrawPieChart (v2.07))
     * by  Clandrie (2014/Nov/13)
     * mod GoToLoop
     *
     * forum.processing.org/two/discussion/8115/changing-color-of-piechart
     *
     * studio.processingtogether.com/sp/pad/export/ro.9cEo3JxuOM3wG/latest
    ###
    
    
    `const ANGLES = Object.freeze([100, 75, 50, 90, 45]) // total = 360°`
    `const COLORS = Object.freeze([
      0xffFF0000, 0xff008000, 0xff0000FF, 0xffFFFF00, 0xff00FFFF
    ])`
    
    
    setup: ->
    
      size 512, 480, JAVA2D
      ellipseMode CENTER; do smooth; do noLoop
      stroke 0; strokeWeight 2
    
    
    draw: ->
    
      background `0100`, `0200`, `0400`, `0300`
      drawPieChart ANGLES, COLORS, height*3 >> 2
      fill `0350`; ellipse width>>1, height>>1, width/6, height/6
    
    
    drawPieChart = (angles, colors, diam) ->
    
      rad = diam>>1; cw = width>>1; ch = height>>1
      idx = angles.length; angΣ = 0
    
      while idx--
    
        ang = radians angles[idx]
        dx  = cw + rad*cos angΣ; dy = ch + rad*sin angΣ
    
        fill colors[idx]
        arc  cw, ch, diam, diam, angΣ, angΣ += ang
        line cw, ch, dx, dy
    
    
      return
    
Sign In or Register to comment.