260105

const { animate, cubicBezier } = anime;
const W = 800;
const H = 800;
let palette = [];
let animeValue = {
  count: 0,
};
let dotPoints = [];
let charPoints = [];

function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[4]);
  animate(animeValue, {
    count: TAU,
    duration: 3000,
    ease: "inOutSine",
    loop: true,
    alternate: true,
  });

  let letters = {
    G: [
      [2, 0],
      [3, 0],
      [1, 0],
      [0, 1],
      [0, 2],
      [0, 3],
      [0, 4],
      [1, 5],
      [2, 5],
      [3, 5],
      [3, 4],
      [3, 3],
      [2, 3],
    ],
    E: [
      [0, 0],
      [1, 0],
      [2, 0],
      [3, 0],
      [0, 1],
      [0, 2],
      [0, 3],
      [1, 3],
      [2, 3],
      [3, 3],
      [0, 4],
      [0, 5],
      [1, 5],
      [2, 5],
      [3, 5],
    ],
    N: [
      [0, 0],
      [0, 1],
      [0, 2],
      [0, 3],
      [0, 4],
      [0, 5],
      [1, 1],
      [2, 2],
      [3, 3],
      [4, 4],
      [4, 0],
      [4, 1],
      [4, 2],
      [4, 3],
      [4, 5],
    ],
    U: [
      [0, 0],
      [0, 1],
      [0, 2],
      [0, 3],
      [0, 4],
      [1, 5],
      [2, 5],
      [3, 5],
      [4, 4],
      [4, 3],
      [4, 2],
      [4, 1],
      [4, 0],
    ],
    A: [
      [1, 1],
      [0, 2],
      [3, 1],
      [4, 2],
      [0, 3],
      [1, 3],
      [3, 3],
      [4, 3],
      [4, 4],
      [4, 5],
      [0, 4],
      [0, 5],
      [2, 0],
    ],
    R: [
      [0, 0],
      [0, 1],
      [1, 0],
      [2, 0],
      [3, 0],
      [4, 0],
      [0, 2],
      [0, 3],
      [4, 1],
      [4, 2],
      [2, 2],
      [3, 2],
      [0, 4],
      [0, 5],
      [3, 4],
      [4, 5],
      [2, 3],
    ],
    Y: [
      [0, 0],
      [1, 1],
      [4, 0],
      [3, 1],
      [2, 2],
      [2, 3],
      [2, 4],
      [2, 5],
      [2, 5],
    ],
  };

  let word = "GENUARY";
  let spacing = 110;
  let scaleSize = 15;

  let totalWidth = (word.length - 1) * spacing + spacing / 2;
  let startX = -totalWidth / 2;
  let charHeight = 6 * scaleSize;
  let startY = -charHeight / 2;

  for (let i = 0; i < word.length; i++) {
    let charData = letters[word[i]];
    let offsetX = startX + i * spacing;
    let offsetY = startY;
    let charPointArray = [];

    for (let pos of charData) {
      let v = createVector(
        offsetX + pos[0] * scaleSize,
        offsetY + pos[1] * scaleSize
      );
      dotPoints.push(v);
      charPointArray.push(v);
    }
    charPoints.push(charPointArray);
  }
}

function draw() {
  background(palette[4]);
  orbitControl();

  push();
  strokeWeight(15);

  let f = animeValue.count;

  // 各文字内で点を2つずつペアにして線でつなぐ
  for (let charIdx = 0; charIdx < charPoints.length; charIdx++) {
    let charPointArray = charPoints[charIdx];
    for (let i = 0; i < charPointArray.length - 1; i += 2) {
      let p1 = charPointArray[i];
      let p2 = charPointArray[i + 1];
      if (p1 && p2) {
        randomSeed(i * 100);
        let randomColor = palette[floor(random(palette.length - 3))];
        let randomColor2 = palette[floor(random(palette.length - 3))];
        noStroke();
        push();
        fill(randomColor);
        let angle = f * (1 + i * 0.3);
        let r = 5;
        translate(p1.x + r * cos(angle), p1.y + r * sin(angle), 0);
        sphere(5);
        pop();
        push();
        fill(randomColor2);
        translate(
          p2.x + r * cos(angle + TAU / 4),
          p2.y + r * sin(angle + TAU / 4),
          0
        );
        sphere(5);
        pop();
        push();
        stroke(randomColor);
        line(
          p1.x + r * cos(angle),
          p1.y + r * sin(angle),
          0,
          p2.x + r * cos(angle + TAU / 4),
          p2.y + r * sin(angle + TAU / 4),
          0
        );
        pop();

        // 余った点
        if (i >= charPointArray.length - 3) {
          let lastPoint = charPointArray[charPointArray.length - 1];
          push();
          noStroke();
          fill(randomColor2);
          translate(lastPoint.x, lastPoint.y, 0);
          sphere(8);
          pop();
        }
      }
    }
  }
  pop();
  for (let i = 0; i < dotPoints.length; i++) {}

  // noLoop();
}

const colorArray = [
  {
    id: 0,
    colors: ["#253276", "#dfdad3", "#ffffff", "#000000"],
  },
  {
    id: 1,
    colors: [
      "#9dbdba",
      "#f8b042",
      "#e47763",
      "#253276",
      "#dfdad3",
      "#FFFFFF",
      "#000000",
    ],
  },
];