Shader

void main() {
    vec2 pos = ((gl_FragCoord.xy/resolution) - 0.5)*2.0; // origin is in center

    gl_FragColor = vec4(pos.x, pos.y, 0.0, 1.0);
}

void main() {

    vec2 pos = ((gl_FragCoord.xy/resolution) - 0.5)*2.0; // origin is in center

    // who remembers SOH CAH TOA ?
    // tan, given an angle will return the ratio
    // so if we only have the ratio of position
    // we use atan to get the angle
    float angle = atan(pos.y/abs(pos.x+0.01));
    // we take the absolute value of x and add a small number to avoid
    // dividing by zero which is undefined behavior

    float r = sin(angle + time);
    // sin returns a number from -1 to 1, and colors are from 0 to 1, so thats
    // why you only see red on the screen half the time. the angle goes around
    // the screen, adding time moves it clockwise

	float ringFrequency = 5.; // making this number bigger will increase frequency
	float g = cos(length(pos*ringFrequency ) - time);
	// the distance (aka length) from the center put in a cos, time moves the
	// circles in.

	float b = cos(angle+ cos(length(pos*15.)) + bands.y );

    gl_FragColor = vec4(r,g,b,1.);


}

// i copied and pasted these functions from the sticker sheet

// As t runs from 0 to 1 (our normalized palette index or domain),
//the cosine oscilates c times with a phase of d.
//The result is scaled and biased by a and b to meet the desired constrast and brightness.
// http://www.iquilezles.org/www/articles/palettes/palettes.htm
// to see this function graphed out go to: https://www.desmos.com/calculator/rz7abjujdj
vec3 cosPalette( float t , vec3 brightness, vec3 contrast, vec3 osc, vec3 phase)
{

    return brightness + contrast*cos( 6.28318*(osc*t+phase) );
}


void main() {

    vec2 pos = ((gl_FragCoord.xy/resolution) - 0.5)*2.0; // origin is in center

    // who remembers SOH CAH TOA ?
    // tan, given an angle will return the ratio
    // so if we only have the ratio of position
    // we use atan to get the angle
    float angle = atan(pos.y/abs(pos.x+0.01));
    // we take the absolute value of x and add a small number to avoid
    // dividing by zero which is undefined behavior

    float r = sin(angle + time);
    // sin returns a number from -1 to 1, and colors are from 0 to 1, so thats
    // why you only see red on the screen half the time. the angle goes around
    // the screen, adding time moves it clockwise

	float ringFrequency = 5.; // making this number bigger will increase frequency
	float g = cos(length(pos*ringFrequency ) - time);
	// the distance (aka length) from the center put in a cos, time moves the
	// circles in.

	float b = cos(angle+ cos(length(pos*15.)) + bands.y );
	// this combines what we learned in the red and green channels
	// angle is going through a cos and so is the length, so we see the
	// blue channel oscillating in both dimensions the polar coordinates give us
	// here the music effects the place where the phase of the cosine starts
	    // please play around with these numbers to get a better palette
    vec3 brightness = vec3(0.5);
    vec3 contrast = vec3(0.15,0.1,0.3);
    // the numbers that divide time are pretty arbitrary, as long as they are not the same and are somewhere between 10-100 id say it gives the desired effect
    vec3 osc = vec3(r,cos(time/20.),cos(time/31.));
    vec3 phase = vec3(b,0.5,0.1);
	vec3 color = cosPalette(g, brightness, contrast, osc, phase);


    gl_FragColor = vec4(color,1.);


}