随机多彩图形变换动画效果-html代码-BFW代码库

随机多彩图形变换动画效果

代码语言：html

所属分类：动画

代码描述：可以作为待机画面或屏保，不断地变换图形和色彩

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

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

<style>
body {
  background-color: #000;    
  margin: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;  
}
</style>

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

<p id="controls"></p>
<canvas id="canvas"></canvas>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/tinycolor.min.js"></script>
<script >
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext("webgl");
var menuOpen = false;
canvas.addEventListener("click", function (ev) {
  genGui();

});
var myoptions;
var data = document.getElementById("controls");
var modes = ["multiply", "divide", "add", "subtract", "reciprocal", "inverted subtraction"];
var operators = ["add", "subtract", "multiply", "divide"];
var functions = ["none", "sine", "tan"];
var primaryColors = ["#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff", "#ff00ff", "#00ffff", "#ffff00"];
var Options = function () {

  this.mode = pick(["multiply", "divide", "subtract", "add", "reciprocal", "inverted subtraction"]);

  this.shape1 = tinycolor.random().toHexString();
  this.invertShape1 = Math.random() > .5;
  this.reverseShape1 = Math.random() > .5;

  this.shape2 = tinycolor.random().toHexString();
  this.invertShape2 = Math.random() > .5;
  this.reverseShape2 = Math.random() > .5;

  this.shape3 = Math.random() > .25 ? pick(primaryColors) : tinycolor.random().toHexString();
  this.invertShape3 = Math.random() > .5;
  this.reverseShape3 = Math.random() > .5;

  this.rotation = getRandomInt(-10, 10);
  this.theta = getRandomInt(-12, 12);
  this.time = Math.random() * .015;
  this.reverseTime = Math.random() > .5;

  this.motionIterations = getRandomInt(0, 5);
  this.motionMultiplier = ge.........完整代码请登录后点击上方下载按钮下载查看