topical media & game development

talk show tell print

#javascript-processing-example-basic-structure-loop.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>Loop</h2>
  
  <p>The loop() function causes draw() to execute
  continuously. If noLoop is called in setup()
  the draw() is only executed once. In this example
  click the mouse to execute loop(), which will
  cause the draw() the execute continuously.</p>
  
  <p><a href="http://processing.org/learning/basics/loop.html"><b>Original Processing.org Example:</b> Loop</a><br>
  <script type="application/processing">
  // The statements in the setup() function 
  // execute once when the program begins
  void setup() 
  {
    size(200, 200);  // Size should be the first statement
    stroke(255);     // Set stroke color to white
    noLoop();
  }
  
  float y = 100;
  
  // The statements in draw() are run until the 
  // program is stopped. Each statement is run in 
  // sequence and after the last line is read, the first 
  // line is run again.
  void draw() 
  { 
    background(0);   // Set the background to black
    line(0, y, width, y);  
    
    y = y - 1; 
    if (y < 0) { 
      y = height; 
    } 
  } 
  
  void mousePressed() 
  {
    loop();
  }
  </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>
  // The statements in the setup() function 
  // execute once when the program begins
  void setup() 
  {
    size(200, 200);  // Size should be the first statement
    stroke(255);     // Set stroke color to white
    noLoop();
  }
  
  float y = 100;
  
  // The statements in draw() are run until the 
  // program is stopped. Each statement is run in 
  // sequence and after the last line is read, the first 
  // line is run again.
  void draw() 
  { 
    background(0);   // Set the background to black
    line(0, y, width, y);  
    
    y = y - 1; 
    if (y &lt; 0) { 
      y = height; 
    } 
  } 
  
  void mousePressed() 
  {
    loop();
  }</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.