AHNY2024 3D

// 20231230221414
// by shibomb https://shibomb.xyz
// License: CC BY-NC-ND 4.0

const COLORS = [
  "#f94144",
  "#f3722c",
  "#f8961e",
  "#f9844a",
  "#f9c74f",
  "#90be6d",
  "#43aa8b",
  "#4d908e",
  "#577590",
  "#277da1",
];

const MESSAGES = [
  "あけまして",
  "おめでとう",
  "ございます",
  "ほんねんも",
  "よろしく",
  "おねがい",
  "します！",
  "おみくじは",
  "吉でした！",
  "2024",
  "A",
  "HAPPY",
  "NEW",
  "YEAR!",
  "I'LL",
  "HAVE",
  "GOOD",
  "BLESSING",
  "2024",
  "Anyway",
  "the wind",
  "blows.",
  "shibomb",
];

const BG_COLOR = 0;
const REFRESH_FRAME_COUNT = 168 * 1;

// --------------------
// params, features
// --------------------
params = {};
function getParams() {
  params.number = 1;
  params.string = "message";
  params.boolean = true;
  params.color = "#ccddeeff";
  params.select = "apple";
  params.bigint = 1;

  params.x = 100;
  params.y = 100;
  params.l = 100;

  // console.log(`params`, params);
}

features = {};
function getFeatures() {
  features.random = Math.floor(random() * 10);
  features.boolean = random() > 0.5;
  features.string = ["A", "B", "C", "D"].at(Math.floor(random() * 4));
  features.paramnum = params.number;

  // console.log(`features`, features);
}

// --------------------
// configs
// --------------------

// canvas type : true: window full / false: square fit with short side
const WINDOW_FULL = true;

// draw once : true: once / false: loop
const DRAW_ONCE = false;

const CAPTURE_FRAMECOUNT = DRAW_ONCE ? 1 : 100;

// --------------------
// p5.js main
// --------------------

let font;

function preload() {
  // console.log(`#preload`);

  // init
  getParams();
  getFeatures();

  // preload
  font = loadFont("BIZUDPGothic-Regular.ttf");
}

let W, H;
let fpg;

function setupCanvas() {
  if (WINDOW_FULL) {
    W = windowWidth;
    H = windowHeight;
  } else {
    W = min(windowWidth, windowHeight);
    H = W;
  }

  if (frameCount == 0) {
    createCanvas(W, H, WEBGL);
  } else {
    resizeCanvas(W, H, WEBGL);
  }
  background(BG_COLOR);

  // if (pg) {
  //   pg.remove();
  // }
  // pg = createGraphics(W, H);

  // init
  fpg = new FontPointsGen(font, height / 8, true);
  ({ boundsList, pointsList } = fpg.initFontPoints(MESSAGES.join()));

  // init data
  initData();
  randomCameraPos();
}

let boundsList = {};
let pointsList = {};

let dataList = [];
let msgCount = -1;

function initData() {
  msgCount++;
  dataList = [];
  const msg = MESSAGES[msgCount % MESSAGES.length];
  for (let i = 0; i < msg.length; i++) {
    const c = msg.charAt(i);
    dataList.push(
      new MyChar(
        c,
        fpg.getFontPoints(c),
        random(-40, 40),
        (height / (msg.length + 1)) * (i + 1) - height / 2,
        random(-40, 40),
        color(random(COLORS))
      )
    );
  }
}

let cam, cam1, cam2;

function setup() {
  // console.log(`#setup`);
  setupCanvas();
  background(BG_COLOR);

  // setup
  cam = createCamera();
  cam1 = createCamera();
  cam1.setPosition(0, 0, height / 1.86 / tan(PI / 6));
  cam1.lookAt(0, 0, 0);

  randomCameraPos();

  // setCamera(cam);

  if (DRAW_ONCE) noLoop();
}

function randomCameraPos() {
  cam2 = createCamera();
  // cam2.setPosition(
  //   random(-width, width),
  //   random(-width, width),
  //   random(-width, width)
  // );
  cam2.setPosition(0, 0, height / 1.86 / tan(PI / 6));
  cam2.lookAt(
    random(-width, width),
    random(-width, width),
    random(-width, width)
  );
  setCamera(cam2);
}

function draw() {
  // if (frameCount == 1) console.log(`#draw at frameCount ${frameCount}`);
  background(BG_COLOR);

  orbitControl();

  // translate(0, height / 2);

  // draw
  // debugInfo(); // sample

  dataList.forEach((data) => {
    data.update();
  });

  dataList.forEach((data) => {
    data.display();
  });

  cam2.slerp(cam2, cam1, 0.02);

  // if (abs(cam1.eyeX - cam2.eyeX) < 50) {
  if (frameCount % REFRESH_FRAME_COUNT == 0) {
    initData();
    randomCameraPos();
  }
}

function mouseMoved() {
  params.x = mouseX;
  params.y = mouseY;
  params.l = (mouseX / mouseY) * 10;
}

// --------------------
// p5.js util
// --------------------
function windowResized() {
  // console.log(`#windowResized (${windowWidth}, ${windowHeight})`);
  setupCanvas();

  // window resized
  // ...
}

/**
[p] pause / resume
[o] next frame
[0] save gif
[1-4] capture image with pixel density 1-4 
*/
function keyPressed() {
  if (key === "p") {
    if (isLooping()) {
      noLoop();
    } else {
      loop();
    }
  }
  if (key === "o") {
    redraw();
  }

  if (key === "0") {
    saveGif("capture", 5);
  }

  if (["1", "2", "3", "4"].includes(key)) {
    const original = pixelDensity();
    const temp = parseInt(key);
    pixelDensity(temp);
    resizeCanvas(W, H);
    redraw();

    saveCanvas("capture");

    pixelDensity(original);
    resizeCanvas(W, H);
    redraw();
  }
}

// --------------------
// debug
// --------------------
function debugInfo() {
  noStroke();
  fill(params.color);

  text(
    `
W, H:${W}, ${H}
pixelDensity:${pixelDensity()}
frameCount:${frameCount}
`,
    10,
    20
  );

  text(
    `
params:${JSON.stringify(params, null, 4)}
features:${JSON.stringify(features, null, 4)}
`,
    10,
    100
  );

  circle(params.x, params.y, params.l);
}