p5.js 动态生成艺术时钟代码-html代码-BFW代码库

代码语言：html

代码描述：p5.js 动态生成艺术时钟代码，它通过实时时间周期（类似时钟的时分秒）和向量节点图（类似行星轨道或李萨如图形）的数学运算，实时渲染出一个融合了草木、星云等自然元素与几何轨迹的动态抽象视觉场景（或程序化天文钟）。

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

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

<head>
  <meta charset="UTF-8">
  
  

  
  
</head>

 
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: #3C4B5F;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    canvas {
      display: block;
      margin: 0;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.10.0/lib/p5.min.js"></script>
</head>

<body>
  <script type="application/json" id="newlang-composition">
    {
      "version": 1,
      "globals": {
        "cyclesPerDay": 2,
        "hoursPerCycle": 12,
        "frameRate": 30,
        "defaultBreathDepth": 0.1,
        "defaultBreathSpeed": 0.2,
        "backgroundColor": "#3C4B5F",
        "surroundColor": "#3C4B5F",
        "defaultLineColor": "#9BABC0",
        "defaultShapeColor": "#B58A9E",
        "defaultLineStrokeWeight": 0.35,
        "defaultShapeStrokeWeight": 1,
        "theme": "ambiance",
        "monoBase": "#DCAA5A"
      },
      "nodes": [{
        "kind": "vector",
        "id": "1766b32f-5d50-4dc2-803b-09d49a2d3bcc",
        "variant": "raven",
        "length": 0.3
      }, {
        "kind": "vector",
        "id": "cecca55a-2c14-4e74-a705-d91339167b39",
        "variant": "crow",
        "length": 0.3
      }, {
        "kind": "vector",
        "id": "3dd47633-5182-405f-b565-2185432d0826",
        "variant": "magpi",
        "length": 0.3
      }, {
        "kind": "modifiedVector",
        "id": "b403000c-84e7-4a24-abd0-45065204ee9e",
        "op": "sum",
        "visual": {
          "color": {
            "variant": "default"
          },
          "opacity": 1,
          "size": 1,
          "strokeWeight": 1
        }
      }, {
        "kind": "modifiedVector",
        "id": "0749cf64-b62e-4595-98aa-f461f3e3a88f",
        "op": "sum",
        "visual": {
          "color": {
            "variant": "default"
          },
          "opacity": 1,
          "size": 1,
          "strokeWeight": 1
        }
      }, {
        "kind": "modifiedVector",
        "id": "ccc2d37a-7785-41db-a7aa-0b59ed6836b6",
        "op": "sum",
        "visual": {
          "color": {
            "variant": "default"
          },
          "opacity": 1,
          "size": 1,
          "strokeWeight": 1
        }
      }, {
        "kind": "vector",
        "id": "637f03ac-4d71-48e0-a756-7119798bf490",
        "variant": "origin"
      }, {
        "kind": "habitat",
        "id": "1f8fcb20-a3ff-43fc-b924-824edc1b8417",
        "variant": "meta",
        "visual": {
          "color": {
            "variant": "hex",
            "value": "#374558"
          },
          "opacity": 0.85,
          "size": 1.6,
          "strokeWeight": 1
        }
      }, {
        "kind": "habitat",
        "id": "2e23a4ed-16e0-4f71-a647-20c0a533d272",
        "variant": "meta",
        "visual": {
          "color": {
            "variant": "hex",
            "value": "#ECEFF3"
          },
          "opacity": 1,
          "size": 1,
          "strokeWeight": 1
        }
      }, {
        "kind": "lineGlyph",
        "id": "aad7a904-0220-477a-beb8-b722579a9b47",
        "visual": {
          "color": {
            "variant": "default"
          },
          "opacity": 1,
          "size": 1,
          "strokeWeight": 1
        }
      }, {
        "kind": "lineGlyph",
        "id": "04261fd4-d7e8-4dc4-82cb-1ea3fd3109cc",
        "visual": {
          "color": {
            "variant": "default"
          },
          "opacity": 1,
          "size": 1,
          "strokeWeight": 1
        }
      }, {
        "kind": "lineGlyph",
        "id": "6488d1f8-bd9d-4472-ae32-61a03ec4d905",
        "visual": {
          "color": {
            "variant": "default"
          },
          "opacity": 1,
          "size": 1,
          "strokeWeight": 1
        }
      }, {
        "kind": "lineGlyph",
        "id": "8d45211e-9145-4a7c-b069-867caf2b220b",
        "visual": {
          "color": {
            "variant": "hex",
            "value": "#ECEFF3"
          },
          "opacity": 1,
          "size": 3,
          "strokeWeight": 1
        }
      }, {
        "kind": "lineGlyph",
        "id": "479a2687-b496-4844-8871-d33748b12838",
        "visual": {
          "color": {
            "variant": "hex",
            "value": "#ECEFF3"
          },
          "opacity": 1,
          "size": 3,
          "strokeWeight": 1
        }
      }, {
        "kind": "lineGlyph",
        "id": "16d62660-1c44-4681-a5da-80a33ae7e18a",
        "visual": {
          "color": {
            "variant": "default"
          },
          "opacity": 1,
          "size": 1,
          "strokeWeight".........完整代码请登录后点击上方下载按钮下载查看