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

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.