topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-graphic-canvas-mix.htm / htm



  <html><head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  
          <script src="lib-present-graphic-canvas-processing.js"></script>
          <script src="lib-present-graphic-canvas-mix.js"></script>
  <script>
  window.onload = function(){
          //var elem = document.createElement("canvas");
          //elem.width = 500;
          //elem.height = 500;
          //document.body.appendChild( elem );
          process();
          
          var elem = document.getElementById("canvas"); 
          var context = elem.getContext("2d");
          
          context.fillRect(0, 0, elem.width, elem.height);
          
          var pos = 0, dir = 1;
          
          if (1) setInterval(function(){
                  context.rotate( 15 );
                  
                  context.fillStyle = "rgba(0,0,0,0.05)";
                  context.fillRect(0, 0, elem.width, elem.height);
                  
                  context.fillStyle = "rgba(0, 0, 255, 1)";
                  context.fillRect(pos, pos, 20, 20);
                  
                  pos += dir;
                  
                  if ( pos > elem.width ) {
                          dir = -1;
                  } else if ( pos + 20 < 0 ) {
                          dir = 1;
                  }
          }, 10);
          process();
  };
  </script>
  </head><body>
  <div>
  <script id="script" type="application/processing">
  int pos = 0, dir = 1;
  
  void setup(){
          size(500, 500);
          noStroke();
          background( 0 );
  }
  
  void draw(){
          rotate( 15 * pos );
          
          fill(0, 10);
          rect(0, 0, width, height);
          
          fill(255, 0, 0);
          rect( pos, pos, 20, 20 );
          
          pos += dir;
          
          if ( pos > width ) {
                  dir = -1;
          } else if ( pos + 20 < 0 ) {
                  dir = 1;
          }
  }
  </script>
  <canvas id="canvas" height="500" width="500"></canvas>
  </div>
  end of canvas
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 27/08/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.