how do I make this solid using fill()?

Programming Questions

brokenbeep

how do I make this solid using fill()?

in Programming Questions • 2 years ago

Hi everyone, I've got an array full of data that I'm trying to represent in 3D using vertex. I am able to construct 2D representations that fill() without any trouble (see image 1 below) but I'm having trouble finding a way of making these representations have any 3D depth. I really want these flat, 2D representations to be say 10 pixels deep (along the z axis). I cant use strokeWeight() because I want to preserve detail. I tried to make the following work around which constructs 3D rectangles along the sides of the image using vertex, as shown in the image below the code, however the rectangles are not responding to fill() and I would also like to fill in the sides and the bottom of the 3D shape. Am I going about this all wrong?

Here's the code, the pictures are below that:

stroke(0);
fill(0);
beginShape();
//-------------------------------------------------------//Draw from array
for(int i = 1; i < myArrayList.size(); i++){
float x = map((Float)myArrayList.get(i), 0.0, 0.05, 0, 100);
float minusx = map((Float)myArrayList.get(i-1), 0.0, 0.05, 0, 100);
vertex(i-1, minusx-minusx-minusx);
vertex(i-1, minusx-minusx-minusx, -10);
vertex(i, x-x-x, -10);
vertex(i, x-x-x);
vertex(i-1, minusx-minusx-minusx);
}
endShape();

I want it to look kind of like this but 3D, not 2D, say 10 pixels deep....

My work around looks something like this:

You can see the rectangles along the side, but they are not responding to fill() anymore and I need to fill the sides and bottom.

Any suggestions or comments would be very welcome!

Replies(2)

amnon.owed

Re: how do I make this solid using fill()?

2 years ago

To give your graph some depth you can create 3D shapes from two consecutive values. Let me simplify it a bit in the text below and not mention Processing's top-left origin system, but just cover the principle.

Suppose you have value[0] at (0, 50) and value[1] at (10, 100), this would normally be a line like so: /

Now you want it to be a filled 3D shape with depth. In that case there are 8 relevant 3D points:

// the polygon made from the two original points and their corresponding y=0 point.
(0, 0, 0)
(0, 50, 0)
(10, 100, 0)
(10, 0, 0)

// the same polygon, but in z=-10.
(0, 0, -10)
(0, 50, -10)
(10, 100, -10)
(10, 0, -10)

So those are the relevant points. Let's talk about filling polygons. In this case you could probably use beginShape(QUADS). For the 3D graph you want the two polygons mentioned above. You want the bottom. You want the top (which is basically your second image). You won't need the front and back, expect once at the beginning (front) and once at the end (back) if you know what I mean. The end result should be an extruded, fully filled graph that is correctly closed from all sides, but doesn't have any superfluous internal polygons. You could for example have a boolean to toggle between fully filled (like a 3D version of your first image) and only top filled (like a filled version of your second image).

brokenbeep

Re: how do I make this solid using fill()?

2 years ago

Hi there, thank you so much for the reply and for the help! I've tried my best to implement you advice:

stroke(0);
fill(0);
beginShape(QUAD_STRIP);
//-------------------------------------------------------//Draw from array
for(int i = 2; i < myArrayList.size(); i++){
float x = map((Float)myArrayList.get(i), 0.0, 0.05, 0, 100);
float minusx = map((Float)myArrayList.get(i-1), 0.0, 0.05, 0, 100);
float y = 0;
float yy = -10;
// 1st side
vertex(i-1, 0, y);
vertex(i-1, minusx, y);
vertex(i, x, y);
vertex(i, 0, y);
vertex(i-1, 0, y);
// 2nd side
vertex(i-1, 0, yy);
vertex(i-1, minusx, yy);
vertex(i, x, yy);
vertex(i, 0, yy);
vertex(i-1, 0, yy);
}
endShape();

This code creates the two sides plus the base of the 3d shape but the top remains open. I've included an image below to try and illustrate what I have come up with, the alpha has been turned adjusted so that you can see the two independent sides, notice how the top of the shape is not joined together. Any idea how I can make that happen? Will I have to map another polygon to the top using co-ordinates from the two sides? Why did the bottom join up but not the top? Once again thanks for your help! :)

Top Reply