# Apply gradient shader to a torus

Hi!
I would like to color a torus red on the left half and blue on the right half surely with a transition.
Best check my next post below as I made a mockup of what I want to accomplish.

↓↓↓

The following may not be exactly what you had in mind but it does run in the p5.js WebEditor. The errors came from the shader.vert file, so I used new files from here: https://github.com/aferriss/p5jsShaderExamples/tree/gh-pages/6_3d/6-1_rectangle and they allowed it to run without error.

let redGreen;

}

function setup() {
createCanvas(800, 600, WEBGL);
noStroke();
}

function draw() {
background(0);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
rotateZ(PI/2);
torus(180, 40, 100, 12);
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}

precision mediump float;

varying vec2 vTexCoord;

void main() {
// draw the texcoords to the screen
gl_FragColor = vec4(vTexCoord.x, vTexCoord.y, 0.0 ,1.0);
}

// Get the position attribute of the geometry
attribute vec3 aPosition;

// Get the texture coordinate attribute from the geometry
attribute vec2 aTexCoord;

// When we use 3d geometry, we need to also use some builtin variables that p5 provides
// Most 3d engines will provide these variables for you. They are 4x4 matrices that define
// the camera position / rotation, and the geometry position / rotation / scale
// There are actually 3 matrices, but two of them have already been combined into a single one
// This pre combination is an optimization trick so that the vertex shader doesn't have to do as much work

// uProjectionMatrix is used to convert the 3d world coordinates into screen coordinates
uniform mat4 uProjectionMatrix;

// uModelViewMatrix is a combination of the model matrix and the view matrix
// The model matrix defines the object position / rotation / scale
// Multiplying uModelMatrix * vec4(aPosition, 1.0) would move the object into it's world position

// The view matrix defines attributes about the camera, such as focal length and camera position
// Multiplying uModelViewMatrix * vec4(aPosition, 1.0) would move the object into its world position in front of the camera
uniform mat4 uModelViewMatrix;

varying vec2 vTexCoord;

void main() {

// copy the position data into a vec4, using 1.0 as the w component
vec4 positionVec4 = vec4(aPosition, 1.0);

// Move our vertex positions into screen space
// The order of multiplication is always projection * view * model * position
// In this case model and view have been combined so we just do projection * modelView * position
gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;

// Send the texture coordinates to the fragment shader
vTexCoord = aTexCoord;
}

1 Like

@svan thank you!!
It seems I copy pasted something wrong. Yes, I had the shader from that gitthub page loaded too. The problem I still have is that with the torus the gradient transition has a sharp break at one side like if the torus had a start and a end position:
How it looks:

I am looking for a result like this from red to blue. I mocked it up in photoshop that is why the transition of the gradient looks not so smooth:

Just for reference the code:

sketch:

let redGreen;

}

function setup() {
createCanvas(400, 400, WEBGL);
noStroke();
}

function draw() {
background(0);
//rotateX(frameCount * 0.01);
//rotateY(frameCount * 0.01);
//rotateZ(PI/2);
translate(200-width/2,200-height/2);
torus(50, 20, 100, 12);

}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}

attribute vec3 aPosition;

attribute vec2 aTexCoord;

uniform mat4 uProjectionMatrix;

uniform mat4 uModelViewMatrix;

varying vec2 vTexCoord;

void main() {

vec4 positionVec4 = vec4(aPosition, 1.0);

gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;

vTexCoord = aTexCoord;
}

precision mediump float;

varying vec2 vTexCoord;

void main() {
// draw the texcoords to the screen
gl_FragColor = vec4(vTexCoord.x, vTexCoord.y, 0.0 ,1.0);
}

help would be very much appreciated. Also for more online resources I could read up on. Thanks!

Anyone can help here?

Since this seems like a shader question and not everyone is familiar with glsl around here, I’d recommend asking on the shader zone discord server. Hope this helps

1 Like

Instead of passing a uv pair for the texture coordinates, you only need a single float value based on the vertex y-coordinate. In your fragment shader, just have

varying float high;

void main() {
gl_Fragcolor = vec4( high, 0., 1.-high, 1. );
}

Then in your vertex shader, you have to compute high from your aPosition.y. Scale and offset it so it ranges from 0 to 1.

1 Like

I played around with this a bit. It looks like p5 defines the torus model coordinates to scale from -1 to 1 from the middle of the big ring with the smaller ring extending from there. So if you had a torus( 100, 20 ) as an example, in your vertex shader, your aPosition.y would range from -1.2 to 1.2. For that case, I would have high = aPosition.y / 2.4 + 0.5; in the vertex shader.

1 Like

thank you @scudly for playing around with this. yes there is something about how p5 calculates the torus that is not ideal for shaders it seems. But boy do I know nothing about shaders and 3d

I will try to test your ideas although I don´t know exactly know where to put the lines of your code. I will try to read the shader introduction again and hope it helps to understand your suggestions better. Thanks!

My vertex shader is

uniform mat4 uProjectionMatrix;
uniform mat4 uModelViewMatrix;
attribute vec3 aPosition;
varying float high;

void main() {
high = aPosition.y / 2.4 + 0.5;
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
}

where the 2.4 number depends on the scaling of torus you create. Specifically, the ratio of the two radii.

Thanks, when I paste the above in the vertex shader and the following int o the shader.frag:

precision mediump float;

varying float high;

void main() {
gl_Fragcolor = vec4( high, 0., 1.-high, 1. );
}

I get this error:
p5.js says: [sketch.js, line 19] An error with message “Failed to execute ‘useProgram’ on ‘WebGLRenderingContext’: parameter 1 is not of type ‘WebGLProgram’.” occurred inside the p5js library when torus was called. If not stated otherwise, it might be an issue with the arguments passed to torus. (reference | p5.js)

​Do I need to change somethin in the stech file too?

## Preview

Here’s my full code which runs without errors on my linux chrome:

let redGreen;

function setup() {
createCanvas(400, 400, WEBGL);
redGreen = createShader( vs, fs );
noStroke();
}

function draw() {
background(0);
torus( 100, 20, 100, 12);
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}

let vs = `
uniform mat4 uProjectionMatrix;
uniform mat4 uModelViewMatrix;
attribute vec3 aPosition;
varying float high;

void main() {
vec4 positionVec4 = vec4(aPosition, 1.0);
gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
high = aPosition.y / 2.4 + 0.5;
}
`;

let fs = `
precision mediump float;
varying float high;

void main() {
gl_FragColor = vec4( high, 0., 1.-high, 1.0 );
}
`;
3 Likes

running here too! That´s awesome. Thank you! Will dig into this now and try to understand. The result is spot on!