Daily Creative Coding

元「30 min. Processing」。毎日、Creative Codingします。

【GLSL】多角形を座標変換する

See the Pen coordinate transformation with polygons by aadebdeb (@aadebdeb) on CodePen.

  #define PI 3.14159265359
  #define TWO_PI PI * 2.0

precision mediump float;

uniform float u_time;
uniform vec2 u_mouse;
uniform vec2 u_resolution;

float polygon(vec2 center, vec2 st, float radius, int n) {
  vec2 pos = st - center;
  float a = atan(pos.x, pos.y) + PI;
  float r = TWO_PI / float(n);

  float d = cos(floor(.5 + a / r) * r - a) * length(pos);

  return smoothstep(radius * 0.95, radius, d) - smoothstep(radius, radius * 1.05, d);
}

void main(void) {
  float m = min(u_resolution.x, u_resolution.y);
  vec2 st = gl_FragCoord.xy / m;
  st = st * 2.0 - u_resolution / m;

  vec2 mouse = u_mouse / m;
  mouse = mouse * 2.0 - u_resolution / m;

  vec3 st3 = vec3(st, 1.0);
  mat3 transMat= mat3(1.0, 0.0, 0.0,
                      0.0, 1.0, 0.0,
                      -mouse.x, -mouse.y, 1.0);
  st3 = transMat * st3;

  float theta = atan(mouse.y, mouse.x);
  mat3 rotMat = mat3(cos(theta), sin(theta), 0.0,
                    -sin(theta), cos(theta), 0.0,
                    0.0, 0.0, 1.0);
  st3 = rotMat * st3;

  float scale = 1.0 + length(mouse);
  mat3 scaleMat = mat3(scale, 0.0, 0.0,
                         0.0, scale, 0.0,
                         0.0, 0.0, 1.0);
  st3 = scaleMat * st3;

  // mat3 shearMat = mat3(1.0, mouse.x, 0.0,
  //                      mouse.y, 1.0, 0.0,
  //                      0.0, 0.0, 1.0);
  // st3 = shearMat * st3;

  st = st3.xy;

  vec3 v = vec3(0.82, 0.945, 0.8);
  v = mix(v, vec3(0.714, 0.098, 0.447),  polygon(vec2(-0.33, -0.33), st, 0.15, 3));
  v = mix(v, vec3(0.714, 0.098, 0.447),  polygon(vec2(0.33, -0.33), st, 0.15, 4));
  v = mix(v, vec3(0.714, 0.098, 0.447),  polygon(vec2(-0.33, 0.33), st, 0.15, 5));
  v = mix(v, vec3(0.714, 0.098, 0.447),  polygon(vec2(0.33, 0.33), st, 0.15, 6));

  gl_FragColor = vec4(v, 1.0);
}
f:id:aa_debdeb:20170418091848p:plain