processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.2k stars 3.23k forks source link

Solves issue #6787 #6809

Closed Garima3110 closed 4 months ago

Garima3110 commented 5 months ago

Resolves #6787

Changes: I have tried to implement the calculateBoundingBox() method for p5.Geometry objects, This aims at simplifying tasks like collision detection and intersection testing. This enhancement also makes it easier to manipulate objects based on their spatial characteristics as it provides convenient access to essential properties such as min , max , size, and offset which are nothing but p5.Vector.

Sample usage for calculateBoundingBox() :

const myBox = buildGeometry(() => box(30, 40, 50));
const boundingBox = myBox.calculateBoundingBox();
console.log('Bounding Box:', boundingBox);

Here's a sample sketch to test how it works: https://editor.p5js.org/Garima3110/sketches/BXhqwTIRe

I would love to have suggestions to this PR . Thankyou!

PR Checklist

Garima3110 commented 5 months ago

Before calling it done, could we maybe add:

  • A unit test that verifies the output, so that we can tell if anything breaks it in the future
  • A doc comment above the method explaining to users how to use it, maybe with a code example?

Yeah sure! I'll just work on these and get back to you soon...!

Garima3110 commented 5 months ago
image

Hey @davepagurek ! Just a bit doubtful why this error is coming, couldn't we use createVector() directly Here's the screenshot of the specified lines in the error:

image
davepagurek commented 5 months ago

Nice work on the test! I think once we switch the vector syntax then that'll work. After that, the next thing to add would be a doc comment above the method you added with a brief description and brief example.

Garima3110 commented 5 months ago

Coming to adding an example code to the inline docs showing the usage of calculateBoundingBox() , would this example go along ?! (The one which I used in the sketch : https://editor.p5js.org/Garima3110/sketches/BXhqwTIRe)

let particles;
let button;

function setup() {
  createCanvas(500, 500, WEBGL);
  button = createButton('New');
  button.mousePressed(makeParticles);
  makeParticles();
}

function makeParticles() {
  if (particles) freeGeometry(particles);

  particles = buildGeometry(() => {
    for (let i = 0; i < 60; i++) {
      push();
      translate(
        randomGaussian(0, 200),
        randomGaussian(0, 100),
        randomGaussian(0, 150)
      );
      sphere(10);
      pop();
    }
  });
  const boundingBox = particles.calculateBoundingBox();
  console.log('Bounding Box:', boundingBox);
}

function draw() {
  background(255);
  noStroke();
  lights();
  orbitControl();
  model(particles);
}
davepagurek commented 5 months ago

I think that's a good start! For the examples in the reference, could we maybe make the canvas size 100x100 to fit better next to the code, and maybe use createP() to make a text box to write the results into rather than logging it so that it can be more visible?