Stickman Objects

Denne demonstration er et eksempel på hvordan man kan bruge klasser og objekter til at strukturere koden. I eksemplet tegnes nogle hoppende tændstikmænd med forskellige egenskaber.

Filen sketch.js indeholder den sædvanlige struktur for et program skrevet i p5js.

I setup() oprettes et lærred, og der oprettes tre objekter af klassen stickman. Bemærk at de bliver initialiseret med forskellige egenskaber via deres constructor.

I draw() kaldes metoderne render() og update() på begge de to StickMan objekter.

Derudover er metoden mouseClicked() implementeret, og denne sørger for at kalde metoden jump på de to stickman objekter, med den effekt at de begge hopper når der klikkes med musen.

let man;
let child;

function setup() {
  createCanvas(windowWidth, windowHeight);
  const halfWidth = width/2;
  man = new StickMan(halfWidth +150, 70, 25, "blue");
  woman = new StickMan(halfWidth - 150, 60, 15, "red");
  child = new StickMan(halfWidth, 30, 45, "greenyellow");
}

function draw() {
  background(220);
  textSize(20)
  text("Klik med musen for at hoppe", 30, 40)
  man.render();
  man.update();

  woman.render();
  woman.update();

  child.render();
  child.update();
}

function mouseClicked() {
  man.jump();
  woman.jump();
  child.jump();
}

Herunder ses implementationen af stickman klassen, som er lavet separat i filen stickman.js for at gøre koden mere overskuelig.

class StickMan {
  constructor(x, minHeight, jumpSpeed, color) {
    this.x = x;
    this.jumpSpeed = jumpSpeed;
    this.minHeight = minHeight;
    this.height = minHeight;
    this.color = color;
    this.y = height / 2;
    this.vy = 0;
    this.gravity = 1.5;
  }

  jump() {
    if (this.y == height) {
      this.vy = - this.jumpSpeed;
    }
  }

  update() {
    // fall down
    this.y += this.vy;
    // increase fall speed due to gravity
    this.vy += this.gravity;
    // stop at floor
    this.y = constrain(this.y, -3000, height);
    // change the size
    this.height = map(mouseX, 0, width, this.minHeight, this.minHeight * 6);
  }

  render() {
    // compute the dimensions of the body parts
    const headDiameter = this.height * 0.2;
    const headRadius = headDiameter / 2;
    const bodyHeight = (this.height - headDiameter) * 0.4;
    const legHeight = this.height - headDiameter - bodyHeight;

    const legWidth = headDiameter * 0.5;
    const armWidth = headDiameter * 0.75;
    const armHeight = headDiameter * 1.8;
    const neckLength = headDiameter * 0.3;

    const headX = this.x;
    const headY = this.y - this.height + headRadius;

    // draw the stickman
    push();
    fill(this.color);
    strokeWeight(3);
    // head
    circle(headX, headY, headDiameter);
    // body
    line(headX, headY + headRadius, headX, headY + headRadius + bodyHeight);
    // arms
    const shoulderY = headY + headRadius + neckLength;
    line(headX, shoulderY, headX - armWidth, shoulderY + armHeight);
    line(headX, shoulderY, headX + armWidth, shoulderY + armHeight);
    // legs
    const legY = headY + headRadius + bodyHeight;
    line(headX, legY, headX - legWidth, legY + legHeight);
    line(headX, legY, headX + legWidth, legY + legHeight);
    pop();
  }
}

Husk at begge filer skal inkluderes i html strukturen. Hvis de ligger i samme mappe som html filen kan det gøres således:

<script src="stickman.js"></script>
<script src="sketch.js"></script>

Demo

Prøv det kørende eksempel

Materiale