Recursively drawing arc segments
in
Programming Questions
•
2 years ago
Hi, I'm working on a data visualization for a sort of Facebook chain letter. The first person sends to ten of their friends, who are asked to send to ten of their friends, so on and so forth. The visualization is supposed to show who passes the request along, and to how many of their friends.
I'm displaying the initial ten recipients as arc segments of different colors that make up a circle in the middle of the screen. For each of the initial ten, I want to display smaller child arcs branching off, but so far I've only been able to draw two levels:
I created an ArcSegment class that has it's own array of AcrSegment children, but I'm only able to access the children (not children-of-children, etc.) when I call the drawSegment method. Can anyone give me any pointers on how I would loop recursively all the way down to the bottom of each child array to call the drawSegment method on every child? Here's the code, thanks for any help:
ArcSegment[] baseSegments = new ArcSegment[10];
int x, y; // arc origin
void setup() {
size(800, 800);
colorMode(HSB);
x = width/2;
y = height/2;
int w = 200;
int h = 200;
int start = 0;
int stop = 36;
int colorHue = 0;
int colorSat = 255;
for( int i = 0; i < baseSegments.length; i++) {
int kidNum = (int) random(1, 10);
baseSegments[i] = new ArcSegment(x, y, w, h, start, stop, colorHue, colorSat, kidNum, 0);
start += 36;
stop += 36;
colorHue += 26;
}
}
void draw() {
background(255);
smooth();
noStroke();
for( int i = 0; i < baseSegments.length; i++) {
baseSegments[i].drawSegment();
}
drawCenter();
}
void drawCenter() {
noStroke();
fill(255);
ellipse(x, y, 80, 80);
}
class ArcSegment {
int x, y; // arc origin
int w, h; // arc size
int start, stop; // angle start and stop in degrees
int colorHue;
int colorSat;
int level;
ArcSegment[] kids;
int kidNum;
ArcSegment(int x, int y, int w, int h, int start, int stop, int colorHue, int colorSat, int kidNum, int level) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.start = start;
this.stop = stop;
this.colorHue = colorHue;
this.colorSat = colorSat;
this.kidNum = kidNum;
this.level = level;
println("new segment start = " + start);
println("new segment stop = " + stop);
int newAngleSize = abs(start - stop)/10;
int newStart = start;
int newStop = newStart + newAngleSize;
int newSat = colorSat - 100;
int newW = w + 200;
int newH = h + 200;
int newKidNum = (int) random(1, kidNum);
kids = new ArcSegment[kidNum];
for( int i = 0; i < kidNum; i++ ) {
kids[i] = new ArcSegment(x, y, newW, newH, newStart, newStop, colorHue, newSat, 0, level);
newStart += newAngleSize;
newStop = newStart + newAngleSize;
}
}
void drawSegment() {
for( int i = 0; i < kids.length; i++) {
fill(kids[i].colorHue, kids[i].colorSat, 255);
arc(x, y, kids[i].w, kids[i].h, radians(kids[i].start), radians(kids[i].stop));
}
fill(colorHue, colorSat, 255);
arc(x, y, w, h, radians(start), radians(stop));
}
}
I'm displaying the initial ten recipients as arc segments of different colors that make up a circle in the middle of the screen. For each of the initial ten, I want to display smaller child arcs branching off, but so far I've only been able to draw two levels:
I created an ArcSegment class that has it's own array of AcrSegment children, but I'm only able to access the children (not children-of-children, etc.) when I call the drawSegment method. Can anyone give me any pointers on how I would loop recursively all the way down to the bottom of each child array to call the drawSegment method on every child? Here's the code, thanks for any help:
ArcSegment[] baseSegments = new ArcSegment[10];
int x, y; // arc origin
void setup() {
size(800, 800);
colorMode(HSB);
x = width/2;
y = height/2;
int w = 200;
int h = 200;
int start = 0;
int stop = 36;
int colorHue = 0;
int colorSat = 255;
for( int i = 0; i < baseSegments.length; i++) {
int kidNum = (int) random(1, 10);
baseSegments[i] = new ArcSegment(x, y, w, h, start, stop, colorHue, colorSat, kidNum, 0);
start += 36;
stop += 36;
colorHue += 26;
}
}
void draw() {
background(255);
smooth();
noStroke();
for( int i = 0; i < baseSegments.length; i++) {
baseSegments[i].drawSegment();
}
drawCenter();
}
void drawCenter() {
noStroke();
fill(255);
ellipse(x, y, 80, 80);
}
class ArcSegment {
int x, y; // arc origin
int w, h; // arc size
int start, stop; // angle start and stop in degrees
int colorHue;
int colorSat;
int level;
ArcSegment[] kids;
int kidNum;
ArcSegment(int x, int y, int w, int h, int start, int stop, int colorHue, int colorSat, int kidNum, int level) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.start = start;
this.stop = stop;
this.colorHue = colorHue;
this.colorSat = colorSat;
this.kidNum = kidNum;
this.level = level;
println("new segment start = " + start);
println("new segment stop = " + stop);
int newAngleSize = abs(start - stop)/10;
int newStart = start;
int newStop = newStart + newAngleSize;
int newSat = colorSat - 100;
int newW = w + 200;
int newH = h + 200;
int newKidNum = (int) random(1, kidNum);
kids = new ArcSegment[kidNum];
for( int i = 0; i < kidNum; i++ ) {
kids[i] = new ArcSegment(x, y, newW, newH, newStart, newStop, colorHue, newSat, 0, level);
newStart += newAngleSize;
newStop = newStart + newAngleSize;
}
}
void drawSegment() {
for( int i = 0; i < kids.length; i++) {
fill(kids[i].colorHue, kids[i].colorSat, 255);
arc(x, y, kids[i].w, kids[i].h, radians(kids[i].start), radians(kids[i].stop));
}
fill(colorHue, colorSat, 255);
arc(x, y, w, h, radians(start), radians(stop));
}
}
1