We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpOpenGL and 3D Libraries › cylinder with gradient between both ends
Page Index Toggle Pages: 1
cylinder with gradient between both ends? (Read 762 times)
cylinder with gradient between both ends?
Dec 30th, 2009, 9:48am
 
I want to make a 3d cylinder that has a two color gradient with the gradient starting at each end. e.g. if one side was red and the other side was blue there would be a smooth gradient that would cross over in the middle of the length of the cylinder.

Do I need to make a series of quads out of vertices and then set different fill values for pairs of vertices within a quad?

Is there a good library already available for making cylinders that I can adapt?

Any tips appreciated!
Re: cylinder with gradient between both ends?
Reply #1 - Dec 30th, 2009, 9:57am
 
there is quarks new shape library that can handle different kind of 3d objects http://processing.org/discourse/yabb2/num_1260731680.html

but i am not sure if you can change the fill color per quad yourself.
Thast actually what you have to do.
it also depends on how the cylinder is drawn, there need to be steps on the Y Axis not like in this code example by toxi : http://toxi.co.uk/p5/cylinder/
but i guess you can easily create such a shape yourself.

here is another example. that could be easily changed. all you have to do is add different amount of segments ontop of your cylinder and change the color.


Code:
 /*
*
*/

void setup() {
size(600,400,P3D);
smooth();
background(255);

}

void draw() {
background(255);

translate(200,200);

cylinder(100,100,10);

}

void cylinder(float w, float h, int sides)
{
float angle;
float[] x = new float[sides+1];
float[] z = new float[sides+1];

//get the x and z position on a circle for all the sides
for(int i=0; i < x.length; i++){
angle = TWO_PI / (sides) * i;
x[i] = sin(angle) * w;
z[i] = cos(angle) * w;
}

//draw the top of the cylinder
beginShape(TRIANGLE_FAN);

vertex(0, -h/2, 0);

for(int i=0; i < x.length; i++){
vertex(x[i], -h/2, z[i]);
}

endShape();

//draw the center of the cylinder
beginShape(QUAD_STRIP);

for(int i=0; i < x.length; i++){
vertex(x[i], -h/2, z[i]);
vertex(x[i], h/2, z[i]);
}

endShape();

//draw the bottom of the cylinder
beginShape(TRIANGLE_FAN);

vertex(0, h/2, 0);

for(int i=0; i < x.length; i++){
vertex(x[i], h/2, z[i]);
}

endShape();
}




Re: cylinder with gradient between both ends?
Reply #2 - Dec 30th, 2009, 12:27pm
 
Thanks! I adapted the code and this seems to work just fine:

Code:
 /*
*
*/

color colorA;
color colorB;

void setup() {
size(600,400,P3D);
// smooth();
noStroke();
colorMode(HSB,100);

}



void draw()
{
background(1,0,20);
lights();

colorA = color(frameCount%100,90,100);
colorB = color(100-frameCount%100,90,100);

translate(200,200);
rotateX(frameCount*0.01);
rotateY(frameCount*0.02);
rotateZ(frameCount*0.03);
cylinder(10,200,20,colorA,colorB);
translate(30,0);
cylinder(10,200,20,colorA,colorB);
translate(30,0);
cylinder(10,200,20,colorA,colorB);
translate(30,0);
cylinder(10,200,20,colorA,colorB);
translate(-90,0);
}

void cylinder(float w, float h, int sides, color colorTop, color colorBottom)
{
float angle;
float[] x = new float[sides+1];
float[] z = new float[sides+1];

//get the x and z position on a circle for all the sides
for(int i=0; i < x.length; i++){
angle = TWO_PI / (sides) * i;
x[i] = sin(angle) * w;
z[i] = cos(angle) * w;
}

//draw the top of the cylinder
beginShape(TRIANGLE_FAN);
fill(colorTop);
vertex(0, -h/2, 0);
for(int i=0; i < x.length; i++){
vertex(x[i], -h/2, z[i]);
}

endShape();

//draw the center of the cylinder
beginShape(QUAD_STRIP);

for(int i=0; i < x.length; i++){
fill(colorTop);
vertex(x[i], -h/2, z[i]);
fill(colorBottom);
vertex(x[i], h/2, z[i]);

}

endShape();

//draw the bottom of the cylinder
beginShape(TRIANGLE_FAN);
fill(colorBottom);
vertex(0, h/2, 0);

for(int i=0; i < x.length; i++){
vertex(x[i], h/2, z[i]);
}

endShape();

}

Re: cylinder with gradient between both ends?
Reply #3 - Dec 30th, 2009, 1:00pm
 
yeah Smiley looks good.
Page Index Toggle Pages: 1