Taboo "Maze of Love" - OpenProcessing

mySketch
xxxxxxxxxx
 
let danmaku;
const DEFAULT_FRAMERATE = 60;
let startMs = -1;
let BG_COLOR;
​
function preload() {
  danmaku = new Danmaku("danmaku.json");
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  BG_COLOR = color(70, 80, 90);
  background(BG_COLOR);
}
​
function draw() {
  let areaX, areaY, areaScale;
  if (
    windowWidth / windowHeight >
    ((danmaku.width * 1.1) / danmaku.height) * 1.05
  ) {
    // 横長
    areaY = windowHeight * 0.025;
    areaScale = (windowHeight * 0.95) / danmaku.height;
    areaX = (windowWidth - danmaku.width * areaScale) / 2;
  } else {
    // 縦長
    areaX = windowWidth * 0.05;
    areaScale = (windowWidth * 0.9) / danmaku.width;
    areaY = (windowHeight - danmaku.height * areaScale) / 2;
  }
  let nowMs = millis();
  background(BG_COLOR);
  if (startMs == -1) startMs = nowMs;
  danmaku.draw(areaX, areaY, areaScale, nowMs - startMs);
  fill(BG_COLOR);
  rect(0, 0, windowWidth, areaY);
  rect(0, 0, areaX, windowHeight);
  rect(
    0,
    areaY + danmaku.height * areaScale,
    windowWidth,
    windowHeight - (areaY + danmaku.height * areaScale)
  );
  rect(
    areaX + danmaku.width * areaScale,
    0,
    windowWidth - (areaX + danmaku.width * areaScale),
    windowHeight
  );
  if (danmaku.countActiveBullets() == 0) {
    danmaku.reset();
    startMs = -1;
  }
}
​
class Danmaku {
  constructor(jsonPath) {
    this.jsonData = loadJSON(jsonPath, () => this.load(this.jsonData));
  }
  load(jsonData) {
    if (!("width" in jsonData && "height" in jsonData)) return false;
    this.width = jsonData["width"];
    this.height = jsonData["height"];
    this.bullets = jsonData.bullets.map((bullet) => {
      return { bullet: new Bullet(bullet), active: true };
    });
    return true;
  }
  reset() {
    this.bullets.forEach((ele) => (ele.active = true));
  }
  draw(x, y, scale, ms) {
    fill(color(0, 0, 0));
    rect(x, y, this.width * scale, this.height * scale);
    this.bullets.forEach((element) => {
      if (!element.active) return;
      if (ms < element.bullet.startTime) return;
      let pos = element.bullet.update(ms);
      if (pos == null) return;
      if (!this.isInside(pos)) {
        element.active = false;
        return;
      }
      noStroke();
      fill(element.bullet.color);
      push();
      translate(x + pos.x * scale, y + pos.y * scale); // 原点をキャンバスの中央に移動
      rotate(element.bullet.rad - Math.PI / 2); // 原点を中心にキャンバスを回転
      ellipse(
        0,
        0,
        element.bullet.width * scale,
        element.bullet.height * scale
      );
      pop(); // 設定を元に戻す
      // ellipse(x + pos.x * scale, y + pos.y * scale, 2 * scale, 2 * scale);
    });
  }
  countActiveBullets() {
    return this.bullets.reduce((acc, ele) => {
      if (ele.active) return acc + 1;
      else return acc;
    }, 0);
  }
  isInside(pos) {
    if (
      pos.x < -100 ||
      this.width + 100 < pos.x ||
      pos.y < -100 ||
      this.height + 100 < pos.y
    ) {
      return false;
    } else {
      return true;
    }
  }
}
​
class Position {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
​
class Bullet {
  constructor(data) {
    this.pos = new Position(0, 0);
    let initX = "initX" in data ? data["initX"] : 0;
    let initY = "initY" in data ? data["initY"] : 0;
    this.initPos = new Position(initX, initY);
    this.rad = "rad" in data ? data["rad"] : 0;
    this.speed = "speed" in data ? data["speed"] : 0;
    this.startMs = "startMs" in data ? data["startMs"] : 0;
    this.color = "color" in data ? color(data["color"]) : color("#c8c8c8");
    this.width = "width" in data ? data["width"] : 4;
    this.height = "height" in data ? data["height"] : 4;
  }
  update(ms) {
    if (ms < this.startMs) return null;
    this.pos.x =
      this.initPos.x + Math.cos(this.rad) * this.speed * (ms - this.startMs);
    this.pos.y =
      this.initPos.y + Math.sin(this.rad) * this.speed * (ms - this.startMs);
    return this.pos;
  }
}
​