Physics Engine, Baking #4373

ahgsql · 2024-10-07T12:19:31Z

ahgsql
Oct 7, 2024

Hey Remotioners

I've been exploring physics engines and recently watched Jonny's video about side projects, particularly the part about simulating object behavior in animations. It got me thinking about a "bake" feature, similar to what we have in Blender.

In Blender, the "Bake" animation feature allows us to fast-forward object behavior one step at a time while saving each object's position, angle, velocity, scale, etc. This approach makes it much easier to handle time-based animations.

I implemented a similar concept in Matter.js, and it works great! Here's how I think we could apply it in Remotion:

Object Properties: Create objects with their properties (position, velocity, etc.).
Baking Process: Before playing an animation, we can "bake" these properties into a variable.
Timeline Control: This would make it easy to move forwards or backwards on the timeline, similar to how we manage keyframes.
This could be a great addition to Remotion's timeline control and would enhance physics-based animations for users!

Would love to hear your thoughts and get feedback!

Best,
Ali Haydar

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Matter.js Baked Simulation with Timeline for Remotion Experiment
    </title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
    <style>
      body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            background-color: #fdfdfd;
        }
        #canvas-container {
            margin-top: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        #controls {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        button {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        #timeline {
            width: 80%;
            margin-top: 20px;
        }
        #bakeInfo {
            margin-top: 10px;
            font-style: italic;
        }
    </style>
  </head>
  <body>
    <div id="canvas-container"></div>
      <h4>Try to move slider before clicking Bake Simulaton. Then Click "Bake Simulation" Button. After that, you can play with buttons or timeline slider.</h1><br>
    <div id="controls">
    
      <button id="bakeButton">Bake Simulation</button>
      <button id="playButton">Play</button>
      <button id="pauseButton">Pause</button>
    </div>
    <input type="range" id="timeline" min="0" max="900" value="0" />
    <div id="bakeInfo"></div>

    <script>
        function generateHarmoniousColor() {
            const hue = Math.random() * 360;
            const saturation = 45 + Math.random() * 20; // 45-65%
            const lightness = 55 + Math.random() * 10; // 55-65%
            return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
        }

      const Engine = Matter.Engine;
      const Render = Matter.Render;
      const World = Matter.World;
      const Bodies = Matter.Bodies;

      const engine = Engine.create();
      const world = engine.world;

      const render = Render.create({
        element: document.getElementById("canvas-container"),
        engine: engine,
        options: {
          width: 800,
          height: 600,
          wireframes: false,
             background: '#e7e7e7'
        },
      });

      const boxA = Bodies.rectangle(400, 200, 80, 80, {
        render: { fillStyle: generateHarmoniousColor() },
      });
      const boxB = Bodies.rectangle(450, 50, 80, 80, {
        render: { fillStyle: generateHarmoniousColor() },
      });
      const circle = Bodies.circle(350, 50, 40, {
        mass:2,
        restitution :1,
        friction:0,
        render: { fillStyle: generateHarmoniousColor() },
      });
      const circle2 = Bodies.circle(300, 150, 30, {
        mass:1,
        restitution :.8,
        friction:0,
        render: { fillStyle: generateHarmoniousColor() },
      });
      const ground = Bodies.rectangle(400, 550, 810, 20, {
        isStatic: true,
        angle:3*Math.PI/180,
        friction:0,
        render: { fillStyle: generateHarmoniousColor() },
      });

      World.add(world, [boxA, boxB,  circle,circle2, ground]);

      let timeline = [];
      const maxFrames = 900; // 15 seconds at 60 FPS

      function bakeSimulation() {
        const startTime = performance.now();


        timeline = [];
        Matter.Body.setPosition(boxA, { x: 400, y: 200 });
        Matter.Body.setPosition(boxB, { x: 450, y: 50 });
        Matter.Body.setVelocity(boxA, { x: 0, y: 0 });
        Matter.Body.setVelocity(boxB, { x: 0, y: 0 });
        Matter.Body.setAngularVelocity(boxA, 0);
        Matter.Body.setAngularVelocity(boxB, 0);

        for (let i = 0; i < maxFrames; i++) {
          Engine.update(engine, 1000 / 60); 
        
          const frame = world.bodies.map((body) => ({
            id: body.id,
            position: { ...body.position },
            angle: body.angle,
            velocity: { ...body.velocity },
            angularVelocity: body.angularVelocity,
          }));
          timeline.push(frame);
        }
         const endTime = performance.now();
            const duration = ((endTime - startTime) / 1000).toFixed(2);
            document.getElementById('bakeInfo').textContent = `Baking completed in ${duration} seconds`;
            console.log("Baking complete");
            
        currentFrame = 0;
        updateBodies();
      }

      let currentFrame = 0;
      let isPlaying = false;

      function playSimulation() {
        isPlaying = true;
        requestAnimationFrame(updatePlayback);
      }

      function pauseSimulation() {
        isPlaying = false;
      }

      function setFrame(frameNumber) {
        currentFrame = frameNumber;
        updateBodies();
      }

      function updatePlayback() {
        if (isPlaying) {
          currentFrame = (currentFrame + 1) % maxFrames;
          updateBodies();
          document.getElementById("timeline").value = currentFrame;
          requestAnimationFrame(updatePlayback);
        }
      }

      function updateBodies() {
        if (timeline.length === 0) return;
        const frame = timeline[currentFrame];
        frame.forEach((bodyState) => {
          const body = world.bodies.find((b) => b.id === bodyState.id);
          if (body) {
            Matter.Body.setPosition(body, bodyState.position);
            Matter.Body.setAngle(body, bodyState.angle);
            Matter.Body.setVelocity(body, bodyState.velocity);
            Matter.Body.setAngularVelocity(body, bodyState.angularVelocity);
          }
        });
      }

      document.getElementById("bakeButton").onclick = bakeSimulation;
      document.getElementById("playButton").onclick = playSimulation;
      document.getElementById("pauseButton").onclick = pauseSimulation;
      document.getElementById("timeline").oninput = (e) =>
        setFrame(parseInt(e.target.value));

      Render.run(render);
    </script>
  </body>
</html>

JonnyBurger · 2024-10-08T07:57:29Z

JonnyBurger
Oct 8, 2024
Maintainer

This is great!
Thanks for building the demo.

I think that I probably overengineered my thing by forking Matter.js.
It doesn't have TypeScript types and I had the idea to make it SVG-only, but I have the feeling that during my extensive refactor, I broke something and introduced some bugs.

Your approach is better overall. I added this to https://remotion.dev/docs/third-party now!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remotion

Physics Engine, Baking #4373

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Remotion

Physics Engine, Baking #4373

ahgsql Oct 7, 2024

Replies: 1 comment

JonnyBurger Oct 8, 2024 Maintainer

ahgsql
Oct 7, 2024

JonnyBurger
Oct 8, 2024
Maintainer