p5.js编写的生成艺术风格动态时钟代码-html代码-BFW代码库

p5.js编写的生成艺术风格动态时钟代码

代码语言：html

所属分类：其他

代码描述：这是一个使用 p5.js 编写的生成艺术风格动态时钟，通过树木、草丛、日月星辰等自然元素的动画与位置变化来可视化当前的时间。内圈（时针）：看“太阳” 特征：轨道半径最小（最靠近中心），上面画着太阳（和星星）。读法：它转一圈代表 12小时。它所在的角度就是当前的“小时”。中圈（分针）：看“星星” 特征：轨道半径中等，上面画着星星。读法：它转一圈代表 60分钟。它所在的角度就是当前的“分钟”。外圈（秒针）：看“月亮” 特征：轨道半径最大（最靠近外围的

代码标签： p5.js 编写生成艺术风格动态时钟代码

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

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>∃ clock</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #f7f1e6;
      overflow: hidden;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    canvas {
      display: block;
    }
  </style>
  <script src="https://unpkg.com/p5@1/lib/p5.min.js"></script>
</head>

<body>
  <script>
    /* ∃ composition
{
  "symbols": [
    {
      "id": "s1",
      "kind": {
        "type": "Crow"
      },
      "position": [
        240,
        120.80000305175781
      ]
    },
    {
      "id": "s2",
      "kind": {
        "type": "Magpi"
      },
      "position": [
        417,
        428.79998779296875
      ]
    },
    {
      "id": "s3",
      "kind": {
        "type": "Raven"
      },
      "position": [
        41,
        375.79998779296875
      ]
    },
    {
      "id": "s4",
      "kind": {
        "type": "Tree"
      },
      "position": [
        30,
        42.80000305175781
      ],
      "color": {
        "r": 240,
        "g": 230,
        "b": 215
      }
    },
    {
      "id": "s8",
      "kind": {
        "type": "Tree"
      },
      "position": [
        133,
        40.80000305175781
      ],
      "color": {
        "r": 120,
        "g": 150,
        "b": 180
      },
      "fadeN": 1
    },
    {
      "id": "s9",
      "kind": {
        "type": "Tree"
      },
      "position": [
        221,
        33.80000305175781
      ],
      "color": {
        "r": 247,
        "g": 241,
        "b": 230
      }
    },
    {
      "id": "s10",
      "kind": {
        "type": "Egg"
      },
      "position": [
        -82,
        205.8000030517578
      ],
      "color": {
        "r": 115,
        "g": 165,
        "b": 165
      },
      "fadeN": 1
    },
    {
      "id": "s11",
      "kind": {
        "type": "Origin"
      },
      "position": [
        219,
        324.79998779296875
      ]
    },
    {
      "id": "s12",
      "kind": {
        "type": "Sun"
      },
      "position": [
        99,
        556.7999877929688
      ]
    },
    {
      "id": "s13",
      "ki.........完整代码请登录后点击上方下载按钮下载查看