Created
November 13, 2022 16:06
-
-
Save CharStiles/9ea8ac97fa6792689b37394cbd898c45 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#ifdef GL_ES | |
precision mediump float; | |
#endif | |
uniform vec2 u_resolution; | |
uniform float u_time; | |
uniform float u_vol; | |
// 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/u_resolution) - 0.5)*2.0; // origin is in center | |
float freq = abs(pos.x*5.); | |
pos.x = sin((pos.y * freq)+ cos(pos.y*freq) ); | |
// 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 + u_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 ) - u_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.)) + u_vol ); | |
// 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(u_time/20.),cos(u_time/31.)); | |
vec3 phase = vec3(b,0.5,0.1); | |
vec3 color = cosPalette(g, brightness, contrast, osc, phase); | |
gl_FragColor = vec4(color,1.); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment