p5实现沃罗诺鹅卵石效果-html代码-BFW代码库

代码语言：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.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 id="rendered-js" >
//// ---- DAT.GUI CODE ---- ////
let params = { 
  horizontalVoronoiDivisions: 14,
  verticalVoronoiDivisions: 10,
  voronoiIrregularity: 0.2,
  numberOfInnerShapes: 40,
  innerShapeOffset: 2,
  hueStart: 5,
  hueEnd: 30,
  satStart: 5,
  satEnd: 35,
  baseBrightness: 20,
  brightnessMultiplier: 110,
  hideText: false,
  createNew: function(){
    resetVoronoiDesign();
  },
}

let gui = new dat.GUI();

let voronoiFolder = gui.addFolder("Voronoi Diagram");
let sketchFolder = gui.addFolder("Pebble 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, "numberOfInnerShapes", 0, 100, 1).name("Inner Shapes").onChange(function() {
	renderVoronoiDesign();
});
sketchFolder.add(params, "innerShapeOffset", 0, 5).name("Shape Offset").onChange(function() {
	renderVoronoiDesign();
});

colourFolder.add(params, "hueStart", -30, 360).name("Hue Start").onChange(function() {
	renderVoronoiDesign();
});
colourFolder.add(params, "hueEnd", 0, 390).name("Hue End").onChange(function() {
	renderVoronoiDesign();
});
colourFolder.add(params, "satStart", 0, 100).name("Sat. Start").onChange(function() {
	renderVoronoiDesign();
});
colourFolder.add(params, "satEnd", 0, 100).name("Sat. End").onChange(function() {
	renderVoronoiDesign();
});
colourFolder.add(params, "baseBrightness", -100, 100).name("Bri. Start").onChange(function() {
	renderVoronoiDesign();
});
colourFolder.add(params, "brightnessMultiplier", -200, 200).name("Bri. Multiplier").onChange(function() {
	renderVoronoiDesign();
});

gui.add(params, "hideText").name("Hide Text").onChange(function() {
	renderVoronoiDesign();
});

gui.add(params, "createNew").name("Generate New Design");

let delaunay, voronoi, polygons, voronoiPoints, scaledVoronoiPoints, shapes;

function setup(){
  createCanvas(windowWidth, windowHeight); 
  colorMode(HSB, 360, 100, 100, 1); 
  rectMode(CENTER);
  
  textSize(22);
  textAlign(CENTER);
  textStyle(BOLD);
  textFont('Courier New');
  
  resetVoronoiDesign();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  renderVoronoiDesign();
}

function renderVoronoiDesign(){
  scaleVoronoiPoints();
  createVoronoiPolygons();
  createShapes();
  drawShapes();
  
  if (params.hideText == false){
    drawText();
  }
}

function resetVoronoiDesign(){
  noiseSeed(frameCount);
  createVoronoiPoints();
  renderVoronoiDesign();
}

function createVoronoiPoints(){
  voronoiPoints = [];
  //The following code is derived from this StackOverflow answer
  //https://stackoverflow.com/questions/3667927/do-randomly-generated-2d-points-clump-together-and-how-do-i-stop-it
  let randomnessFactor = params.voronoiIrregularity;

  for (let ySubDivisions = 0; ySubDivisions < params.verticalVoronoiDivisions; ++ySubDivisions){
    for (let xSubDivisions = 0; xSubDivisions < params.horizontalVoronoiDivisions; ++xSubDivisions){
      let regularity = 0.5 * (1 - randomnessFactor);
      let x = regularity + randomnessFactor * random(0, 1) + xSubDivisions / (params.horizontalVoronoiDivisions - 1);
      let y = regularity + randomnessFactor * random(0, 1) + ySubDiv.........完整代码请登录后点击上方下载按钮下载查看