有趣的Processing“区块链”鸟-源码解析

// 注意后4个圆角参数
// top-left(tl)左上
// top-right(tr)右上
// bottom-right(br)右下
// bottom-left(bl)左下
rect(a, b, c, d, tl, tr, br, bl)

// 左上圆角 = 20, 右上圆角 = 15, 
// 右下圆角 = 10, 左下圆角 = 5
rect(30, 20, 55, 55, 20, 15, 10, 5);

// 随机一个系数
  const mult = random(0.7, 1.05);
  // 根据屏幕宽高确定一个单元格尺寸
  const u = min(width, height) * 0.15 * mult;
  // face width 脸部宽度
  const fw = u;
  // face height 脸部高度
  const fh = u;
  // mouse width 嘴巴宽度
  const mw = random() > 0.5 ? u * 0.5 * random(0.8, 5) : u * 0.5 * random(0.5, 1.3);
  // mouse height 嘴巴高度
  const mh = u * 0.5 * random(0.5, 1.8);
  // body width 身体宽度
  const bw = u * 2;
  // body height 身体高度
  const bh = bw;
  // tail height 尾巴高度
  const th = u * 2 * random(0.5, 1.5);
  // 中间点x
  const cx = width * 0.5;
  // 中间点y
  const cy = height * 0.55;
  // 鸟的左上角横坐标x，用于translate后使用相对位置
  const x = cx - (bw) / 2;
  // 鸟的左上角纵坐标y，用于translate后使用相对位置
  const y = cy - (fh + bh);
  // 树木宽度
  const treeLen = width * 0.6;

const URL = [
  "https://coolors.co/eb300f-fe7688-fff566-212121-2eb254",
  "https://coolors.co/550527-688e26-faa613-f44708-a10702-e1d6de",
  "https://coolors.co/124e78-f0f0c9-f2bb05-d74e09-6e0e0a",
  "https://coolors.co/564787-dbcbd8-f2fdff-9ad4d6-101935"
]
let COLS;

···
function draw() {
    // 根据url中的色值创建颜色数组
  COLS = createCols(URL[frameCount % URL.length]);
  // 对数组进行洗牌操作，打乱颜色的顺序，这样即使使用了同一个url中的色彩值，按照数组索引编号取到的颜色值具有随机性
  COLS = shuffle(COLS)
  ...
}


// 随机颜色
function createCols(url) {
  // 找到最后的斜杠 / 
  let slaIndex = url.lastIndexOf("/");
  // 截取斜杠后面的字符串，得到 eb300f-fe7688-fff566-212121-2eb254 这样多个使用-连接的颜色
  let colStr = url.slice(slaIndex + 1);
  // 将上一步的颜色字符串用 - 分割，得到如 ["eb300f", "fe7688", "fff566", "212121", "2eb254"]的颜色数组
  let colArr = colStr.split("-");
  // 使用数组的map方法，映射得到如如 ["#eb300f", "#fe7688", "#fff566", "#212121", "#2eb254"]的颜色数组
  return colArr.map(c => "#" + c)
}

const UNITFUNCS = [check, triPattern, curveRect, stripe];

function drawRectTile(x, y, w, h) {
  const fn = int(random() * UNITFUNCS.length);
  UNITFUNCS[fn](x, y, w, h, shuffle(COLS "fn"));
}

function drawArcUnit(cx, cy, wdia, hdia, sr, er) {
  const cArr = shuffle(COLS);
  ellipseMode(CENTER);
  push();
    translate(cx, cy);
    noStroke();
    fill(cArr[0]);
    arc(0, 0, wdia, hdia, sr, er);

    push();
      drawingContext.clip();

      const rn = random();

      if (rn > 0.5) {
        for (let i = 0; i < 3; i++) {
          fill(cArr[i]);
          ellipse(0, 0, wdia / 3 * (3 - i), hdia / 3 * (3 - i));
        }
      } else {
        const ishori = random() > 0.5 ? true : false;
        for (let i = 0; i < 6; i++) {
          fill(cArr[i % cArr.length]);
          if (ishori) rect(-wdia / 2, -hdia / 2 + hdia / 6 * i, wdia, hdia / 6 + 1);
          else rect(-wdia / 2 + wdia / 6 * i, -hdia / 2, wdia / 6 + 1, hdia);
        }
      }
    pop();
  pop();
}