Processing Forum

Screen name:
smithvisual
Blog:
http://www.smithvisual.com/blog
Website:
http://www.smithvisual.com
Twitter Link:
http://www.twitter.com/smithvisual

smithvisual's Profile

2 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

SVG overlap Coordinates

[3 Replies]
- 22-Mar-2012 11:51 AM
- Forum: Programming Questions
I'm working on a visualization of a map project. I've posted about it in the past here: https://forum.processing.org/topic/linking-ui-method-to-selected-child.

What I want to do now is parse the svg/xml to look for overlapping points. That is, I want a function that knows the overlapping points and tallies them. A little guiding light would be helpful. I'm kind of wondering if I should parse the data directly as XML? and more to the point, how I would identify child elements that overlap, and where that happens.

I just completed this tutorial by jer thorp: http://blog.blprnt.com/blog/blprnt/your-random-numbers-getting-started-with-processing-and-data-visualization

In his code he references a spread sheet and uses this function to parse numbers and create a bar graph:
2. void barGraph(int[] nums, float y) {
3. //Make a list of number counts
4. int[] counts = new int[100];
5. //Fill it with zeros
6. for (int i = 1; i < 100; i++) {
7. counts[i] = 0;
8. };
9. //Tally the counts
10. for (int i = 0; i < nums.length; i++) {
11. counts[nums[i]] ++;
12. };
14. //Draw the bar graph
15. for (int i = 0; i < counts.length; i++) {
16. colorMode(HSB);
17. fill(counts[i] * 30, 255, 255);
18. rect(i * 8, y, 8, -counts[i] * 10);
19. };
20. };
I'm wondering how I might do something similar with the svg/xml I have.

Any help is greatly appreciated. Thanks!!

Linking UI method to selected child

[3 Replies]
- 07-Mar-2012 02:04 PM
- Forum: Programming Questions
This is my first Processing project, so please feel free to point out any additional inaccuracies in the code .

This is the issue.

I've been able to draw a map using imported PShape SVG and grab children from it. I've been able to draw a UI element that cycles through a series of 'selected Days.' But I can't get the current selected day on the UI element to reflect a color change in the Map.

I'm using this sketch as a reference for what I've done: http://www.openprocessing.org/sketch/16277

In her example she's importing a csv data sheet to control the size of her specific selected items on the map. I don't think i need to do that, because I'm only selecting the child SVG group and changing the color based on the corrosponding selected number in the UI method.

There are a few variable defined globally that aren't being used because there were part of my experiment in trying to change the sources sketch into my own....

here is a link to the .svg file if you want to include in in a data directory: http://www.smithvisual.com/medellin/
2. //Graphic breakdown of multi day routes throughout the city of Medellin, Colombia.
3. //Routes are hand-drawn for aesthetic effect, and so are also loaded as a SVG file.
4. // Improvements
5. //control row in numCol dynamically instead of adjusting value every time a new day is added.
8. PFont font;
9. PShape days;
10. PShape[] routes;
11. int numDays; //count number of days
12. String[] daysColor;
14. String[] rowLabel;
15. float[][] metric;
16. float[] metricColor; //defines color of selected route
17. float[] metricTotal;
19. HashMap hm_metric = new HashMap();
21. //Some variables for graph
22. int selDay = 1;
23. int numCols = 7;
25. int marginX = 5;
26. int firstDay = 1;
29. void setup(){
30. size(550, 700);
32. font = createFont("Arial",36);
33. //load the map
34. days = loadShape("days.svg");
35. parseMap();
36. metricTotal = new float[numCols];
38. smooth();
40. }
42. void draw() {
43. background(220);
44. drawRef();
45. drawMap();
46. drawDays();
48. }
50. void parseMap() {
51. numDays = days.getChildCount(); //count number of Child routes
52. routes = new PShape[numDays];
53. //dayCodes = new String[numDays];
54. days.disableStyle(); //turn off styles for whole map
56. //make route object
57. for(int i = 0; i < numDays; i++){
58. routes[i] = days.getChild(i);
59. }
60. }
62. void drawMap() {
63. for (int i = 0; i< numDays; i++){
64. routes[i].disableStyle();
65. fill(100,99);
66. stroke(0);
67. strokeWeight(.25);
68. shape(routes[i]);
69. }
70. }
71. void drawDays(){
72. textFont(font, 14);
73. fill(0);
74. textAlign(CENTER);
75. float dayX = marginX + (((width-2*marginX)*selDay)/(numCols-1));
76. text(selDay+firstDay-1, dayX, 650);
77. strokeWeight(1);
78. stroke(0);
79. line(dayX, 620, dayX, 590);
80. //draw the line chart of total visitors
81. stroke(0);
82. noFill();
83. strokeWeight(2);
84. beginShape();
85. for (int i=1; i<numCols-1; i++){
86. vertex(marginX + (i*((width-2*marginX)/(numCols-1.01))),
87. height-70-((metricTotal[i])));
88. }
90. }
91. void keyPressed(){
92. int displayDay = selDay + firstDay;
94. if (keyCode == RIGHT){
95. if (selDay == numCols-2) selDay = 1;
96. else if (selDay < numCols-2) selDay = selDay+1; //when moving right don't go further than num years
97. }
98. else if (keyCode == LEFT){ //when moving left don't go further than first year
99. if (selDay == 1) selDay = numCols-2;
100. else if (selDay > 1) selDay = selDay -1;
101. }
102. }
103. void drawRef(){
104. //write the references information
105. noStroke();
106. textFont(font,12);
107. fill(100);
108. textAlign(LEFT);
109. text("Use Left and Right Arrow Keys to cycle through Days", 20, height-15);
110. textFont(font,10);
111. }
I was thinking about using an if statement in void draw, but don't really know what to include.

Thanks for any help you can give me. Very much appreciated. I'll be sure to post the sketch once I'm finished. This forum has already been a massive help.

«Prev
Next »