Hello,

nice idea!


you can first paint the slices and then the wall between them

beginShape(QUAD_STRIP); 
vertex(30, 20); 
vertex(30, 75); 
vertex(50, 20);
vertex(50, 75);
vertex(65, 20); 
vertex(65, 75); 
vertex(85, 20);
vertex(85, 75); 
endShape();


from 
http://www.processing.org/reference/beginShape_.html



please note that it is drawn zig-zag 

1----3-----5
|    
|
|
|
2----4     

so when you have the corners of the two slices 
connect them 

1. beginShape(QUAD_STRIP);
2. for loop i over points of slice {
   
3. vertex(slice1[i], slice1[i]);
4. vertex(slice2[i], slice2[i]);
5. }
6. 
   
7. endShape();

or so



Greetings, Chrisir      

If you need an answer, please send me a personal message since this forum doesn't notify.

here you see an example of such a wallMaker that connects two arrays of same length

1. // 4 ellipses; over their edges are drawn lines (triangles) at every angle.
2. // Each triangle is a PShape. See Naum Gabo.
3. //
4. float CameraX; // both set in setup()
5. float CameraY;
6. float angle;
7. //
8. int max =361;
9. // the ellipses
10. PVector [] ellOuter  = new PVector [ max ];
11. PVector [] ellInner  = new PVector [ max ];
12. PVector [] ellMiddleInTheFront = new PVector [ max ];
13. PVector [] ellMiddleInTheBack  = new PVector [ max ];
14. // the shapes
15. PShape  [] s         = new PShape  [ max ];  // http://www.processing.org/reference/createShape_.html
16. PShape  [] s0        = new PShape  [ max ]; 
17. PShape  [] s1        = new PShape  [ max ];
18. PShape  [] s2        = new PShape  [ max ]; 
19. PShape  [] s3        = new PShape  [ max ];
20. //
21. void setup()
22. {
23.   size( 800, 800, P3D );
24.   CameraX = width / 2.0;
25.   CameraY = 320;
26.   int count = 0;
27.   for (int i=0; i<=360; i+=3) {
28.     float x = 193*sin(radians(i));
29.     float y = 320 + 133*cos(radians(i));   
30.     ellOuter[ count ] = new PVector(x, y, 0);
31.     //
32.     x = 40+56*sin(radians(i));
33.     y = 320 + 56*cos(radians(i)); 
34.     ellInner[ count ] = new PVector(x, y, 10);
35.     //
36.     x = 126*sin(radians(i));
37.     y = 320 + 86*cos(radians(i)); 
38.     ellMiddleInTheFront[ count ] = new PVector(x, y, 55);
39.     //
40.     x = 126*sin(radians(i));
41.     y = 320 + 86*cos(radians(i)); 
42.     ellMiddleInTheBack[ count ] = new PVector(x, y, -35);
43.     //
44.     // Creating the PShape
45.     s[count]=new PShape();
46.     s1[count] = createShape();
47.     s[count].beginShape();
48.     s[count].noFill();
49.     s[count].stroke(255);
50.     //
51.     s[count].vertex( ellOuter[ count ].x, ellOuter[ count ].y, ellOuter[ count ].z );
52.     s[count].vertex( ellMiddleInTheFront[ count ].x, ellMiddleInTheFront[ count ].y, ellMiddleInTheFront[ count ].z );
53.     s[count].vertex( ellInner[ count ].x, ellInner[ count ].y, ellInner[ count ].z );
54.     s[count].vertex( ellMiddleInTheBack[ count ].x, ellMiddleInTheBack[ count ].y, ellMiddleInTheBack[ count ].z );
55.     s[count].vertex( ellOuter[ count ].x, ellOuter[ count ].y, ellOuter[ count ].z );
56.     //
57.     s[count].endShape();
58.     //
59.     count++;
60.   } //
61.   println ("number of vertices "
62.     +count);
63.   max=count-1;
64.   s0=makeAWallFromTwoArrays(ellOuter, ellMiddleInTheFront);
65.   s1=makeAWallFromTwoArrays(ellMiddleInTheFront, ellInner);
66.   s2=makeAWallFromTwoArrays(ellInner, ellMiddleInTheBack);
67.   s3=makeAWallFromTwoArrays(ellMiddleInTheBack, ellOuter);
68.   //
69. } // setup
70. void draw()
71. {
72.   background(0);
73.   lights();
74.   // camera
75.   camera( CameraX, CameraY, 700,
76.   width/2.0, 320, 0,
77.   0, 1, 0);
78.   //
79.   //
80.   translate(width/2, 0);
81.   rotateY(radians(angle));
82.   for (int i=0; i<max; i+=1) {
83.     // shape(s[i], 0, 0);
84.     shape(s0[i], 0, 0);
85.     shape(s1[i], 0, 0);
86.     shape(s2[i], 0, 0);
87.     shape(s3[i], 0, 0);
88.   } //
89.   //
90.   angle+=.2;
91. } // draw
92. void keyPressed() {
93.   if (key == CODED) {
94.     //
95.     if (keyCode == UP) {
96.       CameraY-=10;
97.       // println("UP");
98.     }
99.     else if (keyCode == DOWN) {
100.       CameraY+=10;
101.     }
102.     else if (keyCode == RIGHT) {
103.       CameraX+=10;
104.     }
105.     else if (keyCode == LEFT) {
106.       CameraX-=10;
107.     }
108.     else {
109.       // nothing
110.     }
111.   }
112.   else { 
113.     // not key == CODED
114.     // do nothing
115.   }
116. }
117. //
118. PShape [] makeAWallFromTwoArrays(  PVector [] arr1, PVector [] arr2 ) {
119.   //
120.   PShape  [] s1 = new PShape  [ max ]; 
121.   //
122.   for (int i=0; i<=max-1; i+=1) {
123.     //
124.     s1[i] = new PShape();
125.     s1[i] = createShape();
126.     s1[i].beginShape(QUADS);
127.     s1[i].noStroke();
128.     //
129.     s1[i].vertex(arr1[i].x, arr1[i].y, arr1[i].z);
130.     s1[i].vertex(arr2[i].x, arr2[i].y, arr2[i].z);
131.     //
132.     s1[i].vertex(arr2[i+1].x, arr2[i+1].y, arr2[i+1].z);
133.     s1[i].vertex(arr1[i+1].x, arr1[i+1].y, arr1[i+1].z);
134.     //
135.     s1[i].endShape();
136.     //
137.   }
138.   //
139.   return s1;
140.   //
141. }
142. // ------------------------------------------------------------

Greetings, Chrisir

If you need an answer, please send me a personal message since this forum doesn't notify.

you can just post your pm here.
I just meant that you drop me a line that you posted here, so I can't overlook it
Because somehow the forum doesn't notify me.

I had difficulties with the line
beginShape too
I use version 2.0 stable


maybe look here
http://www.processing.org/reference/createShape_.html
how it's done.

The core idea is to slice
together two arrays to a wall made of shapes:

1.     s1[i].beginShape(QUADS);
2.     s1[i].noStroke();
3.     //
4.     s1[i].vertex(arr1[i].x, arr1[i].y, arr1[i].z);
5.     s1[i].vertex(arr2[i].x, arr2[i].y, arr2[i].z);
6.     //
7.     s1[i].vertex(arr2[i+1].x, arr2[i+1].y, arr2[i+1].z);
8.     s1[i].vertex(arr1[i+1].x, arr1[i+1].y, arr1[i+1].z);
9.     //
10.     s1[i].endShape();
11. 
    

new version

1. //
2. // 4 ellipses
3. //
4. float CameraX; // are set in setup()
5. float CameraY;
6. float CameraZ;
7. float angle;
8. //
9. color fillColor ;
10. //
11. int max =361;
12. // the ellipses
13. PVector [] ellNumber1  = new PVector [ max ];
14. PVector [] ellNumber2  = new PVector [ max ];
15. PVector [] ellNumber3  = new PVector [ max ];
16. PVector [] ellNumber4  = new PVector [ max ];
17. // the shapes
18. PShape  [] s         = new PShape  [ max ];  // http://www.processing.org/reference/createShape_.html
19. PShape  [] s0        = new PShape  [ max ]; 
20. PShape  [] s1        = new PShape  [ max ];
21. PShape  [] s2        = new PShape  [ max ]; 
22. PShape  [] s3        = new PShape  [ max ];
23. //
24. void setup()
25. {
26.   size( 800, 800, P3D );
27.   CameraX = width / 2.0;
28.   CameraY = 120;
29.   CameraZ = 800;
30.   //
31.   int count = 0;
32.   for (int i=0; i<=360; i+=3) {
33.     //
34.     // the 1st
35.     float x = 193*sin(radians(i));
36.     float z = 320 + 133*cos(radians(i));   
37.     ellNumber1[ count ] = new PVector(x, 0, z);
38.     // 2
39.     x = 40+56*sin(radians(i));
40.     z = 320 + 56*cos(radians(i)); 
41.     ellNumber2[ count ] = new PVector(x, 100, z);
42.     // 3
43.     x = 126*sin(radians(i));
44.     z = 320 + 86*cos(radians(i)); 
45.     ellNumber3[ count ] = new PVector(x, 200, z);
46.     // 4
47.     x = 126*sin(radians(i));
48.     z = 320 + 52*cos(radians(i)); 
49.     ellNumber4[ count ] = new PVector(x, 300, z);
50.     //
51.     count++;
52.   } //
53.   println ("number of vertices "
54.     +count);
55.   //
56.   max=count-1;
57.   fillColor = color(222, 2, 2);
58.   s0=makeAWallFromTwoArrays(ellNumber1, ellNumber2);
59.   fillColor = color(222, 2, 222);
60.   s1=makeAWallFromTwoArrays(ellNumber2, ellNumber3);
61.   fillColor = color(22, 2, 222);
62.   s2=makeAWallFromTwoArrays(ellNumber3, ellNumber4);
63.   //
64. } // setup
65. void draw()
66. {
67.   background(0);
68.   lights();
69.   // camera
70.   camera( CameraX, CameraY, CameraZ,
71.   width/2.0, 320, 0,
72.   0, 1, 0);
73.   //
74.   //
75.   translate(width/2+90, 0);
76.   rotateY(radians(angle));
77.   for (int i=0; i<max; i+=1) {
78.     shape(s0[i], 0, 0);
79.     shape(s1[i], 0, 0);
80.     shape(s2[i], 0, 0);
81.   } //
82.   //
83.   angle+=.2;
84. } // draw
85. void keyPressed() {
86.   if (key == CODED) {
87.     //
88.     if (keyCode == UP) {
89.       CameraY-=10;
90.       // println("UP");
91.     }
92.     else if (keyCode == DOWN) {
93.       CameraY+=10;
94.     }
95.     else if (keyCode == RIGHT) {
96.       CameraX+=10;
97.     }
98.     else if (keyCode == LEFT) {
99.       CameraX-=10;
100.     }
101.     else {
102.       // nothing
103.     }
104.   }
105.   else { 
106.     // not key == CODED
107.     // do nothing
108.   }
109. }
110. //
111. PShape [] makeAWallFromTwoArrays(  PVector [] arr1, PVector [] arr2 ) {
112.   //
113.   PShape  [] s1 = new PShape  [ max ]; 
114.   //
115.   for (int i=0; i<=max-1; i+=1) {
116.     //
117.     s1[i] = new PShape();
118.     s1[i] = createShape();
119.     s1[i].beginShape(QUADS);
120.     s1[i].fill(fillColor);
121.     s1[i].noStroke();
122.     //
123.     s1[i].vertex(arr1[i].x, arr1[i].y, arr1[i].z);
124.     s1[i].vertex(arr2[i].x, arr2[i].y, arr2[i].z);
125.     //
126.     s1[i].vertex(arr2[i+1].x, arr2[i+1].y, arr2[i+1].z);
127.     s1[i].vertex(arr1[i+1].x, arr1[i+1].y, arr1[i+1].z);
128.     //
129.     s1[i].endShape();
130.     //
131.   }
132.   //
133.   return s1;
134.   //
135. }
136. // ------------------------------------------------------------

Greetings, Chrisir

If you need an answer, please send me a personal message since this forum doesn't notify.

Thanks  Chrisir for all your comments! I'm using 2.0 stable now. Didn't even know there was one, haha. The  beginShape funtion is working now. I'm now looking for a way to use a FOR construction to solve it, instead of calling every slice in the code. 

I have this now:

2. float tw;
3. int jaardiepte;
4. 
   
5. 
   
6. String[] data_in;
7. 
   
8. float[][] temps;
9. float[] gemiddelden;
10. float[] year_gemiddelden;
11. float timeseries_average;
12. int aantaljaren = 10;
13. float tempscale = 300.0;
14. float yearscale = 20.0;
15. float yearGraphY = 560;
16. int selYear = 0;
17. int firstYear;
18. PFont font;
19. String[] monthnames = {
20.   "jan", "feb", "mar", "apr", "mei", "jun", "jul", "aug", "sept", "okt", "nov", "dec"
21. };
22. 
    
23. 
    
24. 
    
25. float CameraX; // are set in setup()
26. float CameraY;
27. float CameraZ;
28. float angle;
29. 
    
30. 
    
31. 
    
32. void setup() {
33.   size(800, 650, P3D);
34.   
35.   
36.    CameraX = width / 2.0;
37.   CameraY = 120;
38.   CameraZ = 800;
39.   
40.   
41.   
42.   data_in = loadStrings("NL.csv");//"CBR1939_2009.csv");
43. 
    
44.   aantaljaren = data_in.length;
45.   temps = new float[aantaljaren][12];
46.   gemiddelden = new float[12];
47.   year_gemiddelden = new float[aantaljaren];
48.   parseData();
49.   font = createFont("Arial", 36);
50.   smooth();
51. }
52. 
    
53. void draw() {
54.   background(0);
55.  
56.  
57.  lights();
58.   // camera
59.   camera( CameraX, CameraY, CameraZ,
60.   width/2.0, 320, 0,
61.   0, 1, 0);
62. 
    
63.   //  if(mouseX/4 <130){
64.   //        selYear = mouseX/4;
65.   //   }
66. 
    
67.   textFont(font, 14);
68.   fill(255, 255);
69.   textAlign(CENTER);
70. 
    
71.   //tijdlijn
72.   float yearX = 50+((700.0*selYear)/aantaljaren);
73. 
    
74.   String jaartal = ""+firstYear;
75. 
    
76.   noStroke();
77.   tw = textWidth(jaartal);
78. 
    
79.   fill(0, 0, 250);
80.   rect(yearX-17, height-20, tw+4, 19);
81.   fill(255);
82. 
    
83. 
    
84.   text(selYear+firstYear, yearX, height-6);
85. 
    
86. 
    
87.   text(nf(year_gemiddelden[selYear], 1, 1)+"°", yearX, yearGraphY-50);
88. 
    
89.   stroke(255, 100);
90. 
    
91.   line(yearX, yearGraphY-40, yearX, yearGraphY+50);
92. 
    
93. 
    
94.   drawYears(yearGraphY);
95.   translate(400, 250);
96.   stroke(200);
97.   fill(100);
98.   monthLabels();
99.   noFill();
100. 
     
101.   for (int y=0; y<aantaljaren; y++) {
102.     
103.     jaardiepte = jaardiepte+20;
104.     stroke(255);
105.      drawMonths(temps[y], jaardiepte);
106.      
107.   }
108.   
109.   jaardiepte = 0;
110. 
     
111.   strokeWeight(2);
112.   stroke(0, 0, 255);
113.  //drawMonths(gemiddelden);
114. 
     
115.  // temp_puur(temps[selYear]);
116. 
     
117.   strokeWeight(1);
118.   stroke(255, 255);
119.  //drawMonths(temps[selYear]);
120. }
121. 
     
122. 
     
123. 
     
124. 
     
125. 
     
126. void drawMonths(float[] months, float depth) {
127.   beginShape();
128. 
     
129.   for (int m=0; m<12; m++) {
130.     float theta = (TWO_PI/12.0)*m - HALF_PI;
131.     float temp = (months[m]*tempscale);
132.     // voor gemiddelden
133.     float diff = 150 + (mouseX/30*(months[m] - gemiddelden[m]));
134.     // voor werkelijke stand, zonder gemiddeldenberekeking
135.     //   float diff = 150 + (mouseX/30*(months[m] ));
136.     vertex(cos(theta)*diff, sin(theta)*diff, depth);
137.   }
138.   endShape(CLOSE);
139. }
140. 
     
141. 
     
142. 
     
143. 
     
144. void temp_puur(float[] months) {
145. 
     
146.   stroke(0, 255, 0);
147.   beginShape();
148.   for (int m=0; m<12; m++) {
149.     float theta = (TWO_PI/12.0)*m - HALF_PI;
150.     float temp = (months[m]*tempscale);
151.     // voor gemiddelden
152.     //float diff2 = 100 + (mouseX/30*(months[m] - gemiddelden[m]));
153.     // voor werkelijke stand, zonder gemiddeldenberekeking
154.     float diff = 50 + (mouseX/30*(months[m] ));
155.    
156.     text(months[m], cos(theta)*diff*1.36, sin(theta)*diff*1.36);
157. 
     
158.     vertex(cos(theta)*diff, sin(theta)*diff);
159.   }
160.   endShape(CLOSE);
161. }
162. 
     
163. 
     
164. 
     
165. void monthLabels() {
166.   textFont(font, 12);
167.   beginShape();
168. 
     
169.   for (int m=0; m<12; m++) {
170.     float theta = (TWO_PI/12.0)*m - HALF_PI;
171.     text(monthnames[m], cos(theta)*200, sin(theta)*200);
172.     noFill();
173.     strokeWeight(1);
174.     stroke(255, 0, 0, 255);
175.     //vertex(cos(theta)*150, sin(theta)*150);
176.   }
177.   endShape(CLOSE);
178. }
179. 
     
180. 
     
181. void drawYears(float ybase) {
182.   stroke(255);
183.   noFill();
184.   beginShape();
185.   for (int y=0; y<aantaljaren; y++) {
186.     vertex(50+(y*(700.0/aantaljaren)), ybase-((year_gemiddelden[y]-timeseries_average)*yearscale));
187.   }
188.   endShape();
189.   stroke(255, 0, 0, 100);
190.   line(50, ybase, 750, ybase);
191. }
192. 
     
193. 
     
194. void parseData() {
195.   println(data_in.length);
196.   for (int i=0; i<data_in.length; i++) {
197.     String[] row = split(data_in[i], ',');
198.     if (i == 0) firstYear = int(row[0]);
199.     float[] flrow = float(row);
200.     float[] trimrow = subset(flrow, 1);
201.     temps[i] = trimrow;
202. 
     
203.     for (int j=0; j<12; j++) {
204.       if (i>(1907-firstYear) && i<(2013-firstYear)) gemiddelden[j] += temps[i][j]; // gemiddelden
205.     } 
206. 
     
207.     year_gemiddelden[i] = aveArray(temps[i]);
208.   } 
209.   for (int j=0; j<12; j++) {
210.     gemiddelden[j]  = gemiddelden[j]/data_in.length;//(data_in.length-1);
211.   }
212.   // float[] twentyyear = subset(year_gemiddelden,1961-firstYear,1990-firstYear);
213.   timeseries_average = aveArray(gemiddelden);//year_gemiddelden);
214. } 
215. 
     
216. 
     
217. void keyPressed() {
218.   
219.   if (key == CODED) {
220.     //
221.     if (keyCode == UP) {
222.       CameraY-=10;
223.       // println("UP");
224.     }
225.     else if (keyCode == DOWN) {
226.       CameraY+=10;
227.     }
228.     else if (keyCode == RIGHT) {
229.       CameraX+=10;
230.     }
231.     else if (keyCode == LEFT) {
232.       CameraX-=10;
233.     }
234.     else {
235.       // nothing
236.     }
237.   }
238.   else { 
239.     // not key == CODED
240.     // do nothing
241.   }
242.   
243.   
244.   
245.   if (keyCode == RIGHT) {
246.     selYear = min (aantaljaren-1, selYear+1);
247.   } 
248.   else if (keyCode == LEFT) {
249.     selYear = max (0, selYear-1);
250.   }
251. }
252. 
     
253. 
     
254. float aveArray(float[] A) {
255.   float ave = 0;
256.   for (int i=0; i<A.length; i++) {
257.     ave += A[i];
258.   }
259.   ave = ave/A.length;
260.   return ave;
261. }
262. 
     
263. 
     
264. 
     

I draw all the years at once, with a distance of  20 (jaardiepte) per slice. 

thanks. I will try this as a next step. For now, I seem to have got it working:

great!


Greetings, Chrisir

If you need an answer, please send me a personal message since this forum doesn't notify.

I am glad you found a solution

I can't run it and see it because I don't have the csv file


Greetings, Chrisir   

If you need an answer, please send me a personal message since this forum doesn't notify.