p5实现钻石瓷砖背景效果代码-html代码-BFW代码库

p5实现钻石瓷砖背景效果代码

代码语言：html

所属分类：背景

代码描述：p5实现钻石瓷砖背景效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script>
    <style>
        body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    </style>
</head>

<body>
    <script type="text/javascript">
        let p1 = "4D3D3D-D4AE6C-E0CBB2-CB6B74-6B4249".split("-").map((c) => "#" + c);
    let p2 = "e7f2f8-74bdcb-ffa384-efe7bc".split("-").map((c) => "#" + c);
    let p3 = "8490B0-454C68-323446-C86D43-DBD0C8".split("-").map((c) => "#" + c);
    let p4 = "A8E6CF-DCEDC1-FFD3B6-FFAAA5-FF8B94".split("-").map((c) => "#" + c);
    let p5 = "DBF4F0-FFCCCB-EEEBE2-C7EDDC-7FB9BC".split("-").map((c) => "#" + c);
    
    const config = {
      width: window.innerWidth,
      height: window.innerHeight,
      dpr: 1,
      seed: 2120,
      size: 200,
      palette: [...p3],
      numX: 1,
      numY: 1,
      animate: false,
    };
    
    let shapes = [];
    
    function setup() {
      if (config.seed > 0) {
        randomSeed(config.seed);
      }
      doSetup();
    }
    
    function doSetup() {
      config.width = window.innerWidth;
      config.height = window.innerHeight;
      createCanvas(config.width, config.height);
      pixelDensity(config.dpr);
      noiseSeed(config.seed);
      config.numY = config.height / config.size;
      config.numX = config.width / config.size;
      shapes = [];
    
      let xoffset;
      for (let y = 0.65; y < config.numY - 0.5; y += 0.5) {
        xoffset = y % 1;
        for (let x = 0.5 + xoffset; x < config.numX - 0.7; x += 1) {
          shapes.push(createShape(x, y, config.size));
        }
      }
      draw();
    }
    
    function line2(x0, y0, x1, y1, a) {
      // some hash value for consistant randomness
      let h = round(sin(x0 * y1 * 21911 + y0 * 17.3 + x1 * 0.012) * 1000) / 1000;
      // (+/-) multiplier for pixel based offset
      let s = h > 0 ? -1 : 1;
      let s2 = abs(h) > 0.5 ? -1 : 1;
      //
      let r = abs(h) / 3 + 0.1;
      let rn = 1 - r;
      let r1 = (h / 2 + 0.5) / 3 + 0.1;
      let r1n = 1 - r1;
    
      //let r = random()
      beginShape();
      curveVertex(x0, y0);
      curveVertex(x0 - s / 2, y0 + s / 2);
      curveVertex(x0 * rn + x1 * r - a * s, y0 * rn + y1 * r + a * s2);
      curveVertex(x0 * r1 + x1 * r1n - a * s2, y0 * r1 + y1 * r1n);
      curveVertex(x1 + (a / 3) * s, y1);
      curveVertex(x1 - (a / 2) * s, y1 + (a / 2) * s);
    
      endShape();
    }
    
    function lines(x0, y0, x1, y1, x2, y2, x3, y3, n) {
      let dx01 = x1 - x0;
      let sx0.........完整代码请登录后点击上方下载按钮下载查看