topical media & game development

talk show tell print

#javascript-processing-example-basic-transform-scale.htm / htm



  <!DOCTYPE html>
  <html><head>
  <script src="javascript-processing-example-processing.js"></script>
  <script src="javascript-processing-example-init.js"></script>
  <link rel="stylesheet" href="javascript-processing-example-style.css">
  </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
  <h2>Scale</h2>
  
  <p>by Denis Grutze. 
  
  Paramenters for the scale() function are values specified 
  as decimal percentages. For example, the method call scale(2.0) 
  will increase the dimension of the shape by 200 percent. 
  Objects always scale from the origin.</p>
  
  <p><a href="http://processing.org/learning/basics/scale.html"><b>Original Processing.org Example:</b> Scale</a><br>
  <script type="application/processing">
  float a = 0.0;
  float s = 0.0;
  
  void setup()
  {
    size(200,200);
    noStroke();
    rectMode(CENTER);
    frameRate(30);
  }
  
  void draw()
  {
    background(102);
    
    a = a + 0.04;
    s = cos(a)*2;
    
    translate(width/2, height/2);
    scale(s); 
    fill(51);
    rect(0, 0, 50, 50); 
    
    translate(75, 0);
    fill(255);
    scale(s);
    rect(0, 0, 50, 50);       
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"></div>
  
  <pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
  // unless otherwise stated.</b>
  float a = 0.0;
  float s = 0.0;
  
  void setup()
  {
    size(200,200);
    noStroke();
    rectMode(CENTER);
    frameRate(30);
  }
  
  void draw()
  {
    background(102);
    
    a = a + 0.04;
    s = cos(a)*2;
    
    translate(width/2, height/2);
    scale(s); 
    fill(51);
    rect(0, 0, 50, 50); 
    
    translate(75, 0);
    fill(255);
    scale(s);
    rect(0, 0, 50, 50);       
  }</pre>
  </body></html>
  


(C) Æliens 20/2/2008

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.