Objects Simple

Dette eksempel viser hvordan man kan bruge vektorer i en klasse til at tegne figurer på skærmen.

Når man klikker med musen genereres et tilfældigt antal rektangler, som tegnes på skærmen.

Det grundlæggende programflow håndteres i filen sketch.js.

let shapes = []

function setup() {
  createCanvas(windowWidth, windowHeight);
  createShapes()
}

function draw() {
  background('LightSkyBlue');

  for (const shape of shapes) {
    shape.render()
  }
}

// === Helper functions
function createShapes() {
  shapes = []
  let p1 = new p5.Vector()
  let p2 = new p5.Vector()

  let shapeCount = random(10)
  for (let i = 0; i < shapeCount; i++) {
    p1.x = random(0, width)
    p1.y = random(0, height)
    p2.x = random(0, width)
    p2.y = random(0, height)

    let s = new Shape(p1, p2)
    shapes.push(s)
  }  
}

// === Event handling
function mousePressed() {
  createShapes()
}

Klassen Shape er defineret i filen shape.js.

class Shape {
  constructor(startPos, endPos) {
    this.startPos = startPos.copy()
    this.endPos = endPos.copy()
  }

  render() {
    push()
    stroke('navy')
    strokeWeight(5)
    line(this.startPos.x, this.startPos.y, this.endPos.x, this.endPos.y)
    pop()
  }
}

For at de to filer kan fungere sammen, skal de begge inkluderes i html strukturen, f.eks. som vist herunder.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="../p5lib/p5.js"></script>
    <script src="../p5lib/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../p5lib/default-p5-style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="shape.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>

Demo

Prøv det kørende eksempel

Materiale