canvas实现webgl线圈绕组动画效果代码-html代码-BFW代码库

canvas实现webgl线圈绕组动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现webgl线圈绕组动画效果代码，可通过dat.gui更换图形，选择圆圈、星星等图形样式、还可更改背景颜色。

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
    background-color: #fff;    
    margin: 0;
		overflow: hidden;
}
canvas {
	position: absolute;
  background-color: #999;
  width: 100%;
  height: 100%;
  vertical-align: middle;
	display:inline-block;
}
</style>



</head>

<body >

<canvas id="canvas"></canvas>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script  >
/*
*  The winding number of a point describes how many full revolutions a curve makes around it.
*  Open curves produce interesting visuals. We discretise parametric curves into linear
*  segments and find the signed angle between the vectors connecting a point to the segment.
*  The sum of these angles, divided by 2PI radians, gives the winding number.
*
*  Based on:
*      https://en.wikipedia.org/wiki/Winding_number
*  [1] https://igl.ethz.ch/projects/winding-number/
*      https://twitter.com/keenanisalive/status/1448036393012322313
*      https://www.shadertoy.com/view/Wddyz2
*
*/

let canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// MSAA
let multiplier = 2.0;

var AA = true;

// Initialize the GL context
let gl = canvas.getContext('webgl');
if (!gl) {
  console.error("Unable to initialize WebGL.");
}

let time = 0.0;
let scene = 0;
let palette = 0;

let sceneNames = ["Circle", "Heart", "Star", "Infinity"];
let paletteNames = ["Grayscale", "Rainbow", "Red", "Blue"];

let sceneSelector = { scene: "Circle" };
let paletteSelector = { palette: "Rainbow" };

setScene(scen.........完整代码请登录后点击上方下载按钮下载查看