p5实现裂缝干涩背景效果-html代码-BFW代码库

p5实现裂缝干涩背景效果

代码语言：html

所属分类：背景

代码描述：p5实现裂缝干涩背景效果

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
/* Make the canvas element fill the screen. */
canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  margin: 0;
  z-index: -1;
}
</style>



</head>

<body translate="no" >
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5-0.5.1.js"></script>
<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/d3-delaunay.min.js"></script>
      <script>
//// ---- DAT.GUI CODE ---- ////
let params = { 
  horizontalVoronoiDivisions: 7,
  verticalVoronoiDivisions: 9,
  voronoiIrregularity: 0.2,
  innerShapes: 6,
  innerShapeAngle: 0.02,
  shadeVariance: 0.07,
  lineThickness: 0.6,
  hueStart: 0,
  hueEnd: 90,
  brightness: 95,
  saturation: 100,
  offset: -80,
  animationSpeed: 500,
  animate: false,
  hideText: false,
  createNew: function(){
    resetVoronoiDesign();
  },
}

let gui = new dat.GUI();

let voronoiFolder = gui.addFolder("Voronoi Diagram");
let sketchFolder = gui.addFolder("Sketch Overlay");
let colourFolder = gui.addFolder("Colours");

voronoiFolder.add(params, "horizontalVoronoiDivisions", 1, 20, 1).name("Horiz. Divisions").onChange(function() {
	resetVoronoiDesign();
});
voronoiFolder.add(params, "verticalVoronoiDivisions", 1, 20, 1).name("Vert. Divisions").onChange(function() {
	resetVoronoiDesign();
});
voronoiFolder.add(params, "voronoiIrregularity", 0, 0.5).name("Irregularity").onChange(function() {
	resetVoronoiDesign();
});
sketchFolder.add(params, "innerShapes", 0, 30, 1).name("Inner Shapes").onChange(function() {
	renderVoronoiDesign();
});
sketchFolder.add(params, "innerShapeAngle", 0, 1).name("Inner Angle").onChange(function() {
	renderVoronoiDesign();
});
sketchFolder.add(params, "lineThickness", 0, 5).name("Thickness").onChange(function() {
	renderVoronoiDesign();
});

colourFolder.add(params, "shadeVariance", 0, 0.99).name("Hue Variance").onChange(function() {
  renderVoronoiDesign();
});
colourFolder.add(params, "hueStart", -30, 360, 1).name("Hue Start").onChange(function() {
	renderVoronoiDesign();
});
colourFolder.add(params, "hueEnd", 0, 390, 1).name("Hue End").onChange(function() {
	renderVoronoiDesign();
});
colourFolder.add(params, "saturation", 0, 100, 1).name("Saturation").onChange(function() {
	renderVoronoiDesign();
});
colourFolder.add(params, "brightness&q.........完整代码请登录后点击上方下载按钮下载查看