沃罗诺伊鹅卵石

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

//// ---- 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) + ySubDivisions / (params.verticalVoronoiDivisions - 1);
      voronoiPoints.push([x - 0.5, y - 0.5]);
    }
  }
}

function scaleVoronoiPoints(){
  scaledVoronoiPoints = [];
  for (let i = 0; i < voronoiPoints.length; i++){
    scaledVoronoiPoints.push([voronoiPoints[i][0] * windowWidth, voronoiPoints[i][1] * windowHeight]);
  }
}

function createVoronoiPolygons(){
  delaunay = d3.Delaunay.from(scaledVoronoiPoints);
  voronoi = delaunay.voronoi([0, 0, windowWidth, windowHeight]);
  polygons = voronoi.cellPolygons();
}

function drawText(){
  noStroke();
  fill(250);
  rect(windowWidth / 2 - 1, windowHeight - 32.5, 212, 30)
  fill(0);
  text("VORONOI PEBBLES", windowWidth / 2, windowHeight - 26);
}

function createShapes(){
  shapes = [];
  for (const cell of polygons){
    //if (isEdgePolygon(cell) == false)
      shapes.push(new RecursiveShape(cell));
      shapes[shapes.length - 1].generateInnerShapes();
    //
  }
}

function draw(){/*
  if (params.animate == true){
    if (frameCount % 2 == 0){
      let innerShapeAngle = lerp(0, 0.1, (sin(frameCount/100) + 1) / 2);

for (let i = 0; i < shapes.length; i++){
        shapes[i].innerShapeRotation = innerShapeAngle;
        shapes[i].generateShapePoints();
        shapes[i].draw();
      }

if (params.hideText == false){
        drawText();
      }
    }
  }*/
}

function drawShapes(){
  background(10);
  for (const shape of shapes){
    shape.draw();
  }
}

function pointInPolygon(point, vs) {
  // Taken from https://github.com/substack/point-in-polygon
  // Nice explainer at https://observablehq.com/@tmcw/understanding-point-in-polygon
  // ray-casting algorithm based on
  // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

let x = point[0], y = point[1];

let inside = false;
  for (let i = 0, j = vs.length - 1; i < vs.length; j = i++) {
    let xi = vs[i][0], yi = vs[i][1];
    let xj = vs[j][0], yj = vs[j][1];

let intersect = ((yi > y) != (yj > y))
    && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }

return inside;
};

for (let j = 0; j < outerShape.length - 1; j++){
      let firstPoint = outerShape[j];
      let secondPoint = outerShape[j + 1];

let distanceBetween = dist(firstPoint[0], firstPoint[1], secondPoint[0], secondPoint[1]);
      let relativeDistance = params.innerShapeOffset / distanceBetween;

if (relativeDistance > 0.5){
        outerShape.splice(j + 1, 1);
        j--;
        continue;
      }

let xPosition = lerp(firstPoint[0], secondPoint[0], relativeDistance);
      let yPosition = lerp(firstPoint[1], secondPoint[1], relativeDistance);
      
      shapePoints.push([xPosition, yPosition]);
    }

if (shapePoints.length >= 3){
      shapePoints.push(shapePoints[0]);
      this.innerShapes.push(shapePoints);
      return true;
    } else {
      return false;
    }
  }
  
  this.draw = function() {
    for (let i = 0; i < this.innerShapes.length; i++){
      let fillColour = color(this.hue, this.saturation, params.baseBrightness + i * params.brightnessMultiplier / this.innerShapes.length);
      fill(fillColour);
      
      if (i == 0){
        stroke(fillColour);
      } else {
        noStroke();
      }
      
      beginShape();
      for (let j = 0; j < this.innerShapes[i].length; j++){
        vertex(this.innerShapes[i][j][0], this.innerShapes[i][j][1]);
      }
      endShape();
    }
  }
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg