topical media & game development

talk show tell print

#javascript-processing-example-basic-arrays-array.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>Array</h2>
  
  <p>An array is a list of data. Each piece of data in an array 
  is identified by an index number representing its position in 
  the array. Arrays are zero based, which means that the first 
  element in the array is [0], the second element is [1], and so on. 
  In this example, an array named "coswav" is created and
  filled with the cosine values. This data is displayed three 
  separate ways on the screen.</p>
  
  <p><a href="http://processing.org/learning/basics/array.html"><b>Original Processing.org Example:</b> Array</a><br>
  <script type="application/processing">
  size(200, 200);
  
  float[] coswave = new float[width];
  
  for(int i=0; i<width; i++) {
    float ratio = (float)i/(float)width;
    coswave[i] = abs( cos(ratio*PI) );
  }
  
  for(int i=0; i<width; i++) {
    stroke(coswave[i]*255);
    line(i, 0, i, width/3);
  }
  
  for(int i=0; i<width; i++) {
    stroke(coswave[i]*255/4);
    line(i, width/3, i, width/3*2);
  }
  
  for(int i=0; i<width; i++) {
    stroke(255-coswave[i]*255);
    line(i, width/3*2, i, height);
  }
  </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>
  size(200, 200);
  
  float[] coswave = new float[width];
  
  for(int i=0; i&lt;width; i++) {
    float ratio = (float)i/(float)width;
    coswave[i] = abs( cos(ratio*PI) );
  }
  
  for(int i=0; i&lt;width; i++) {
    stroke(coswave[i]*255);
    line(i, 0, i, width/3);
  }
  
  for(int i=0; i&lt;width; i++) {
    stroke(coswave[i]*255/4);
    line(i, width/3, i, width/3*2);
  }
  
  for(int i=0; i&lt;width; i++) {
    stroke(255-coswave[i]*255);
    line(i, width/3*2, i, height);
  }</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.