Skip to content

Commit ee8229b

Browse files
lmccartlmccart
authored
Merge pull request #972 from suhascv/example6
Added Trig Wheels/Pie Chart |Prof Harris |Open@RIT
2 parents 1ec8233 + e764ab8 commit ee8229b

File tree

3 files changed

+264
-0
lines changed

3 files changed

+264
-0
lines changed

‎src/data/examples/es/01_Form/08_Trig_Wheels_and_Pie_Chart.js‎

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

‎src/data/examples/ko/01_Form/08_Trig_Wheels_and_Pie_Chart.js‎

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

‎src/data/examples/zh-Hans/01_Form/08_Trig_Wheels_and_Pie_Chart.js‎

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

0 commit comments

Comments
 (0)