How to make a rainbow graph with sine whos edges line up

Question

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

Answer 1

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.