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", "numerator": "col2 + col1", "denominator": "s4+s3*s1", "numerator2": "s1+s2/s4", "denominator2": "s4-s1-col2+col3", "panel": "s1+s2+s3", "colorMode": "subtract", "color1": "#b05a18", "color2": "#c46171", "color3": "#ffffff", "rotation": 3, "rotFactor1": 1, "rotFactor2": -1, "theta": -4, "time": -0.008, "timeFunc": "none", "distanceModifier": 0.58, "periodicMultiplier": 2, "motionIterations": 2, "motionMultiplier": 0.74, "iterationMotion1": true, "iterationMotion2": false, "colorOperator1": "subtract", "colorOperator2": "multiply", "motionOperator1": "multiply", "motionOperator2": "add", "thetaFunc": "none", "pixelation": 158, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Orange Crush", "numerator": "s2*col2-col3", "denominator": "s4+s3*s1", "numerator2": "s1+s2/s4", "denominator2": "s4-s1-col2+col3", "panel": "s1*col1+s2*col2+s3*col3", "colorMode": "subtract", "color1": "#691157", "color2": "#ffff00", "color3": "#177691", "rotation": 6, "rotFactor1": 1, "rotFactor2": -1, "theta": -10, "time": 0.003, "timeFunc": "sine", "distanceModifier": -1.34, "periodicMultiplier": 10, "motionIterations": 1, "motionMultiplier": 1.20, "iterationMotion1": true, "iterationMotion2": true, "colorOperator1": "subtract", "colorOperator2": "subtract", "motionOperator1": "subtract", "motionOperator2": "multiply", "thetaFunc": "sine", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Cosmic Bloom", "numerator": "s1+s2/s4", "denominator": "s4-s1-s2+s3", "numerator2": "s2*col2-col3", "denominator2": "s4+s3*s1", "panel": "s1+s2+s3", "colorMode": "divide", "color1": "#354ffa", "color2": "#5fe483", "color3": "#62be30", "rotation": 4, "rotFactor1": 1, "rotFactor2": -1, "theta": -3, "time": 0.003, "timeFunc": "none", "distanceModifier": .17, "periodicMultiplier": 6, "motionIterations": 0, "motionMultiplier": 1.9, "iterationMotion1": false, "iterationMotion2": false, "colorOperator1": "divide", "colorOperator2": "subtract", "motionOperator1": "multiply", "motionOperator2": "add", "thetaFunc": "none", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Corona virus", "numerator": "s4 + dArg - col1 ", "denominator": "s3 + surface", "numerator2": "col3 - col1 * s2 ", "denominator2": "col1", "panel": "s1+s2+s3", "colorMode": "add", "color1": "#b7f48c", "color2": "#d1720c", "color3": "#b46ce9", "rotation": 0, "rotFactor1": 1, "rotFactor2": -1, "theta": -4, "time": 0.0078, "timeFunc": "none", "distanceModifier": -0.0415, "periodicMultiplier": 0, "motionIterations": 0, "motionMultiplier": 0.2892, "iterationMotion1": false, "iterationMotion2": false, "colorOperator1": "add", "colorOperator2": "divide", "motionOperator1": "add", "motionOperator2": "subtract", "thetaFunc": "none", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Snowflake", "numerator": "s1+s2/s4", "denominator": "s4-s1-col2+col3", "numerator2": "s1+s2/s4", "denominator2": "s4-s1-col2+col3", "panel": "col1+col2+col3", "colorMode": "add", "color1": "#dae216", "color2": "#a6c12f", "color3": "#eb8dd3", "rotation": 10, "rotFactor1": 1, "rotFactor2": -1, "theta": -9, "time": -0.003, "timeFunc": "none", "distanceModifier": -1.49, "periodicMultiplier": 0, "motionIterations": 0, "motionMultiplier": 1.64, "iterationMotion1": true, "iterationMotion2": true, "colorOperator1": "subtract", "colorOperator2": "divide", "motionOperator1": "divide", "motionOperator2": "add", "thetaFunc": "none", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Pixie", "numerator": "col2 + s3", "denominator": "s3 - s4", "numerator2": "s1 + col2 + dArg  / col2 ", "denominator2": "col1 + s4 * s3  - col2 ", "panel": "s1+s2+s3", "colorMode": "multiply", "color1": "#3b8aad", "color2": "#94c7a9", "color3": "#36efd1", "rotation": 0, "rotFactor1": -1, "rotFactor2": 2, "theta": 6, "time": 0.0045, "timeFunc": "none", "distanceModifier": -0.3959, "periodicMultiplier": 8, "motionIterations": 2, "motionMultiplier": 1.2988, "iterationMotion1": true, "iterationMotion2": false, "colorOperator1": "subtract", "colorOperator2": "subtract", "motionOperator1": "divide", "motionOperator2": "add", "thetaFunc": "sine", "pixelation": 196, "useTwo": false, "useDifferent": false, "innerRadius": 0.3590 },
  { "name": "Tie-fighter", "numerator": "s1+s2/s4", "denominator": "s4-s1-s2+s3", "numerator2": "s2*col2-col3", "denominator2": "s4+s3*s1", "panel": "s1*col1+s2*col2+s3*col3", "colorMode": "flip subtract", "color1": "#50e7e5", "color2": "#ff00ff", "color3": "#e287f1", "rotation": 0, "rotFactor1": 1, "rotFactor2": -1, "theta": 2, "time": -0.01, "timeFunc": "none", "distanceModifier": -1.46, "periodicMultiplier": 1, "motionIterations": 1, "motionMultiplier": 1.79, "iterationMotion1": true, "iterationMotion2": false, "colorOperator1": "subtract", "colorOperator2": "multiply", "motionOperator1": "divide", "motionOperator2": "multiply", "thetaFunc": "none", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Carpet Ride", "numerator": "s1+s2/s4", "denominator": "s4-s1-col2+col3", "numerator2": "col2 + col1", "denominator2": "s4+s3*s1", "panel": "col1+col2+col3", "colorMode": "add", "color1": "#be5557", "color2": "#704df7", "color3": "#81d820", "rotation": 2, "rotFactor1": 1, "rotFactor2": -1, "theta": 6, "time": -0.0108, "timeFunc": "none", "distanceModifier": -1.5942, "periodicMultiplier": 8, "motionIterations": 1, "motionMultiplier": 0.2714, "iterationMotion1": true, "iterationMotion2": true, "colorOperator1": "multiply", "colorOperator2": "subtract", "motionOperator1": "divide", "motionOperator2": "add", "thetaFunc": "none", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Chlorophyll", "numerator": "s1+s2/s4", "denominator": "s4-s1-col2+col3", "numerator2": "s1+s2/s4", "denominator2": "s4-s1-s2+s3", "panel": "col1+col2+col3", "colorMode": "subtract", "color1": "#c487cb", "color2": "#00ff00", "color3": "#1e1c80", "rotation": -3, "rotFactor1": 1, "rotFactor2": -1, "theta": 9, "time": -0.0094, "timeFunc": "none", "distanceModifier": 0.1387, "periodicMultiplier": 9, "motionIterations": 2, "motionMultiplier": 1.5999, "iterationMotion1": true, "iterationMotion2": true, "colorOperator1": "divide", "colorOperator2": "divide", "motionOperator1": "divide", "motionOperator2": "subtract", "thetaFunc": "none", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Lace", "numerator": "s1+s2/s4", "denominator": "s4-s1-s2+s3", "numerator2": "col2 + col1", "denominator2": "s4+s3*s1", "panel": "col1+col2+col3", "colorMode": "multiply", "color1": "#edde34", "color2": "#e0f076", "color3": "#faa0a8", "rotation": -5, "rotFactor1": 1, "rotFactor2": -1, "theta": 5, "time": -0.0057, "timeFunc": "none", "distanceModifier": -1.0695, "periodicMultiplier": 10, "motionIterations": 1, "motionMultiplier": 0.349, "iterationMotion1": true, "iterationMotion2": true, "colorOperator1": "divide", "colorOperator2": "add", "motionOperator1": "add", "motionOperator2": "divide", "thetaFunc": "none", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Wicked Rose", "numerator": "s1+s2/s4", "denominator": "s4-s1-s2+s3", "numerator2": "s1+s2/s4", "denominator2": "s4-s1-s2+s3", "panel": "col1+col2+col3", "colorMode": "flip divide", "color1": "#1e50b5", "color2": "#808000", "color3": "#e4921f", "rotation": -3, "rotFactor1": 1, "rotFactor2": -1, "theta": 5, "time": -0.0057, "timeFunc": "none", "distanceModifier": 0.297, "periodicMultiplier": 0, "motionIterations": 2, "motionMultiplier": 1.7, "iterationMotion1": true, "iterationMotion2": true, "colorOperator1": "divide", "colorOperator2": "subtract", "motionOperator1": "divide", "motionOperator2": "subtract", "thetaFunc": "none", "pixelation": 179, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Kaleidoscope", "numerator": "s1+s2/s4", "denominator": "s4-s1-col2+col3", "numerator2": "t+s1+s2/s4", "denominator2": "s4-s1-col2+col3", "panel": "s1*col1+s2*col2+s3*col3", "colorMode": "add", "color1": "#c9a30c", "color2": "#354a83", "color3": "#0d90b9", "rotation": 4, "rotFactor1": 1, "rotFactor2": -1, "theta": -12, "time": -0.0034, "timeFunc": "none", "distanceModifier": 0.6896, "periodicMultiplier": 4, "motionIterations": 1, "motionMultiplier": 0.3291, "iterationMotion1": false, "iterationMotion2": false, "colorOperator1": "divide", "colorOperator2": "divide", "motionOperator1": "multiply", "motionOperator2": "subtract", "thetaFunc": "sine", "pixelation": 0, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Planet Plaid", "numerator": "s1 + surface - s2  + s4  - col2 ", "denominator": "s3 * s2 + s1  + s4 ", "numerator2": "s4 / dArg + col2 ", "denominator2": "col3 / s2 + surface  * col3  + s2 ", "panel": "s1+s2+s3", "colorMode": "divide", "color1": "#5e22eb", "color2": "#f4367d", "color3": "#f95b56", "rotation": 4, "rotFactor1": 1, "rotFactor2": -1, "theta": -6, "time": -0.0049, "timeFunc": "none", "distanceModifier": -1.7720, "periodicMultiplier": 7, "motionIterations": 2, "motionMultiplier": 1.8759, "iterationMotion1": false, "iterationMotion2": true, "colorOperator1": "multiply", "colorOperator2": "add", "motionOperator1": "multiply", "motionOperator2": "divide", "thetaFunc": "sine", "pixelation": 110, "useTwo": true, "useDifferent": false, "innerRadius": 0.4 },
  { "name": "Crystal Ball", "numerator": "col2 + col1", "denominator": "s4+s3*s1", "numerator2": "s1+s2/s4", "denominator2": "s4-s1-s2+s3", "panel": "s1*col1+s2*col2+s3*col3", "colorMode": "subtract", "color1": "#71a8a0", "color2": &.........完整代码请登录后点击上方下载按钮下载查看