canvas卷积动画效果代码-html代码-BFW代码库

canvas卷积动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas卷积动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
            font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
            background-color: #000;
            margin: 0;
            padding: 0;
            border-width: 0;
            cursor: pointer;
            caret-color: transparent;
        }
</style>




</head>

<body >
  

  
      <script >
window.addEventListener("load", function () {
  "use strict";

  let canv, ctx; // canvas and context
  let maxx, maxy; // canvas dimensions

  let radius, x0, y0, x1, y1, nbPts, theta;
  let grid, nbx, nby;

  // for animation
  let events;
  let ui, uiv;
  let rotSpeed = 0.3 / 1000; // rotation speed, in radians / ms
  let rotColor = "#0ff";

  // shortcuts for Math.
  const mrandom = Math.random;
  const mfloor = Math.floor;
  const mround = Math.round;
  const mceil = Math.ceil;
  const mabs = Math.abs;
  const mmin = Math.min;
  const mmax = Math.max;

  const mPI = Math.PI;
  const mPIS2 = Math.PI / 2;
  const mPIS3 = Math.PI / 3;
  const m2PI = Math.PI * 2;
  const m2PIS3 = Math.PI * 2 / 3;
  const msin = Math.sin;
  const mcos = Math.cos;
  const mtan = Math.tan;
  const matan2 = Math.atan2;

  const mhypot = Math.hypot;
  const msqrt = Math.sqrt;

  const sqrt3 = msqrt(3);
  const hsqrt3 = msqrt(3) / 2;

  //------------------------------------------------------------------------

  function alea(mini, maxi) {
    // random number in given range
    if (typeof maxi == 'undefined') return mini * mrandom(); // range 0..mini
    return mini + mrandom() * (maxi - mini); // range mini..maxi
  }
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  function intAlea(mini, maxi) {
    // random integer in given range (mini..maxi - 1 or 0..mini - 1)
    //
    if (typeof maxi == 'undefined') return mfloor(mini * mrandom()); // range 0..mini - 1
    return mini + mfloor(mrandom() * (maxi - mini)); // range mini .. maxi - 1
  }

  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  class CircularNoise {
    constructor(period, amplitude, initTime = 0) {
      /* period should be > 0, and great in comparision to the time interval of successive calls
      "great" means at least 10 times, though this limit is not strict
      Depending on usage, it may be useful to think it represents milliseconds
      "amplitude" is.........完整代码请登录后点击上方下载按钮下载查看