topical media & game development

talk show tell print

#javascript-processing-example-basic-arrays-arrayobjects.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>ArrayObjects</h2>
  
  <p>Demonstrates the syntax for creating an array of custom objects.</p>
  
  <p><a href="http://processing.org/learning/basics/arrayobjects.html"><b>Original Processing.org Example:</b> ArrayObjects</a><br>
  <script type="application/processing">
  int unit = 40;
  int num;
  Module[] mods;
  
  void setup() 
  {
    size(200, 200);
    background(176);
    noStroke();
    
    num = width/unit * width/unit;
    mods = new Module[num];
    
    for (int i=0; i<height/unit; i++) {
      for(int j=0; j<height/unit; j++) {
        int index = i*height/unit + j;
        mods[index] = new Module(j*unit, i*unit, unit/2, unit/2, random(0.05, 0.8));  
      }
    }
  }
  
  void draw() 
  {
    for(int i=0; i<num; i++) {
      mods[i].update();
      mods[i].draw();
    }
  }
  
  class Module {
    float mx, my;
    int size = unit;
    float x, y = 0;
    int xdir = 1;
    int ydir = 1;
    float speed; 
    
    // Contructor (required)
    Module(float imx, float imy, float ix, float iy, float ispeed) {
      mx = imy;
      my = imx;
      x = int(ix);
      y = int(iy);
      speed = ispeed;
    }
    
    // Custom method for updating the variables
    void update() {
      x = x + (speed * xdir);
      if (x >= size || x <= 0) {
        xdir *= -1;
        x = x + (1 * xdir);
        y = y + (1 * ydir);
      }
      if (y >= size || y <= 0) {
        ydir *= -1;
        y = y + (1 * ydir);
      }
    }
    
    // Custom method for drawing the object
    void draw() {
      stroke(second()*4);
      point(mx+x-1, my+y-1);
    }
  }
  </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>
  int unit = 40;
  int num;
  Module[] mods;
  
  void setup() 
  {
    size(200, 200);
    background(176);
    noStroke();
    
    num = width/unit * width/unit;
    mods = new Module[num];
    
    for (int i=0; i&lt;height/unit; i++) {
      for(int j=0; j&lt;height/unit; j++) {
        int index = i*height/unit + j;
        mods[index] = new Module(j*unit, i*unit, unit/2, unit/2, random(0.05, 0.8));  
      }
    }
  }
  
  void draw() 
  {
    for(int i=0; i&lt;num; i++) {
      mods[i].update();
      mods[i].draw();
    }
  }
  
  class Module {
    float mx, my;
    int size = unit;
    float x, y = 0;
    int xdir = 1;
    int ydir = 1;
    float speed; 
    
    // Contructor (required)
    Module(float imx, float imy, float ix, float iy, float ispeed) {
      mx = imy;
      my = imx;
      x = int(ix);
      y = int(iy);
      speed = ispeed;
    }
    
    // Custom method for updating the variables
    void update() {
      x = x + (speed * xdir);
      if (x &gt;= size || x &lt;= 0) {
        xdir *= -1;
        x = x + (1 * xdir);
        y = y + (1 * ydir);
      }
      if (y &gt;= size || y &lt;= 0) {
        ydir *= -1;
        y = y + (1 * ydir);
      }
    }
    
    // Custom method for drawing the object
    void draw() {
      stroke(second()*4);
      point(mx+x-1, my+y-1);
    }
  }</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.