随机多彩图形变换动画效果-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 = getRandomFloat(0, 2);
  this.extraMotion1 = Math.random() > .5;
  this.extraMotion2 = Math.random() > .5;

  this.colorOperator1 = pick(operators);
  this.colorOperator2 = pick(operators);

  this.motionOperator1 = pick(operators);
  this.motionOperator2 = pick(operators);

  this.thetaFunc = Math.random() > .25 ? pick(["none", "sine"]) : pick(functions); /*tangent only sometimes*/
};

//GUI表示
var gui;
function genGui() {
  myoptions = new Options();
  setValue();
  let wasClosed = !gui || gui.closed;
  gui && gui.destroy();
  gui = new dat.GUI();
  if (wasClosed) gui.close();

  //shapes and colors
  gui.add(myoptions, "mode", modes).onChange(setValue);
  gui.addColor(myoptions, "shape1").onChange(setValue);
  gui.add(myoptions, "invertShape1").onChange(setValue);
  gui.add(myoptions, "reverseShape1").onChange(setValue);

  gui.addColor(myoptions, "shape2").onChange(setValue);
  gui.add(myoptions, "invertShape2").onChange(setValue);
  gui.add(myoptions, "reverseShape2").onChange(setValue);

  gui.addColor(myoptions, "shape3").onChange(setValue);
  gui.add(myoptions, "invertShape3").onChange(setValue);
  gui.add(myoptions, "reverseShape3").onChange(setValue);

  gui.add(myoptions, "colorOperator1", operators).onChange(setValue);
  gui.add(myoptions, "colorOperator2", operators).onChange(setValue);

  //movement
  gui.add(myoptions, "rotation", -10, 10).onChange(setValue);
  gui.add(myoptions, "theta", -12, 12).onChange(setValue);
  gui.add(myoptions, "thetaFunc", functions).onChange(setValue);

  gui.add(myoptions, "time", 0.0, 0.015).onChange(setValue);
  gui.add(myoptions, "reverseTime").onChange(setValue);

  gui.add(myoptions, "motionMultiplier", 0.00, 2.0).onChange(setValue);
  gui.add(myoptions, "motionIterations", 0, 5).onChange(setValue);

  gui.add(myoptions, "extraMotion1").onChange(setValue);
  gui.add(myoptions, "extraMotion2").onChange(setValue);

  gui.add(myoptions, "motionOperator1", operators).onChange(setValue);
  gui.add(myoptions, "motionOperator2", operators).onChange(setValue);


}

function setValue() {

  gl.uniform1i(getUniformLocation(program, "mode"), modes.indexOf(myoptions.mode));

  var s3 = tinycolor(myoptions.shape3);
  s3.red = s3._r / 255;.........完整代码请登录后点击上方下载按钮下载查看