Creating a paper-engineering pop-up with angular velocity

p5.js Project Guidance
1

I’m trying to create an animated pop-up card. I can figure out how to animate folding planes when the folds are parallel, but am having trouble figuring out angled folds that increase the angular velocity of the moving parts. Are there any existing techniques to implement this? or are there additional libraries that are compatible with P5.js that would help? Here is my code thus far:

let angle = 0; // Angle for the folding motion

function setup() {
  createCanvas(600, 600, WEBGL);
}

function draw() {
  angleMode(DEGREES);
  background(200);
  stroke('#03A9F4')
  orbitControl();
  lights();
  // Smooth folding motion: From closed (0 degrees) to open (90 degrees)
  angle = map(sin(frameCount*1.5), 0, 1, 45, 0);
  angle2 = map(sin(frameCount* 1.5), 0, 1, 45, 0);

  // First plane (rotating around the vertical hinge edge)
  push();
  fill(150, 100, 200);
  rotateY(angle); // Rotate toward the hinge (opposite direction)
  translate(-100, 0, 0); // Position plane to the left of the hinge
  makeShape(200, 200);
    push();
    fill(100,150,200);
    translate(50, 0, 0);
    rotate(angle2 * 2,[1,-1,0]);
      beginShape();
      vertex(50, -50, 0); // Top-left corner
     // vertex(100 / 2, -100 / 2, 0);  // Top-right corner
      vertex(50, 50, 0);   // Bottom-right corner
      vertex(-50, 50, 0);  // Bottom-left corner
      endShape(CLOSE);
    pop();
  pop();

  // Second plane (rotating around the vertical hinge edge)
  push();
  fill(100, 150, 200);
  rotateY(-angle); // Rotate toward the hinge (opposite direction)
  translate(100, 0, 0); // Position plane to the right of the hinge
  makeShape(200, 200);
    push();
    fill(150,100,200);
      translate(-50,0,0);
      rotate(-angle2 * 2,[-1,-1,0]);
      beginShape();
      vertex(-50, -50, 0); // Top-left corner
     // vertex(100 / 2, -100 / 2, 0);  // Top-right corner
      vertex(50, 50, 0);   // Bottom-right corner
      vertex(-50, 50, 0);  // Bottom-left corner
      endShape(CLOSE);
    pop();
  pop();
}

function makeShape(w, h) {
  beginShape();
  vertex(-w / 2, -h / 2, 0); // Top-left corner
  vertex(w / 2, -h / 2, 0);  // Top-right corner
  vertex(w / 2, h / 2, 0);   // Bottom-right corner
  vertex(-w / 2, h / 2, 0);  // Bottom-left corner
  endShape(CLOSE);
}

Any help would be greatly appreciated!

1 Like
2

Unfortunately there is no easy solution because the axis of rotation for the popup triangle is not fixed at 45° but varies as the card opens.

If you have found your own solution then all is well and you can stop reading this post. :smile:

=====================================================================

I assume you are using WEBGL barbecue you want to apply images as textures to the pages. No problem there. :grin:

I notice that you have included orbitControl() in setup which allows the user to orbit and view it from any angle but the card is actually drawn on a 2D plane, [x, y, 0]. This is the same as taking a photograph of the card and then viewing it from any angle - you will lose any 3D visual effects.

You have to decide on whether you want a 2D or 3D representation or the card because the coding will be different in each case.

Obviously the 3D solution is more advanced, for a start

  • the front and back of the card have different textures so we need to calculate which side we are facing.
  • 3D rotations are very difficult to implement from scratch. Would really need to find a library to do that.

Let us know whether you want 2D or 3D and any progress you have made since your original post.

1 Like