js实现canvas五彩缤纷线条绘制抽象星空效果代码-html代码-BFW代码库

js实现canvas五彩缤纷线条绘制抽象星空效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas五彩缤纷线条绘制抽象星空效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A colourful world of Turbulence</title>
<style>
    body{
        padding: 0;
        background: black;
        margin: 0;
    }
</style>

</head>
<body>

<script>
    "use strict";

/**
 * Written by Dillon https://codepen.io/Dillo
 *
 * Inspired in very large part by Alex Andrix's work on Codepen
 * https://codepen.io/alexandrix/pen/jgyWww
 * @author Alex Andrix <alex@alexandrix.com>
 * @since 2019
 */



  const nbEddies = 5;
  const nbParticles = 1000; // number of particles
  const lifeTime = 1000; // average lifetime of particles

  let canv, ctx;   // canvas and drawing context
  let maxx, maxy;  // size of client Window
  let dimx, dimy;  // size of canvas

  let eddies;      // array of eddies
  let particles;   // array of particles

  let requestID;   // ID provided by window.requestAnimationFrame();
  let hueShift;

/* shortcuts for Math */

  const mrandom = Math.random; // see above alternative function for reproductible results
  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 m2PI = Math.PI * 2;
  const msin = Math.sin;
  const mcos = Math.cos;
  const matan2 = Math.atan2;
  const mexp = Math.exp;

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

//-----------------------------------------------------------------------------
// miscellaneous functions
//-----------------------------------------------------------------------------

  function alea (min, max) {
// random number [min..max[ . If no max is provided, [0..min[

    if (typeof max == 'undefined') return min * mrandom();
    return min + (max - min) * mrandom();
  }

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

  function intAlea (min, max) {
// random integer number [min..max[ . If no max is provided, [0..min[

    if (typeof max == 'undefined') {
      max = min; min = 0;
    }
    return mfloor(min + (max - min) * mrandom());
  } // intAlea

//------------------------------------------------------------------------
function createEddy () {

  return {
   x: alea (dimx),
   y: alea (dimy), 
/*    
   x: dimx / 2,
   y: dimy / 2, 
*/   
//   coeffR: 0.0,        // coefficient for radial velocity
   coeffR: 0.001 * (alea(0.7, 1.3)),        // coefficient for radial velocity
   radius: 150 + alea(-50, 50),          // radius where angular velocity is max
   coeffA1: 10000 * alea(0.8, 1.2),         // coefficient in exponent for angular velocity
   coeffA2: 0.01 * alea(0.8, 1.2),       // multiplying coefficient for angular velocity
   dir: (mrandom() > 0.5) ? 1 : -1 // direction of rotation
   }

} // createEddy

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function createEddies() {
  eddies = [];                  // create empty array;
  for (let k = 0; k < nbEddies; ++k) {
    eddies.push(createEddy());
  } // for k
} // createEddies

//------------------------------------------------------------------------
function createParticle() {

  return {
    x: alea (-100, dimx + 100),
    y: alea (-100, dimy + 100),
    sat:  `${intAlea(50, 101)}%`,
    light: `${intAlea(30, 80)}%`,
    TTL: alea(lifeTime * 0.8.........完整代码请登录后点击上方下载按钮下载查看