Last active
March 28, 2018 06:23
-
-
Save co3moz/e49740d499e12330d0a2 to your computer and use it in GitHub Desktop.
just glsl starter boilerplate :)
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
precision mediump float; | |
uniform float time; | |
uniform vec2 mouse; | |
uniform vec2 resolution; | |
void main() { | |
vec2 aspect = resolution.xy / min(resolution.x, resolution.y); | |
vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect; | |
vec4 color = vec4(0.0); | |
gl_FragColor = color; | |
} |
Red soft circle
precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
void main() {
vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
vec4 color = vec4(0.0);
if(distance(mouse * aspect, position) < 0.1) {
color = vec4(1.0 - distance(mouse * aspect, position) * 10.0, 0.0, 0.0, 1.0);
}
gl_FragColor = color;
}
Blue and red together
precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
void main() {
vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
vec4 color = vec4(0.0);
if (distance(mouse * aspect, position) < 0.1) {
if (mouse.y * aspect.y < position.y) {
color = vec4(1.0 - distance(mouse * aspect, position) * 10.0, 0.0, 0.0, 1.0);
} else {
color = vec4(0.0, 0.0, 1.0 - distance(mouse * aspect, position) * 10.0, 1.0);
}
}
gl_FragColor = color;
}
Rainbow effect.
For rainbow effect we must understand basic sinus formula. sin(x) =? sin(x+2pi)
so there is 2pi
for color shift. We have 3 different color that r,g,b
so for each gets 2pi/3
. Basicly if we use this code we get rainbow vec3(sin(x), sin(x + 2pi/3), sin(x + 4pi/3))
. Rainbow effect will be done with time so x=time
. Lets make a rainbow effect.
2pi/3 = 2.094395
4pi/3 = 4.188790
precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
void main() {
vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
vec4 color = vec4(0.0);
if(distance(mouse * aspect, position) < 0.1) {
float merge = 1.0 - distance(mouse * aspect, position) * 10.0;
color = vec4(sin(time) * merge, sin(time + 2.094395) * merge, sin(time + 4.188790) * merge, 1.0);
}
gl_FragColor = color;
}
color is keep changing..
Rotation Red and Blue together
precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
void rotate(out vec2 position, float angle) {
float px = position.x;
position.x = px * cos(time) - position.y * sin(time);
position.y = px * sin(time) + position.y * cos(time);
}
void main() {
vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
vec4 color = vec4(0.0);
vec2 m = mouse * aspect;
rotate(position, time);
rotate(m, time);
if (distance(m , position) < 0.1) {
if (m.y < position.y) {
color = vec4(1.0 - distance(m, position) * 10.0, 0.0, 0.0, 1.0);
} else {
color = vec4(0.0, 0.0, 1.0 - distance(m, position) * 10.0, 1.0);
}
}
gl_FragColor = color;
}
Multicolored
precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
void rotate(out vec2 position, float angle) {
float px = position.x;
position.x = px * cos(time) - position.y * sin(time);
position.y = px * sin(time) + position.y * cos(time);
}
void main() {
vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
vec4 color = vec4(0.0);
vec2 m = mouse * aspect;
rotate(position, time);
rotate(m, time);
float size = 0.3;
if (distance(m, position) < size) {
float merge = 1.0 - distance(m, position) / size;
if (m.y < position.y) {
if (m.x > position.x) {
color = vec4(merge, 0.0, 0.0, 1.0);
} else {
color = vec4(0.0, 0.0, merge, 1.0);
}
} else {
if (m.x > position.x) {
color = vec4(0.0, merge, 0.0, 1.0);
} else {
color = vec4(merge, merge, 0.0, 1.0);
}
}
}
gl_FragColor = color;
}
Spiral Tube
Buffer example
precision mediump float;
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
uniform sampler2D buffer;
void rotate(out vec2 position, float angle) {
float px = position.x;
position.x = px * cos(time) - position.y * sin(time);
position.y = px * sin(time) + position.y * cos(time);
}
vec4 loadColorFromBuffer(vec2 position, vec2 aspect, vec2 shift) {
return texture2D(buffer, position / aspect + shift);
}
void main() {
vec2 aspect = resolution.xy / min(resolution.x, resolution.y);
vec2 position = (gl_FragCoord.xy / resolution.xy) * aspect;
vec4 color = vec4(0.0);
if (time > 1.0) {
#define load(x, y) loadColorFromBuffer(position, aspect, vec2(x, y))
color = (load(0.001, 0.0) / load(-0.001, 0.0));
}
vec2 m = vec2(0.7 + sin(time) / 10.0, 0.5 + cos(time) / 10.0) * aspect;
rotate(position, time);
rotate(m, time);
float size = 0.3;
if (distance(m, position) < size) {
float merge = 1.0 - distance(m, position) / size;
if (m.y < position.y) {
if (m.x > position.x) {
color = vec4(merge, 0.0, 0.0, 1.0);
} else {
color = vec4(0.0, 0.0, merge, 1.0);
}
} else {
if (m.x > position.x) {
color = vec4(0.0, merge, 0.0, 1.0);
} else {
color = vec4(merge, merge, 0.0, 1.0);
}
}
}
gl_FragColor = color;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Soft circle