---
layout: post-plain
title: "Shader fun"
date: 2020-12-28
categories: design
---
<canvas id="canvas" width="1080" height="1080" style="border:1px solid white;
width:100%;"></canvas>

<script id="node-vertex-shader" type="x-shader/x-vertex">
  uniform vec2 u_resolution;
  attribute vec2 a_position;
  attribute vec2 a_center;
  attribute float a_radius;

  varying vec2 center;
  varying vec2 resolution;
  varying float radius;
   
  void main() {
    vec2 clipspace = a_position / u_resolution * 2.0 - 1.0;
    gl_Position = vec4(clipspace * vec2(1, -1), 0, 1);

    radius = a_radius;
    center = a_center;
    resolution = u_resolution;
  }
</script>

<script id="node-fragment-shader" type="x-shader/x-fragment">

  precision mediump float;

  varying vec2 center;
  varying vec2 resolution;
  varying float radius;

  void main() {
    vec4 color0 = vec4(0.0, 0.0, 0.0, 0.0);

    float x = gl_FragCoord.x;
    float y = resolution[1] - gl_FragCoord.y;

    float dx = center[0] - x;
    float dy = center[1] - y;
    float distance = sqrt(dx*dx + dy*dy);

    if ( distance < radius )
      gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
    else 
      gl_FragColor = color0;

  }
</script>


{% asset shaderCanvas2.js %}