How to make multiple 3D shapes transform / rotate as a group

p5.js
1

I’m trying to create the illusion of a gift box by having two groups of five planes, the first would have all sides except the top (so the box is empty on the inside) and another which is the same but upside down and more shallow.

I’ll need to be able to animate both groups as a whole (spinning around the full box / lid) and also animate one of the groups separately (the lid would rotate up as if attached to the box by a hinge).

I imagine I can translate the planes to form the correct shape of the box and maybe use the camera to pan around the box for the “animations” of the full scene, but no idea how to animate the lid up.

I’m relatively new to p5 / WebGL in general, and know how to do all of this using CSS3, but would like to get it started in a canvas based library.

Thanks in advance!

1 Like
2

I think the push() and pop() functions are what you’re looking for. From the p5 reference:

The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together.

Keep in mind that those functions work by pushing and popping on a stack, which works a bit like this:

// I show the stack similarly to an array, styles in () are inactive and styles in <> are active
push(); // stack: [ (root), <style 1> ]
// with the style active, we can do any transformations. let's say we're drawing the bottom part here:
noStroke();
fill(255, 0, 0);
// if we want to move it, we can use translate(x, y, z)
translate(0, 20, 0); // will move the bottom part down by 20 units
// let's suppose we want to draw the bottom plane, so we:
push(); // stack: [ (root), (style 1), <style 2> ]
// we do any necessary translations, and then
plane(50, 50 /* or any other size */);
pop(); // stack: [ (root), <style 1> ]
// we repeat the above until we have the bottom complete
pop(); // stack: [ <root> ]
// here we can do any other drawing that's not part of the gift box

Of course this code is incomplete, and will not draw a gift box, you should treat it as a boilerplate for what you want to do.

Good luck!

2 Likes