http://glslsandbox.com/e#20203.2
#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 resolution;
void main( void ) {
vec2 p = ( gl_FragCoord.xy / resolution.xy );
p = 2.0 * p - 1.0;
p.x *= resolution.x / resolution.y;
vec3 bg = vec3(1);
vec3 color = vec3(0.0);
// 적색원
vec3 c1 = vec3(.8, 0, 0); // 색상
float timev = mod(time / 2.0, 0.5); // 시간1
vec2 m1 = vec2(timev, timev); // 원의 위치
float d1 = distance(p, m1); // 모든 점에 대하여 원의 위치까지의 거리 ; 원의 줌심이 1, 멀어질수록 0이 되는 그라데이션값
d1 = smoothstep(0.2, 0.25, d1); // 그라데이션을 제한하여 원처럼 보이게 한다.
// 녹색원
vec3 c2 = vec3(0, .8, 0); // 색상
float timev2 = mod(time, 0.5); // 시간1
vec2 m2 = vec2(timev, 0); // 원의 위치
float d2 = distance(p, m2); // 모든 점에 대하여 원의 위치까지의 거리 ; 원의 줌심이 1, 멀어질수록 0이 되는 그라데이션값
d2 = smoothstep(0.3, 0.35, d2); // 그라데이션을 제한하여 원처럼 보이게 한다.
color = mix(bg, c1, 1.0 - d1); // 배경색과 적색을 합성하고 그 범위를 적색원 만큼 채운다
color = mix(color, c2, 1.0 - d2); // 적색과 녹색을 을 합성하고 그 범위를 녹색원 만큼 채운다
gl_FragColor = vec4( color, 1.0 );
}
http://glslsandbox.com/e#20203.1
#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 resolution;
float hash(float n){
return fract(sin(n) * 45323.2);
}
void main( void ) {
vec2 p = ( gl_FragCoord.xy / resolution.xy );
p = 2.0 * p - 1.0;
p.x *= resolution.x / resolution.y;
vec3 bg = vec3(1);
vec3 color = vec3(0.0);
for(int i = 0; i < 10; i ++){
vec3 c1 = vec3(1, 0, 0); // 공의 색상
float t = mod(time, 5.0); // time%5초 - 시간
float vx = hash(float(i))*t; // 점 마다의 속력 hash에 넣어 랜덤하게 생성
float px = 0.0 + vx-1.0; // 점의 x위치
float py = float(i)/10.0-.5; // 점의 y위치
vec2 m1 = vec2(px, py); // vec2에 저장된 위치
float d1 = distance(p, m1); // 중심점과 모든 픽셀과의 거리 : 중심은 1로, 멀어질수록 0이 되는 그라디언트가 된다.
float r = hash(float(i))/5.0; // hashing된 반지름
d1 = smoothstep(r, r+0.01, d1); // 그라디언트의 범위를 줄여 원으로 보이게 만든다.
color = mix(color, c1, 1.0 - d1);
// 모든 색상값을 합친다. 모든 원들이 한번에 보일수 있게 한다. 기존의 색상에 새 색상을 합쳐고, 마스킹을 새 색상의 범위(새 원)만큼 제한한다.
}
gl_FragColor = vec4( color, 1.0 );
}