how to rotate objects on them selfes in p5.js

Itchy Impala answered on December 13, 2022 Popularity 1/10 Helpfulness 1/10

answer how to rotate objects on them selfes in p5.js

how to rotate objects on them selfes in p5.js

Comment

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

// Declare each vertex of our geometry as a vector from the origin.
const rectPoints = [
  new p5.Vector(-25, -25),
  new p5.Vector(25, -25),
  new p5.Vector(25, 25),
  new p5.Vector(-25, 25)
];

function draw() {
  background(100);
  let angle = millis() / 1000 * PI / 2;
  // Use p5.Vector.rotate to rotate each of the points that defines our geometry
  let rotatedRectPoints = rectPoints.map(v => v.copy().rotate(angle));
  for (let i = 1; i <= 9; i++) {
    // We can't using normal primitives like square(), so we have to draw shapes
    // with beginShape/endShape
    beginShape();
    for (const p of rotatedRectPoints) {
      vertex(p.x + mouseX * i / 4, p.y + mouseY * i / 4);
    }
    endShape();
  }
}

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: stackoverflow.com

Tags: p5.js typescript

Link to this answer
Share Copy Link