Trig Wheels and Pie Chart
contributed by
Prof WM Harris, How to create
a trig color wheel and a visualization of a population age data as a
pie chart.
Functions are
created for the canvas setup, trig color wheel, drawslice, and pie
chart. The size of the slices are determined as well as their color
range. The pie chart is separated by definitive color per value
whereas the trig color wheel has a fixed slice amount with a range
color fill.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
function setup() {
createCanvas(400, 400);
colorMode(HSB);
angleMode(DEGREES);
//vars for color wheel center point
let x = width / 2;
let y = height / 2 + 100;
colorWheel(x, y, 100); //slide 11
noStroke();
pieChartPop(200, 100); //slide 12
}
//**** slide 12 pie chart trig demo
function pieChartPop(x, y) {
let [total, child, young, adult, senior, elder] = [577, 103, 69,
122, 170, 113
];
let startValue = 0;
let range = 0;
//child slice
range = child / total;
drawSlice("blue", x, y, 200, startValue, startValue + range);
startValue += range;
//young slice
range = young / total;
drawSlice("orange", x, y, 200, startValue, startValue + range);
startValue += range;
//adult slice
range = adult / total;
drawSlice("green", x, y, 200, startValue, startValue + range);
startValue += range;
//senior slice
range = senior / total;
drawSlice("tan", x, y, 200, startValue, startValue + range);
startValue += range;
//elder slice
range = elder / total;
drawSlice("pink", x, y, 200, startValue, startValue + range);
startValue += range;
}
/**
* drawSlice - draw colored arc based on angle percentages. slide 13
* Adjust angles so that 0% starts at top (actually -90).
* @param {color} fColor - fill color
* @param {number} x - center x
* @param {number} y - center y
* @param {number} d - diameter
* @param {float} percent1 - starting percentage
* @param {float} percent2 - ending percentage
*/
function drawSlice(fColor, x, y, d, percent1, percent2) {
fill(fColor);
arc(x, y, d, d, -90 + percent1 * 360, -90 + percent2 * 360);
}
//**** slide 11 trig demo
function colorWheel(x, y, rad) {
strokeWeight(10);
strokeCap(SQUARE);
//Iterate 360 degrees of lines, +10deg per turn
for (let a = 0; a < 360; a += 10) {
stroke(a, 150, 200); //hue based on a
//radius is 100, angle is a degrees
line(x, y, x + rad * cos(a),
y + rad * sin(a));
}
}
