canvas泰森多边形动画效果-html代码-BFW代码库

代码语言：html

所属分类：背景

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0;
	padding: 0;
	color: #fff;
	background-color: #000;
}

canvas {
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}
</style>

</head>
<body translate="no">
<canvas></canvas>

<script >
// Voronoi by @neave

window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
  setTimeout(callback, 1000 / 60);
};

Array.prototype.each = function (f) {
  var i = this.length;
  while (i--) {
    f(this[i]);
  }
};

function Edge() {
  this.data = undefined;
  this.next = undefined;
  this.rot = undefined;
}

Edge.prototype.splice = function (e) {
  var e1 = this.next.rot,
  e2 = e.next.rot,
  e3 = this.next;

  this.next = e.next;
  e.next = e3;

  e3 = e1.next;
  e1.next = e2.next;
  e2.next = e3;
};

Edge.prototype.swap = function () {
  var e0 = this.oPrev(),
  e1 = this.sym().oPrev();

  this.splice(e0);
  this.sym().splice(e1);
  this.splice(e0.lNext());
  this.sym().splice(e1.lNext());
  this.setOrg(e0.dest());
  this.setDest(e1.dest());
};

Edge.prototype.sym = function () {
  return this.rot.rot;
};

Edge.prototype.iRot = function () {
  return this.rot.rot.rot;
};

Edge.prototype.org = function (v) {
  return this.data;
};

Edge.prototype.setOrg = function (v) {
  this.data = v;
};

Edge.prototype.dest = function () {
  return this.rot.rot.data;
};

Edge.prototype.setDest = function (v) {
  this.rot.rot.data = v;
};

Edge.prototype.setOrgDest = function (o, d) {
  this.setOrg(o);
  this.setDest(d);
};

Edge.prototype.left = function () {
  return this.rot.rot.rot.data;
};

Edge.prototype.setLeft = function (v) {
  this.rot.rot.rot.data = v;
};

Edge.prototype.right = function () {
  return this.rot.data;
};

Edge.prototype.setRight = function (v) {
  this.rot.data = v;
};

Edge.prototype.oNext = function () {
  return this.next;
};

Edge.prototype.rNext = function () {
  return this.rot.next.rot.rot.rot;
};

Edge.prototype.dNext = function () {
  return this.rot.rot.next.rot.rot;
};

Edge.prototype.lNext = function () {
  return this.rot.rot.rot.next.rot;
};

Edge.prototype.oPrev = function () {
  return this.rot.next.rot;
};

Edge.prototype.rPrev = function () {
  return this.rot.rot.next;
};

Edge.prototype.dPrev = function () {
  return this.rot.rot.rot.next.rot.rot.rot;
};

Edge.prototype.lPrev = function () {
  return this.next.rot.rot;
};

Edge.prototype.leftVertex = function (v) {
  return isLeftOf(v, this.org(), this.dest());
};

Edge.prototype.rightVertex = function (v) {
  return isRightOf(v, this.org(), this.dest());
};

Edge.prototype.colinearVertex = function (v) {
  return colinear(v, this.org(), this.dest());
};


function Vertex(x, y) {
  this.x = x;
  this.y = y;
  this.vx = 0;
  this.vy = 0;
  this.cell = 0;
  this.isInfinity = false;
}

Vertex.prototype.equals = function (v) {
  return this.x === v.x && this.y === v.y;
};


var get = document.querySelector.bind(document),
on = document.addEventListener.bind(document),
canvas,
context,
scale,
boundary = 25,
totalVertices = 80,
maxSpeed = 3,
vertices = [],
r,
g,
b,
ri,
gi,
bi,
rotMap = [1, 2, 3, 0],
nextMap = [0, 3, 2, 1],
edge,
edges = [],
circumcenters = [],
edgeVertices = [new Vertex(0, -5000), new Vertex(-10000, 5000), new Vertex(10000, 5000)],
maxIterations = 200,
followDist = 300,
stirDist = 100,
mouseX,
mouseY,
oldMouseX = 0,
oldMouseY = 0;

function inCircle(v0, v1, v2, v3) {
  var test = (v2.x - v1.x) * (v3.y - v1.y) * (v0.x * v0.x + v0.y * v0.y - v1.x * v1.x - v1.y * v1.y) +
  (v3.x - v1.x) * (v0.y - v1.y) * (v2.x * v2.x + v2.y * v2.y - v1.x * v1.x - v1.y * v1.y) +
  (v0.x - v1.x) * (v2.y - v1.y) * (v3.x * v3.x + v3.y * v3.y - v1.x * v1.x - v1.y * v1.y) -
  (v2.x - v1.x) * (v0.y - v1.y) * (v3.x * v3.x + v3.y * v3.y - v1.x * v1.x - v1.y * v1.y) -
  (v3.x - v1.x) * (v2.y - v1.y) * (v0.x * v0.x + v0.y * v0.y - v1.x * v1.x - v1.y * v1.y) -
  (v0.x - v1.x) * (v3.y - v1.y) * (v2.x * v2.x + v2.y * v2.y - v1.x * v1.x - v1.y * v1.y);

  return test >= 0;
}

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