#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# 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));
}
}
``````
Tagged:

• 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
*
*/

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--) {

fill(colors[idx]);
arc(cw, ch, diam, diam, angΣ, angΣ += ang);
line(cw, ch, dx, dy);
}
}
``````

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));
}
}
``````
• 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): =:)

``````/**
* DrawPieChart (v2.07)
* by  Clandrie (2014/Nov/13)
* mod GoToLoop
*
* forum.processing.org/two/discussion/8115/changing-color-of-piechart
*
*/

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) {

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
*
###

`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--