Changing color of PieChart

clandrie

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]);
}
}

GoToLoop

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);
  }
}

lmccart

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

clandrie

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]);
}
}

GoToLoop

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);
  }
}

GoToLoop

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