Can a gradient be applied to a sphere?

Gloria

Hi!

I might ask something obvious, but I'm a bit new. I've been searching and I couldn't find the answer.

Can a gradient be applied to a sphere in processing?

I want to use a two colour gradient (from blue to yellow) to colour a sphere. Then I want to make the gradient dynamically change, depending on data input.

I've seen linear and radial gradients, but nothing applied to a sphere.

Thanks in advance!

amnon

Sure, how are you drawing the sphere?

Gloria

Let me explain a little better what I want to do. Basically I am visualizing emotions off twitter. I get a happy versus sad tweets proportion, and based on that, I was drawing a kind of graph do visualize it. You can see it here: https://youtube.com/watch?v=BuapPHUzAo4&feature=youtu.be

So my idea was to visualize this same concept in a sphere. It needs to have a gradient, going from blue (sad) to yellow (happy).

I found this code to make a sphere.

void setup()
{
    size(450, 200, P3D);
    noStroke();
}

void draw()
{
    background(245, 238, 184);
    fill(246, 225, 65);

    lights();

    pushMatrix();
    translate(width/2 + width/4, height/2);
    rotateY(radians(frameCount));
    sphere(30);
    popMatrix();
}

So I tried applying a regular gradient, but it doesn't work on the sphere. Or at least I don't know how to...

amnon

With that single default sphere call indeed you can't do a gradient, because you can only define a single fill color for the shape as a whole.

To have a sphere with gradient, you will need access to individual vertices, so you can set the fill however you like per vertex. To have access to individual vertices (and their fill color) you need to create the 3D shape accordingly. Either do it yourself manually or use a 3D library (Hemesh, Toxiclibs and more) to do it for you.

When you want to do it yourself, you can use beginShape(), endShape(), fill() and vertex() to create custom 2D and 3D shapes. There are different shape kinds, for example triangles, trianglestrips, quads or quadstrips. See: https://www.processing.org/reference/beginShape_.html

Gloria

Thank you! This is a bit more advanced than what I'd been doing. I will try to look at it in more depth :-)

amnon

Actually perhaps you could do a gradient with a GLSL shader. That may be an even easier solution, because you don't have to do 'complex geometry' (the current sphere call may suffice). The only downside is that you would have to know how to write / work with GLSL shaders, which in themselves may be complex for a beginner.

On a sidenote, your youtube video doesn't show a gradient. It actually just shows two colors without any interpolation. It seems there is just a 'percentage' which serves as the border between colorA and colorB.

amnon

Here is a quick example of such as shader (without the advanced lighting calculations!).

Main sketch

PShader coloredSphere;

void setup() {
  size(1280, 720, P3D);
  coloredSphere = loadShader("coloredSphereFrag.glsl", "coloredSphereVert.glsl");
}

void draw() {
  coloredSphere.set("border", map(mouseY, 0, height, -250, 250));
  shader(coloredSphere);
  background(245, 238, 184);
  lights();
  pushMatrix();
  translate(width/2, height/2);
  fill(246, 225, 65);
  sphere(250);
  popMatrix();
}

coloredSphereFrag.glsl

#define PROCESSING_LIGHT_SHADER

uniform float border;

varying vec4 vertPosition;

void main() {  
  vec4 color;
  if (vertPosition.y < border) {
    color = vec4(1.0, 1.0, 0.0, 1.0);
  } else {
    color = vec4(0.0, 0.0, 1.0, 1.0);
  }
  gl_FragColor = color;
}

coloredSphereVert.glsl

uniform mat4 transform;
attribute vec4 vertex;
varying vec4 vertPosition;

void main() {
  vertPosition = vertex;
  gl_Position = transform * vertex;  
}