随机多彩图形变换动画效果-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;
  s3.green = s3._g / 255;
  s3.blue = s3._b / 255;
  var s1 = tinycolor(myoptions.shape1);
  s1.red = s1._r / 255;
  s1.green = s1._g / 255;
  s1.blue = s1._b / 255;
  var s2 = tinycolor(myoptions.shape2);
  s2.red = s2._r / 255;
  s2.green = s2._g / 255;
  s2.blue = s2._b / 255;
  gl.uniform3f(
  getUniformLocation(program, "shape1"),
  s1.red,
  s1.green,
  s1.blue);

  gl.uniform3f(
  getUniformLocation(program, "shape2"),
  s2.red,
  s2.green,
  s2.blue);

  gl.uniform3f(
  getUniformLocation(program, "shape3"),
  s3.red,
  s3.green,
  s3.blue);

  gl.uniform1f(getUniformLocation(program, "rotation"), myoptions.rotation);
  gl.uniform1f(
  getUniformLocation(program, "thetaM"),
  parseInt(myoptions.theta));


  gl.uniform1f(getUniformLocation(program, "motionMultiplier"), myoptions.motionMultiplier);
  gl.uniform1f(getUniformLocation(program, "motionIterations"), myoptions.motionIterations);
  gl.uniform1f(
  getUniformLocation(program, "invertShape1"),
  myoptions.invertShape1);

  gl.uniform1f(getUniformLocation(program, "reverseShape1"), myoptions.reverseShape1);

  gl.uniform1f(
  getUniformLocation(program, "invertShape2"),
  myoptions.invertShape2);

  gl.uniform1f(getUniformLocation(program, "reverseShape2"), myoptions.reverseShape2);

  gl.uniform1f(
  getUniformLocation(program, "invertShape3"),
  myoptions.invertShape3);

  gl.uniform1f(getUniformLocation(program, "reverseShape3"), myoptions.reverseShape3);

  gl.uniform1f(getUniformLocation(program, "extraMotion1"), myoptions.extraMotion1);
  gl.uniform1f(getUniformLocation(program, "extraMotion2"), myoptions.extraMotion2);

  gl.uniform1i(getUniformLocation(program, "colorOperator1"), operators.indexOf(myoptions.colorOperator1));
  gl.uniform1i(getUniformLocation(program, "colorOperator2"), operators.indexOf(myoptions.colorOperator2));
  gl.uniform1i(getUniformLocation(program, "motionOperator1"), operators.indexOf(myoptions.motionOperator1));
  gl.uniform1i(getUniformLocation(program, "motionOperator2"), operators.indexOf(myoptions.motionOperator2));
  gl.uniform1i(getUniformLocation(program, "thetaFunc"), functions.indexOf(myoptions.thetaFunc));
  gl.uniform1f(getUniformLocation(program, "reverseTime"), myoptions.reverseTime);


}

//************** Shader sources .........完整代码请登录后点击上方下载按钮下载查看