How would I make a gradient?

[DragonYT]

Hello,

I have been trying to make a gradient, but it does not look how I want it to.

 

This is what it looks like:

 

This is what I want it to look like:

 

This is my code:

 

   

GlStateManager.disableTexture2D();
        GlStateManager.enableBlend();
        GlStateManager.disableAlpha();
        GlStateManager.tryBlendFuncSeparate(770, 771, 1, 0);
        GlStateManager.shadeModel(7425);
        Tessellator tessellator = Tessellator.getInstance();
        WorldRenderer worldrenderer = tessellator.getWorldRenderer();
        worldrenderer.begin(7, DefaultVertexFormats.POSITION_COLOR);
        // top right
        worldrenderer.pos((double) 200, (double) 100, (double) 0).color(1.0f, 0, 0, 1.0f).endVertex();
        // top left
        worldrenderer.pos((double) 100, (double) 100, (double) 0).color(1.0f, 1.0f, 1.0f, 1.0f).endVertex();
        // bottom left
        worldrenderer.pos((double) 100, (double) 200, (double) 0).color(0, 0, 0, 1.0f).endVertex();
        // bottom right
        worldrenderer.pos((double) 200, (double) 200, (double) 0).color(0, 0, 0, 1.0f).endVertex();
        tessellator.draw();
        GlStateManager.shadeModel(7424);
        GlStateManager.disableBlend();
        GlStateManager.enableAlpha();
        GlStateManager.enableTexture2D();

 

 

How would I make my code look like my intended result?

[Draco18s]

The problem is that 3d graphics are all built with triangles, so you can't get a hue-tinted diagonal line when the end points are black and white.

You need to construct the quad in such a way that the diagonal edge uses the other two corners (you should be able to do this simply by moving your first vert to be last, or vice versa).

[DragonYT]

On 6/13/2022 at 11:41 PM, Draco18s said:

You need to construct the quad in such a way that the diagonal edge uses the other two corners (you should be able to do this simply by moving your first vert to be last, or vice versa).

Ok, so, what do you mean?

Do you want to me to this:

// top left
worldrenderer.pos((double) 100, (double) 100, (double) 0).color(1.0f, 1.0f, 1.0f, 1.0f).endVertex();
// bottom left
worldrenderer.pos((double) 100, (double) 200, (double) 0).color(0, 0, 0, 1.0f).endVertex();
// bottom right
worldrenderer.pos((double) 200, (double) 200, (double) 0).color(0, 0, 0, 1.0f).endVertex();
// top right
worldrenderer.pos((double) 200, (double) 200, (double) 0).color(1.0f, 0, 0, 1.0f).endVertex();

or how do you want me to do it?

 

EDIT:

I got this to work, but it makes a diagonal line from the top-right vertex..

 

// bottom right
worldrenderer.pos((double) 200, (double) 200, (double) 0).color(0, 0, 0, 1.0f).endVertex();
// top right
worldrenderer.pos((double) 200, (double) 100, (double) 0).color(1.0f, 0, 0, 1.0f).endVertex();
// top left
worldrenderer.pos((double) 100, (double) 100, (double) 0).color(1.0f, 1.0f, 1.0f, 1.0f).endVertex();
// bottom left
worldrenderer.pos((double) 100, (double) 200, (double) 0).color(0, 0, 0, 1.0f).endVertex();
// bottom right
worldrenderer.pos((double) 200, (double) 200, (double) 0).color(0, 0, 0, 1.0f).endVertex();
// top right
worldrenderer.pos((double) 200, (double) 100, (double) 0).color(1.0f, 0, 0, 1.0f).endVertex();

 

Edited June 16, 2022 by DragonYT
Update

[Draco18s]

Yeah, because the real gradient (that you want) isn't truly linear across the diagonal.* It's close though.

The only way to get it to be smoother is to...break things into smaller triangles so you have more control points. But it also gets more complicated to set that up, as you have to compute the location and vertex color value yourself.

 

*This is actually a color-space problem with respect to how our brain interprets color.

[DragonYT]

So.. is there a different way that I could make a gradient that looks like my intended result?

On 6/16/2022 at 1:58 PM, Draco18s said:

 

The only way to get it to be smoother is to...break things into smaller triangles so you have more control points. But it also gets more complicated to set that up, as you have to compute the location and vertex color value yourself.

 

[Draco18s]

On 6/16/2022 at 12:58 PM, Draco18s said:

you have to compute the location and vertex color value yourself.