RENDERING: All CSS

2
Apr
2013

In this demo I'm going to show you how to render boxes, circles and polygons using only CSS. Here I have made use of requestAnimationFrame for better Rendering. Click here for more information on requestAnimationFrame.


Below are the important codes that are within the update() and few lines of code that follow the update().

NOTE: Boxes have it's User Data set as 'rectangle', Polygons as 'polygon' and Circles as 'circle'.
        function update() {
            world.Step(1 / 60, 10, 10);

            ctx.clearRect ( 0 , 0 , 600 , 420 ); // 600px x 420px is the size of the canvas

            for (b = world.GetBodyList() ; b; b = b.GetNext())
            {
                var angle = b.GetAngle()*(180/Math.PI);
                for(f = b.GetFixtureList(); f; f = f.GetNext()) {

                 if (b.GetUserData() == 'circle')
                 {
                     var radius = f.GetShape().GetRadius();
                     var pos = b.GetPosition();

                     ctx.save();

                     ctx.translate( pos.x * 30, pos.y * 30 );
                     ctx.rotate( angle * (Math.PI/180) );
                     ctx.translate( -pos.x * 30, -pos.y * 30 );

                     ctx.beginPath();
                     ctx.arc(pos.x * 30, pos.y * 30, radius * 30, 0, 2 * Math.PI, false);
                     ctx.closePath();
                     ctx.lineWidth = 5;
                     ctx.strokeStyle = "rgb(255, 255, 0)";
                     ctx.fillStyle = "rgb(255, 255, 255)";
                     ctx.stroke();
                     ctx.fill();

                     ctx.restore();

                  }

                  else if (b.GetUserData() == 'rectangle')
                  { 
                      var X = f.GetShape().GetVertices()[1].x - f.GetShape().GetVertices()[0].x; 
                      var Y = f.GetShape().GetVertices()[2].y - f.GetShape().GetVertices()[1].y;    
                      var pos = b.GetPosition();

                      ctx.save();

                      ctx.translate( pos.x * 30, pos.y * 30 );
                      ctx.rotate( angle * (Math.PI/180) );
                      ctx.translate( -pos.x * 30, -pos.y * 30 );

                      ctx.lineWidth = 3;
                      ctx.strokeStyle = "rgb(33, 212, 125)";
                      ctx.strokeRect(((pos.x * 30) - (X * 30 / 2)), ((pos.y * 30) - (Y * 30 / 2)), X * 30, Y * 30);
                      ctx.fillStyle = "rgb(255, 40, 100)";
                      ctx.fillRect(((pos.x * 30) - (X * 30 / 2)), ((pos.y * 30) - (Y * 30 / 2)), X * 30, Y * 30);

                      ctx.restore();

                   }

                   else if (b.GetUserData() == 'polygon')
                   {    
                      var vertices;
                      var ver = new Array;
                      var temp = new Array;
                      vertices = f.GetShape().GetVertices();
                      for(x in vertices)    {
                        temp[x] = b.GetWorldPoint(vertices[x]); 
                      }

                      ver = temp;

                      ctx.save();

                      ctx.beginPath();
                      ctx.moveTo(ver[0].x * 30, ver[0].y * 30);
                      for(var s in ver) {
                          if(s!=0)
                            ctx.lineTo(ver[s].x * 30, ver[s].y * 30);                     
                      }

                      ctx.closePath();

                      ctx.fillStyle = "#FF0000";
                      ctx.strokeStyle = "#030340";
                      ctx.lineWidth = 1;
                      ctx.stroke();
                      ctx.fill();                     

                      ctx.restore();          
                   }                   
                }
            }

            world.ClearForces();            
        };

        // requestAnim shim layer by Paul Irish
        window.requestAnimFrame =(function(){
          return  window.requestAnimationFrame       || 
                  window.webkitRequestAnimationFrame || 
                  window.mozRequestAnimationFrame    || 
                  window.oRequestAnimationFrame      || 
                  window.msRequestAnimationFrame     || 
                  function(/* function */ callback, /* DOMElement */ element){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();

        (function animloop(){
          requestAnimFrame(animloop);
          update();
        })();

Here's the link to the demo.

By administrator at 09:29:29 AM 1 Comment(s)

Comments

Thank you very much !

By lieo on 23 Jun, 2013 at 06:07:47 AM

Add a Comment

Please enter the email address.Invalid format. (Won't be Displayed)
Notify me of followup comments
Enter the displayed Code: captcha