canvas绘制我的大脑状态

下载代码

html

css

分享到微信朋友圈

html

uniform float time;
uniform float width;
uniform float height;

#define PI 3.141592654
#define ITERS 120

uniform float a;
uniform float phi;
uniform float omega;
uniform float N;
// taken from wikipedia and adapted to GLSL
// https://en.wikipedia.org/wiki/Julia_set
float julia(vec2 p, vec2 c, float n) {
  float x = p.x;
  float y = p.y;
  for (int i = 0; i < ITERS; i++) {
    if (x * x + y * y >= 4.0) {
      return float(i);
    }
    float x1 = x * x - y * y;
    float y1 = 2.0 * x * y;
    x = x1 + c.x; 
    y = y1 + c.y;
  }
  return -1.0;
}
  
float multijulia(vec2 p, vec2 c, float n) {
  float x = p.x;
  float y = p.y;
  for (int i = 0; i < ITERS; i++) {
    if (x * x + y * y >= 4.0) {
      return float(i);
    }
    float x1 = pow(x * x + y * y, n / 2.0) * cos(n * atan(y, x));
    float y1 = pow(x * x + y * y, n / 2.0) * sin(n * atan(y, x));
    x = x1 + c.x;
    y = y1 + c.y;
  }
  return -1.0;
}
  
// by @mattdesl    
float hue2rgb(float f1, float f2, float hue) {
    if (hue < 0.0)
        hue += 1.0;
    else if (hue > 1.0)
        hue -= 1.0;
    float res;
    if ((6.0 * hue) < 1.0)
        res = f1 + (f2 - f1) * 6.0 * hue;
    else if ((2.0 * hue) < 1.0)
        res = f2;
    else if ((3.0 * hue) < 2.0)
        res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
    else
        res = f1;
    return res;
}

vec3 hsl2rgb(vec3 hsl) {
    vec3 rgb;   
    if (hsl.y == 0.0) {
        rgb = vec3(hsl.z); // Luminance
    } else {
        float f2;
        
        if (hsl.z < 0.5)
            f2 = hsl.z * (1.0 + hsl.y);
        else
            f2 = hsl.z + hsl.y - hsl.y * hsl.z;
            
        float f1 = 2.0 * hsl.z - f2;
        
        rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
        rgb.g = hue2rgb(f1, f2, hsl.x);
        rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
    }   
    return rgb;
}

void main () {
  float vmin = min(width, height);
  vec3 black = vec3(0.0);
  vec3 white = vec3(1.0);
  vec3 c = vec3(1.0, 0.0, 1.0);
  vec2 p0 = vec2((gl_FragCoord.x - width * .5) / vmin, 
                (gl_FragCoord.y - height * .5) / vmin);
  vec2 p1 = p0 + vec2(cos(time * .2), sin(time * .3)) * .01;
  vec2 p = p1 * (0.9 + 0.9 * (1.0 + sin(time * .1)));
  float t = sin(time * omega) * PI * phi;
  float j = multijulia(p, a * vec2(cos(t), sin(t)), N);
  vec3 color = j < 0.0 ? black : 
    hsl2rgb(vec3(mod(time * .05 + j * 4.0 / float(ITERS), 1.0), 1.0, .7 - 2.0 * j / float(ITERS)));
  gl_FragColor = vec4(vec3(color), 1.0);
}
</script>
<script id="vertexShader" type="x-shader/vertex">
precision mediump float;
attribute vec2 position;

void main () {
  gl_Position = vec4(position, 0, 1);
} 
</script>
<div class="ui">
  <div class="ui__row">
    <label for="a">a</label>
    <input id="a" type="range" min="0.1" max="0.8" step="0.0001" value="0.28543">
  </div>
  <div class="ui__row">
    <label for="phi">?</label>
    <input id="phi" type="range" min=".0001" max="1.0" step="0.0001" value="0.0125"> 
  </div>
  <div class="ui__row">
    <label>ω</label>
    <input id="omega" type="range" min=".0001" max="1.0" step="0.0001" value="0.2"> 
  </div>
  <div class="ui__row">
    <label>N</label>
    <input id="N" type="range" min="1" max="20" step="1" value="2.0">
  </div>
</div>

css

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg