glea实现表白爱心旋转动画效果-html代码-BFW代码库

glea实现表白爱心旋转动画效果

代码语言：html

所属分类：表白

代码描述：glea实现表白爱心旋转动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  height: 100vh;
  margin: 0;
}

canvas {
  display: block;  
  width: 100vw;
  height: 100vh;
}
</style>

</head>
<body translate="no">
<canvas></canvas>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/glea.js"></script>
<script >
const vert = `
precision highp float;
attribute vec2 position;

void main() {
  gl_Position = vec4(position, 0, 1.0);
}
`;

const frag = `
precision highp float;
uniform float time;
uniform vec2 resolution;

vec2 coords() {
  float vmin = min(resolution.x, resolution.y);
  return vec2((gl_FragCoord.x - resolution.x * .5) / vmin,
              (gl_FragCoord.y - resolution.y * .5) / vmin);
}

vec2 rotate(vec2 p, float a) {
  return vec2(p.x * cos(a) - p.y * sin(a),
              p.x * sin(a) + p.y * cos(a));
}

float symmetricDiff(float a, float b)
{
    // (A ∪ B) \ (A ∩ B)
    return max(min(a, b), -max(a, b));
}

// function from https://www.shadertoy.com/view/3ll3zr
float sdHeart(in vec2 p, float s) {
  p /= s;
  vec2 q = p;
  q.x *= 0.5 + .5 * q.y;
  q.y -= abs(p.x) * .63;
  return (length(q) - .7) * s;
}
float distanceField(vec2 p) {
  float d = 10000.0; 
  for (int i = 0; i < 30; i++) {
    vec2 motion = vec2(cos(float(i) + time * .2), sin(float(i) + time * .3)) * (3.0);
    vec2 point = vec2(cos(float(i) * 3.0) * 5.0, sin(float(i) * 7.0) * 5.0) + m.........完整代码请登录后点击上方下载按钮下载查看