canvas实现跟随鼠标移动的烟雾流体动画效果代码-html代码-BFW代码库

canvas实现跟随鼠标移动的烟雾流体动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现跟随鼠标移动的烟雾流体动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
  
  
<style>
html,
body {
  margin: 0;
  height: 100%;
}

canvas {
  display: block;
  width: 100%;
  height: 100vh;
}
h1 {
  white-space: nowrap;
  font-size: 5rem;
  font-family: "Anton", sans-serif;
  letter-spacing: 0.35em;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1460px) {
  h1 {
    font-size: 4rem;
  }
}
@media (max-width: 850px) {
  h1 {
    font-size: 3rem;
  }
}
@media (max-width: 650px) {
  h1 {
    font-size: 2rem;
  }
}
</style>



  
  
</head>

<body translate="no">
  <canvas></canvas>
<h1>Smoke Streams</h1>
  
      <script >
"use strict";

let canvas = document.getElementsByTagName("canvas")[0];

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

let config = {
  TEXTURE_DOWNSAMPLE: 1,
  DENSITY_DISSIPATION: 0.98,
  VELOCITY_DISSIPATION: 0.99,
  PRESSURE_DISSIPATION: 0.8,
  PRESSURE_ITERATIONS: 25,
  CURL: 35,
  SPLAT_RADIUS: 0.002 };


let pointers = [];
let splatStack = [];

let _getWebGLContext = getWebGLContext(canvas);
let gl = _getWebGLContext.gl;
let ext = _getWebGLContext.ext;
let support_linear_float = _getWebGLContext.support_linear_float;

function getWebGLContext(canvas) {
  let params = {
    alpha: false,
    depth: false,
    stencil: false,
    antialias: false };


  let gl = canvas.getContext("webgl2", params);

  let isWebGL2 = !!gl;

  if (!isWebGL2)
  gl =
  canvas.getContext("webgl", params) ||
  canvas.getContext("experimental-webgl", params);

  let halfFloat = gl.getExtension("OES_texture_half_float");
  let support_linear_float = gl.getExtension("OES_texture_half_float_linear");

  if (isWebGL2) {
    gl.getExtension("EXT_color_buffer_float");
    support_linear_float = gl.getExtension("OES_texture_float_linear");
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  let internalFormat = isWebGL2 ? gl.RGBA16F : gl.RGBA;
  let internalFormatRG = isWebGL2 ? gl.RG16F : gl.RGBA;
  let formatRG = isWebGL2 ? gl.RG : gl.RGBA;
  let texType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;

  return {
    gl: gl,
    ext: {
      internalFormat: internalFormat,
      internalFormatRG: internalFormatRG,
      formatRG: formatRG,
      texType: texType },

    support_linear_float: support_linear_float };

}

function pointerPrototype() {
  this.id = -1;
  this.x = 0;
  this.y = 0;
  this.dx = 0;
  this.dy = 0;
  this.down = false;
  this.moved = false;
  this.color = [30, 0, 300];
}

pointers.push(new pointerPrototype());

let GLProgram = function () {
  function GLProgram(vertexShader, fragmentShader) {
    if (!(this instanceof GLProgram))
    throw new TypeError("Cannot call a class as a function");

    this.uniforms = {};
    this.p.........完整代码请登录后点击上方下载按钮下载查看