PhysicsJS Basic Demo Fail

Question

I'm trying to get the basic demo going for PhysicsJS but I'm getting results that I do not understand.

I have a one page HTML file as follows...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PhysicsJS</title>
  <style>
     body {
        background: white;
      }  
      #viewport {
        border: 1px solid #666;
      }
  </style>
</head>
<body>

<canvas id="viewport" width="500" height="500"></canvas>

<script src="http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.6.0/physicsjs-full-0.6.0.min.js"></script>

<script>

    Physics(function(world){

      var renderer = Physics.renderer('canvas', {
        el: 'viewport',
        width: 500,
        height: 500
      });

      world.add( renderer );

      var square = Physics.body('rectangle', {
        x: 250,
        y: 250,
        width: 50,
        height: 50
      });

      world.add( square );
      world.render();
    });

</script>

When load up this code in Safari browser I get a blank canvas with no square.

However when I open up the debugging tools and look at resources I see the square as a Base64 image.

screenshot: https://drive.google.com/file/d/0B0ANLX5liLSFM01uNmswX1VBNUE/edit?usp=sharing

I honestly don't know where I'm going wrong here and why the image is rendering as such.

Thanks in advance for any help.

Answer 1

I think this is technically a "bug". When images for bodies are first created by the renderer they are cached as images. This is done by doing:

var img = new Image();
img.src = canvas.toDataURL('image/png');
return img; //...

That means that if the image doesn't "load" the data url before the renderer tries to render it, it won't show up. This is normally not a problem because stepping and rendering happens in a loop. So the next time around it will render it just fine. But safari seems to take it's sweet time loading the data URL... so on only one render it doesn't work. If you want you can log this as a bug on github... but i doubt you need this functionality. Just set up the loop and it will work just fine :)

PhysicsJS Basic Demo Fail

Question

1 answers

solution1
0 ACCPTED 2014-09-10 15:43:37

PhysicsJS Basic Demo Fail

Question

1 answers

solution1 0 ACCPTED 2014-09-10 15:43:37

solution1
0 ACCPTED 2014-09-10 15:43:37