403.継承+2配列+2種類(CRAZY)

CircleとRectを別々の配列で管理。まだ改善の余地があります。

p5.js oop

Learning OOP Object Oriented Programming

継承は使っていますが、まだ改善の余地があります。

現状のコード

let objs = []; // Circles
let objs2 = []; // Rects

円と四角を別々の配列で管理しています。

問題点

for (let obj of objs) {
  obj.update();
}
for (let obj of objs2) {
  obj.update();
}

for (let obj of objs) {
  obj.display();
}
for (let obj of objs2) {
  obj.display();
}

同じ処理を2回書いている...これは104(HELL)と同じパターン！

なぜ「CRAZY」なのか

継承でクラスはキレイになったのに、使い方（配列の管理）がまだ古いまま。次の404で、この問題を解決します。

View Source Code

let W, H, PW, PH;
const PADDING_RATIO = 0.2;
const MAX_SPEED = 10;

let objs = [];
let objs2 = [];

const MAX = 100

class AbstractShape {
  constructor() {
    this.pos = {
      x: random(width),
      y: random(height),
    };
    this.speed = {
      x: (Math.random() - 0.5) * MAX_SPEED,
      y: (Math.random() - 0.5) * MAX_SPEED,
    };
    this.acceleration = 0.1;
  }

  update() {
    this.pos.x += this.speed.x;
    this.pos.y += this.speed.y;

    if (this.pos.x < 0 + PW) {
      this.speed.x += this.acceleration;
    } else if (this.pos.x > W - PW) {
      this.speed.x -= this.acceleration;
    }

    if (this.pos.y < 0 + PH) {
      this.speed.y += this.acceleration;
    } else if (this.pos.y > H - PH) {
      this.speed.y -= this.acceleration;
    }
  }

  display() {
    // implement in subclass
  }
}


class Circle extends AbstractShape {
  display() {
    stroke(0);
    fill(0);
    ellipse(this.pos.x, this.pos.y, 10, 10);
    // text(["1:", Math.floor(this.pos.x), Math.floor(this.pos.y)], this.pos.x + 10, this.pos.y + 10);
  }
}

class Rect extends AbstractShape {
  display() {
    stroke(0);
    fill(0);
    rectMode(CENTER)
    rect(this.pos.x, this.pos.y, 10, 10);
    // text(["2:", Math.floor(this.pos.x), Math.floor(this.pos.y)], this.pos.x + 20, this.pos.y + 20);
  }
}

// main

function setup() {
  createCanvas((W = windowWidth), (H = windowHeight));
  PW = W * PADDING_RATIO;
  PH = H * PADDING_RATIO;

    for (let i = 0; i < MAX; i++) {
    objs.push(new Circle())
  }
    for (let i = 0; i < MAX; i++) {
    objs2.push(new Rect())
  }
}

function draw() {
  background(255);

  for (let i = 0; i < objs.length; i++) {
    const obj = objs[i];
    obj.update();
  }
  for (let i = 0; i < objs2.length; i++) {
    const obj = objs2[i];
    obj.update();
  }

  for (let i = 0; i < objs.length; i++) {
    const obj = objs[i];
    obj.display();
  }
  for (let i = 0; i < objs2.length; i++) {
    const obj = objs2[i];
    obj.display();
  }
}

Prev ← 402.継承で2種類のキャラ

Next 404.継承+1配列で2種類を管理 →

← オブジェクト指向プログラミング入門