20种行星渐晕图canvas动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：20种行星渐晕图canvas动画效果

下面为部分代码预览，完整代码请点击下载或在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;
  width:100vw;
  height:100vh;
}

canvas {
  padding:10px;
}

@media only screen and (min-width: 1000px) {
  canvas {
    padding:20px;
  }
}
</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 >
(function () {
  var canvas = document.getElementById("canvas");
  canvas.width = Math.min(window.innerWidth, window.innerHeight);
  canvas.height = canvas.width;
  var gl = canvas.getContext("webgl");
  canvas.addEventListener("click", function (ev) {
    generateOptions(false, Math.random() > .75); /*75% of the time, stick with a safer preset expression, otherwise generate random combinator*/
  });
  var myoptions;
  var modes = ["multiply", "divide", "add", "subtract", "flip divide", "flip subtract"];
  var operators = ["add", "subtract", "multiply", "divide"];
  var functions = ["none", "sine", "tan"];
  var primaryColors = ["#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff", "#ff00ff", "#00ffff", "#ffff00", "#ff6600", "#7f00ff", "#808080", "#800000", "#808000", "#008000", "#800080", "#008080", "#000080"];
  var hueColors = primaryColors.filter(c => c != "#000000" && c != "#ffffff");
  var timeFunctions = ["none", "sine", "sine + cos"];
  var gui;
  var demoMode = false;
  var demoInterval = 5;
  var time = 0.0;
  /*safer combinations of the colors and shapes that don't produce lots of black screens (unlike the randomly generated GLSL frargment which do):*/
  var presets = [{
    numerator: "s1+s2/s4",
    denominator: "s4-s1-s2+s3" },

  {
    numerator: "s1+s2/s4",
    denominator: "s4-s1-col2+col3" },

  {
    numerator: "s2*col2-col3",
    denominator: "s4+s3*s1" },

  {
    numerator: "col2 + col1",
    denominator: "s4+s3*s1" }];


  var panelExpressions = [
  "col1+col2+col3",
  "s1+s2+s3",
  "s1*col1+s2*col2+s3*col3"];


  /*cool patterns. load one of these on first load*/
  var currentTheme;
  var themes = [
  { "name": "None" },
  { "name": "Eye of the Beholder", "color1": "#4add49", "color2": "#7caaf8", "color3": "#bc0fcc", "numerator": "s1+s2/s4", "denominator": "s4-s1-col2+col3", "numerator2": "s1", "denominator2": "s1", "panel": "s1*col1+s2*col2+s3*col3", "colorMode": "flip subtract", "colorOperator1": "divide", "colorOperator2": "multiply", "time": 0.0065, "timeFunc": "sine + cos", "distanceModifier": 0.4, "rotation": 8, "rotFactor1": 1, "rotFactor2": -1, "theta": 9, "thetaFunc": "none", "periodicMultiplier": 10, "motionMultiplier": 2, "motionIterations": 2, "iterationMotion1": true, "iterationMotion2": true, "motionOperator1": "divide", "motionOperator2": "multiply", "pixelation": 0, "useTwo": true, "innerRadius": 0.4, "useDifferent": false },
  { "name": "Sinusoid", "numerator": "col2 + col1", "denominator": "s4+s3*s1", "numerator2": "s1+s2/s4", "denominator2": "s4-s1-s2+s3", "panel": "col1+col2+col3", "colorMode": "multiply", "color1": "#8d14ee", "color2": "#72e068", "color3": "#000000", "rotation": -1, "rotFactor1": 1, "rotFactor2": -1, "theta": 6, "time": -.01, "timeFunc": "none", "distanceModifier": 0.1, "periodicMultiplier": 0, "motionIterations": 2, "motionMultiplier": 0.62, "iterationMotion1": false, "iterationMotion2": true, "colorOperator1": "divide", "colorOperator2": "add", "motionOperator1": "divide", "motionOperator2": "subtract", "thetaFunc": "sine", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Flower Power", "numerator": "s1+s2/s4", "denominator": "s4-s1-s2+s3", "numerator2": "col2 + col1", "denominator2": "s4+s3*s1", "panel": "s1+s2+s3", "colorMode": "divide", "color1": "#1f607e", "color2": "#f019c6", "color3": "#a6343e", "rotation": -9, "rotFactor1": 1, "rotFactor2": -1, "theta": 6, "time": -0.0070, "timeFunc": "sine + cos", "distanceModifier": 1.2673, "periodicMultiplier": 6, "motionIterations": 2, "motionMultiplier": 1.2372, "iterationMotion1": true, "iterationMotion2": false, "colorOperator1": "add", "colorOperator2": "add", "motionOperator1": "add", "motionOperator2": "subtract", "thetaFunc": "sine", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Cosmic Tomato", "numerator": "s1+s2/s4", "denominator": "s4-s1-col2+col3", "numerator2": "s1+s2/s4", "denominator2": "s4-s1-s2+s3", "panel": "s1*col1+s2*col2+s3*col3", "colorMode": "flip subtract", "color1": "#9d32f5", "color2": "#54760d", "color3": "#f78596", "rotation": 0, "rotFactor1": -2, "rotFactor2": 0, "theta": -2, "time": 0.003, "timeFunc": "none", "distanceModifier": 0.156, "periodicMultiplier": 9, "motionIterations": 1, "motionMultiplier": 0.375, "iterationMotion1": false, "iterationMotion2": true, "colorOperator1": "subtract", "colorOperator2": "divide", "motionOperator1": "divide", "motionOperator2": "multiply", "thetaFunc": "sine", "pixelation": 0, "useTwo": false, "useDifferent": true, "innerRadius": 0.189 },
  { "name": "Prismatic Charm".........完整代码请登录后点击上方下载按钮下载查看