first-glsl.md

twiglで書いた。環境はclassic

URL

precision highp float;
uniform vec2 resolution;
uniform vec2 mouse;
uniform float time;

vec3 border(vec2 canvas) {
  vec3 left = vec3(1.0, 0.9, 0.3);
  vec3 right = vec3(0.0);
  vec2 line = step(vec2(0.2,0.2), canvas) -step(vec2(0.25, 0.25), canvas) + step(vec2(0.75, 0.75), canvas) - step(vec2(0.8, 0.8), canvas);
  vec3 res = mix(left, right, line.x * line.y);
  return res;
}

vec3 draw_background(vec2 canvas, float side) {
  float B = 0.1; // border
  float W = 0.01; //width
  float S = 0.3;
  vec3 background_color = vec3(0.0, 0.0, 0.05);
  vec2 pad = (resolution - side) / 2.0;
  vec2 regularized = (canvas - pad) / side; // 0 ~ 1
  vec3 color = vec3(abs(sin(5.0 * regularized.x)), abs(cos(5.0 * regularized.y)), abs(cos(3.0 * (regularized.y + regularized.x))));
  vec3 border_color = vec3(abs(sin(2.0 * regularized.x)), abs(cos(regularized.y)), 0.9);
  vec2 bottom_left = pad;
  vec2 top_right = resolution - pad;
  vec2 inside = step(bottom_left, canvas) - step(top_right, canvas);
  
  vec2 border_inside = step(B, regularized) - step(1.0 - B, regularized);
  vec2 stage_inside = step(B+W, regularized) - step(1.0 - B - W, regularized);
  vec2 square_inside = step(S, regularized) - step(1.0 - S, regularized);
  
  vec3 square = mix(background_color, color, square_inside.x * square_inside.y);
  vec3 stage = mix(border_color, square, stage_inside.x * stage_inside.y);
  vec3 content = mix(background_color, stage, border_inside.x * border_inside.y);
  vec3 res = mix(background_color, content, inside.x * inside.y);
  return res;
}

void main(){
  float minsize = min(resolution.x, resolution.y);
  gl_FragColor = vec4(draw_background(gl_FragCoord.xy, minsize), 1.0);
}