Skip to content

Instantly share code, notes, and snippets.

@CharStiles
Last active July 30, 2022 21:21
Show Gist options
  • Save CharStiles/5a74e98dfb644786e3d0a614f09741f5 to your computer and use it in GitHub Desktop.
Save CharStiles/5a74e98dfb644786e3d0a614f09741f5 to your computer and use it in GitHub Desktop.
// i copied and pasted these functions from the sticker sheet
// to read more about turbo: https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html
// in short, its good for colorblindness, getting more deatil (based on human perception), high contrast
// but still smooth interpretation of the in-value
vec3 turboPalette(float x){ // t can be any floating point number that changes, like time or pos.x;
float m = 1.0; // it repeats every 1 unit, because thats the turbo function's range
float t = m - abs(mod(x*20. , (2.*m)) - m);
// this line turns an increasing value into a triangle wave, linear interpolation of length 1 up
// linear interpolation of length 1 down. like this: /\/\/\/\/\/\/\/\/\/\/\/\/\/
// you use const whenever the varible is just using plain old data that wont change
// its more efficient
const vec3 c0 = vec3(0.1140890109226559, 0.06288340699912215, 0.2248337216805064);
const vec3 c1 = vec3(6.716419496985708, 3.182286745507602, 7.571581586103393);
const vec3 c2 = vec3(-66.09402360453038, -4.9279827041226, -10.09439367561635);
const vec3 c3 = vec3(228.7660791526501, 25.04986699771073, -91.54105330182436);
const vec3 c4 = vec3(-334.8351565777451, -69.31749712757485, 288.5858850615712);
const vec3 c5 = vec3(218.7637218434795, 67.52150567819112, -305.2045772184957);
const vec3 c6 = vec3(-52.88903478218835, .5452736712, 110.5174647748972);
return c0+t*(c1+t*(c2+t*(c3+t*(c4+t*(c5+t*c6))))); // this is magic, dont worry about it.
}
float getBPMVis(float bpm){
// this function can be found graphed out here :https://www.desmos.com/calculator/rx86e6ymw7
float bps = 60./bpm; // beats per second
float bpmVis = tan((time*PI)/bps);
// multiply it by PI so that tan has a regular spike every 1 instead of PI
// divide by the beat per second so there are that many spikes per second
bpmVis = clamp(bpmVis,0.,10.);
// tan goes to infinity so lets clamp it at 10
bpmVis = abs(bpmVis)/20.;
// tan goes up and down but we only want it to go up
// (so it looks like a spike) so we take the absolute value
// dividing by 20 makes the tan function more spiking than smoothly going
// up and down, check out the desmos link to see what i mean
bpmVis = 1.+(bpmVis*0.1);
// we want to multiply by this number, but its too big
// by itself (it would be too stroby) so we want the number to multiply
// by to be between 1.0 and 1.05 so its a subtle effect
return bpmVis;
}
void main() {
vec2 pos = uv(); // 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 bpmVis = getBPMVis(128.);
float ringFrequency = 5.; // making this number bigger will increase frequency
float g = cos(length(pos*ringFrequency *bpmVis) - 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 * 5.);
// 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
vec3 color = 1.-turboPalette(r*b*g);
// i thought it looked too light so i inverted the colors by adding 1- at the
// beginning. Ill be honest this combo was randomly decided.
color = vec3(r,g,b) / color;
gl_FragColor = vec4(color,1.);
// now play it to a bpm bop like I feel love by Donna Summer
//https://www.youtube.com/watch?v=Nm-ISatLDG0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment