I made a little shader (which is just a program that generates an image by running once for each pixel) thats supposed to be just a HSV rainbow. So it starts with red, then it gradually becomes yellow then green etc.
I managed to make this programm through trial and error (keep in mind that the shader clamps each value above and below zero to 1 and 0 respectively.):

precision mediump float;

varying vec2 position;
uniform float time;
uniform vec2 resolution;

#define PI 3.14159265

float p(float x){

    return sin(x*(PI/1.5)+1.5)+0.5;


vec3 rain(float x){

    float a=x*3.;

    return vec3(p(a),p(a+2.),p(a+1.));


void main() {

  gl_FragColor.rgb =rain(position.x);
  gl_FragColor.a = 1.0;

(you can run it here: http://pixelshaders.com/editor/)

I think it looks pretty acceptable, but when I put it into desmos just to see what it looks like graphed, the curves don't cross the x axis up where they are suppsed to, namely only at whole numbers on the x axis. Heres what it looks like, red graph=red, purple=green, blue=blue: https://www.desmos.com/calculator/rbgbd9olk1

But that really doesn't make any sense to me, since the numbers I used for a and b seam pretty fitting for was I was trying to do. So what am I doing wrong and how do I find the numbers that are supposed to go there so that the graphs only intersect at whole numbers


According to your picture, it looks like you want $f(0)=1.5$. So $\sin(a)+b=1.5$. If $b=0.5$, this implies $a=\pi/2$ (or that plus some multiple of $2\pi$). Since $\pi/2$ is close to $1.5$, that’s why your picture looks “almost right” but not exactly right.

  • $\begingroup$ Yeah now that I look at it it makes sense a should be scaled with pi aswell, thanks $\endgroup$ – user2741831 May 16 '19 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.