// louise lessel - @louiselessel ( https://github.com/louiselessel )

// more p5.js + shader examples: https://itp-xstory.github.io/p5js-shaders/

​

#ifdef GL_ES

precision mediump float;

#endif

​

#define PI 3.14159265359

#define TWO_PI 6.28318530718

​

uniform vec2 u_resolution;

uniform float u_time;

uniform float u_mouse;

​

// turn rgb into 0 to 1

vec3 rgb(float r, float g, float b){

  return vec3(r/255.0, g/255.0, b/255.0);

}

​

// make a polygon

vec4 poly(float x, float y, float size, float sides, float rotation, vec3 col) {

  // get coordinates

  vec2 coord = gl_FragCoord.xy;

  // move coords to position of shape

  vec2 pos = vec2(x, y) - coord * 2.0;

  // calculate angle of pixel in relation to pos

  float angle = atan(pos.x, pos.y) + PI + rotation;

  // calculate size of shape

  float radius = TWO_PI/sides;

  // controls shape appearance

  // creates circle with length(pos); changes shape with cos()

  // try sin()

  float d = cos(floor(0.5 + angle/radius) * radius - angle) * length(pos);

  // restrict shape to b/w and set size

  // use smoothstep for soft edge

  d = 1.0 - smoothstep(size * 0.5, size * 0.5 + 1.0, d);

  // return color with shape as alpha

  return vec4(col, d);

}

​

void main() {

  vec2 center = u_resolution; // draw shape at center of window

  float size = u_resolution.y * 0.5; // make shape 1/4 of window height

  // slowly inrease sides; when it reaches 10, go back to 3

  float sides = mod(floor(u_mouse), 7.0) + 3.0;

  float rotation = u_time; // in radians

  // make shape at center of window

  float x = center.x;

  float y = center.y;

  // color for shape

  vec3 col = rgb(200.0, 240.0, 200.0);

  // call shape function

  vec4 poly = poly(x, y, size, sides, rotation, col);

  // mix polygon with opposite of green according to shape's alpha

  poly.rgb = mix(1.0 - col, poly.rgb, poly.a);

  gl_FragColor = vec4(poly.rgb, 1.0);

}