p5.js
p5.js copied to clipboard
Solves issue #6787
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
- [x]
npm run lint
passes - [ ] Inline documentation is included / updated
- [ ] Unit tests are included / updated
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...!
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:
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.
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);
}
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?