p5实现canvas烟蓝色多边形网格动画效果代码-html代码-BFW代码库

p5实现canvas烟蓝色多边形网格动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现canvas烟蓝色多边形网格动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background-color: rgb(0,0,21);
}

canvas {
  background-color: rgb(27,27,131);
  margin: 1rem auto;
  display: block;
}
</style>



</head>

<body>
  <div id="container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
      <script >
const chevronParent = document.getElementById('container');
const canvasWidth = 680;
const canvasHeight = canvasWidth;
const colNumber = 40;
const rowNumber = 20;
const colWidth = canvasWidth / colNumber;
const rowHeight = canvasHeight / rowNumber;
const lineCoordinates = [];
const variatorRangeBase = 40;
let variatorA;
let variatorB;

let blueVariator = 1;
let greenVariator = 1;
let redVariator = 1;

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

function setup() {
  let canvas = createCanvas(canvasWidth, canvasHeight);
  canvas.parent(chevronParent);
  frameRate(15);

  for (let i = 0; i < colNumber + 1; i++) {
    for (let j = 0; j < rowNumber; j++) {
      const randomVariator = [getRandomArbitrary(variatorRangeBase * -1, -1), getRandomArbitrary(1, variatorRangeBase)];
      const randomNeedle = Math.floor(Math.random() * randomVariator.length);
      // line with 2 vectors,
      // x value of the 2nd vector as a random value beetween a +/- range
      // variator blindly choose a variator from the previous range
      lineCoordinates.push({
        vector1: createVector(
          colWidth * i, 
          rowHeight * j
        ),
        vector2: createVector(
          colWidth * i + getRandomArbitrary(randomVariator[0], randomVariator[1]), 
          rowHeight * (j + 1)
        ),
        variator: randomVariator[randomNeedle],
        variatorRange: [...randomVariator],
        directionVariator: 1,
        blue: getRandomArbitrary(150, 255),
        green: getRandomArbitrary(0,.........完整代码请登录后点击上方下载按钮下载查看