Created
March 29, 2017 01:10
-
-
Save JBlackCat/b919456beeceb8f3a84a75665d9903cc to your computer and use it in GitHub Desktop.
Color Addition and Subtraction, Tutorial 20 - https://www.shadertoy.com/view/Md23DV
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
float circleLocation(vec2 r, vec2 center, float radius) { | |
float aaTolerance = 0.005; | |
float distanceFromCenter = length(r-center); | |
float antiAliasOutsideCircle = smoothstep(radius - aaTolerance, radius + aaTolerance, distanceFromCenter); | |
float insideCircle = 1.0 - antiAliasOutsideCircle; | |
return insideCircle; | |
} | |
void main() { | |
//coordinate systems | |
vec2 r = vec2((gl_FragCoord.xy - 0.5*resolution.xy)/resolution.y) * 2.0; // Is [-1, 1] coordinate system | |
vec2 p = vec2(gl_FragCoord.xy/resolution.xy); //[0,1] coordinate system | |
//Set background color | |
vec3 bgCol = vec3(0.0); // black | |
vec3 pixel = bgCol; | |
vec3 rAxesColor = vec3(0.537, 1.0, 0.364); | |
float rAxesThickness = 0.006; | |
vec3 pAxesColor = vec3(1.0, 0.412, 0.635); | |
float pAxesThickness = 0.008; | |
//Grid tick size | |
const float tickWidth = 0.1; | |
const float tickLineThickness = 0.002; | |
vec3 gridColor = vec3(0.5); | |
// -------------------------------------- | |
// -------------------------------------- | |
// -------- Start Fancy Code ------------ | |
vec3 black = vec3(0.0); | |
vec3 white = vec3(1.0); | |
vec3 gray = vec3(0.3); | |
vec3 col1 = vec3(0.216, 0.471, 0.698); // blue | |
vec3 col2 = vec3(1.00, 0.329, 0.298); // red | |
vec3 col3 = vec3(0.867, 0.910, 0.247); // yellow | |
vec3 ret; | |
float d; | |
if(r.x < -1.5/3.0){ | |
//opaque layers on top of each other | |
ret = gray;//assign a gray value to the pixel first | |
d = circleLocation(r, vec2(-1.1, 0.3), 0.4); | |
// mix the previous color value with | |
// the new color value according to | |
// the shape area function | |
// at this line, previous color is gray; | |
ret = mix(ret, col1, d); | |
d = circleLocation(r, vec2(-1.3, 0.0), 0.4); | |
ret = mix(ret, col2, d); | |
d = circleLocation(r, vec2(-1.05, -0.3), 0.4); | |
ret = mix(ret, col3, d); | |
} | |
else if(r.x < 1.5/3.0) { | |
// Color addition | |
// This is how lights of different colors add up | |
// http://en.wikipedia.org/wiki/Additive_color | |
ret = black; // ADDITIVE color STARTS with BLACK | |
ret += circleLocation(r, vec2(0.1, 0.3), 0.4)*col1; //add the new color to the previous color | |
ret += circleLocation(r, vec2(-0.1, 0.0), 0.4)*col2; | |
ret += circleLocation(r, vec2(0.15, -0.3), 0.4)*col3; | |
} | |
else { | |
// Color subtraction | |
// This is how dyes, inks, and paint pigments of different colors add up | |
// http://en.wikipedia.org/wiki/Subtractive_color | |
ret = white; // SUBTRACTED color STARTS with WHITE | |
ret -= circleLocation(r, vec2(1.0, 0.3), 0.4)*col1; | |
ret -= circleLocation(r, vec2(0.95, 0.0), 0.4)*col2; | |
ret -= circleLocation(r, vec2(1.0, -0.25), 0.4)*col3; | |
// when all components of "ret" becomes equals or smaller than 0.0 it becomes black. | |
} | |
pixel = ret; | |
// -------- End Fancy Code--------------- | |
// -------------------------------------- | |
// -------------------------------------- | |
//Draw r grid lines | |
for(float i = -1.0; i < 1.0; i +=tickWidth) { | |
//i is the line coordinate; | |
if(abs(r.x - i)< tickLineThickness) pixel = gridColor; | |
if(abs(r.y - i)< tickLineThickness) pixel = gridColor; | |
} | |
//Draw p grid lines | |
// for(float i = -1.0; i < 1.0; i +=tickWidth) { | |
// //i is the line coordinate; | |
// if(abs(p.x - i)< tickLineThickness) pixel = gridColor; | |
// if(abs(p.y - i)< tickLineThickness) pixel = gridColor; | |
// } | |
// //[0,1] coordinat system axes | |
// if(abs(p.x) < pAxesThickness) pixel = pAxesColor; | |
// if(abs(p.y) < pAxesThickness) pixel = pAxesColor; | |
//[-1,1] coordinat system axes | |
if(abs(r.x) < rAxesThickness) pixel = rAxesColor; | |
if(abs(r.y) < rAxesThickness) pixel = rAxesColor; | |
//Final output | |
gl_FragColor = vec4(pixel, 1.0); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment