Home » Javascript » I want to make a html element animation a javascript variable so i can add physics to it

I want to make a html element animation a javascript variable so i can add physics to it

Posted by: admin August 19, 2018 Leave a comment

Questions:

So here is some simple physicsjs and I have a css animation that is called by divs in my index file. So the main goal of this project is to have the walls come in and bounce the ball around also the walls cant collide with any other walls or it will freak out. this is the index
http://www.fast-files.com/getfile.aspx?file=162310

require([
    full
  ],

  function(Physics) {
    Physics(function(world) {

      // bounds of the window
      var viewportBounds = Physics.aabb(0, 0, window.innerWidth, window.innerHeight),
        edgeBounce, renderer;

      // create a renderer
      renderer = Physics.renderer('canvas', {
        el: 'viewport'
      });

      // add the renderer
      world.add(renderer);
      // render on each step
      world.on('step', function() {
        world.render();
      });

      // constrain objects to these bounds
      edgeBounce = Physics.behavior('edge-collision-detection', {
        aabb: viewportBounds,
        restitution: 0.99,
        cof: 0.8
      });

      // resize events
      window.addEventListener('resize', function() {

        // as of 0.7.0 the renderer will auto resize... so we just take the values from the renderer
        viewportBounds = Physics.aabb(0, 0, renderer.width, renderer.height);
        // update the boundaries
        edgeBounce.setAABB(viewportBounds);

      }, true);

      var viewWidth = window.innerWidth,
        viewHeight = window.innerHeight,
        viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight),
        edgeBounce, renderer;

      var hsquare = [];
      for (var i = 0, l = 1; i < l; ++i) {
        Physics.noConflict = function() {

          if (window.Physics === Physics) {
            window.Physics = _Physics;
          }

          return Physics;
        };
        hsquare.push(Physics.body('rectangle', {
          width: 1920,
          height: 100,
          x: 0 + viewWidth - 0,
          y: 0 + viewHeight - 50,
          vx: 0,
          cof: 10000000,
          restitution: 0,
          label: 'box',
          styles: {

            width: 40,
            height: 40
          }
        }));
      }
      var vsquare = [];
      for (var i = 0, l = 1; i < l; ++i) {

        vsquare.push(Physics.body('rectangle', {
          width: 100,
          height: 975,
          x: 0 + viewWidth - 50,
          y: 0 + viewHeight - 0,
          vx: 0,
          cof: 10000000,
          restitution: 0,
          label: 'box',
          styles: {

            width: 40,
            height: 40
          }
        }));

      }



      function leftArrowPressed() {
        world.add(vsquare)

      }

      function rightArrowPressed() {
        world.add(hsquare)

      }

      document.onkeydown = function(evt) {
        evt = evt || window.event;
        switch (evt.keyCode) {
          case 37:
            leftArrowPressed();
            break;
          case 39:
            rightArrowPressed();
            break;
        }
      };

      var attractor = Physics.behavior('attractor', {
        order: 0,
        strength: 0.002
      });
      world.on({
        'interact:poke': function(pos) {
          world.wakeUpAll();
          attractor.position(pos);
          world.add(attractor);
        },
        'interact:move': function(pos) {
          attractor.position(pos);
        },
        'interact:release': function() {
          world.wakeUpAll();
          world.remove(attractor);
        }
      });


      world.add([
        Physics.behavior('interactive', {
          el: renderer.container
        }), Physics.behavior('constant-acceleration'), Physics.behavior('body-impulse-response'), edgeBounce
      ]);
      world.add([
        Physics.behavior('constant-acceleration'), Physics.behavior('body-collision-detection'), Physics.behavior('sweep-prune'), edgeBounce
      ]);

      world.add(Physics.body('circle', {
        x: renderer.width * 0.5,
        y: renderer.height * 0.5,
        vx: 0,
        radius: 40,
        styles: {

        }
      }));

      Physics.util.ticker.on(function(time) {
        world.step(time);

      });
    });
  });
<!-- begin snippet: js hide: false console: true babel: false -->
Answers: