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.........完整代码请登录后点击上方下载按钮下载查看