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

sample-js-processing.htm / htm



  <html><head>

processing -- motion 


  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
   
    <title>Get all 100 balls!</title>
    <link rel="stylesheet" type="text/css" href="sample-js-processing/style.css">
    <script type="text/javascript" src="sample-js-processing-jquery.js"></script>
    <script type="text/javascript" src="sample-js-processing-processing.js"></script>
    <script type="text/javascript" src="sample-js-processing-init.js"></script>

script 


    <script type="text/javascript">
  
 taken from: jouz.org/static/nm1/dynamic.html

     document.ready(function(){
     $('body').css('cursor','auto');
     });
    </script>
   </head>

body / processing script 


  <body>
  <div>
  <center>
  <div class="window_content">
  <script type="application/processing">
  int dotnr = 100;
  Dot dots[] = new Dot[dotnr];
  int catched = 0;

setup


  void setup() {
    smooth();
    size(300,300);
    for (int i = 0; i<dotnr; i++) {
      dots[i] = new Dot((int) random(0, width), (int) random(0,height));
    }
    fill(0)
    rect(0, 0, width, height);
  }

draw


  
  void draw() {
    noFill();
    stroke(255);
    strokeWeight(2);
    ellipse(mouseX, mouseY, 30, 30);
    fill(0, 50);
    noStroke();
    rect(0, 0, width, height);

process balls


    for (int i = 0; i<dotnr; i++) {
      if (dots[i] != null) {
        dots[i].nextPos();
        if (dots[i].x>width/4 && dots[i].x<width/4*3 && dots[i].y < height/12) {
          dots[i] = null;
    catched += 1;

and report


    $('#log1').html("1: <b>you catched "+catched+" ball(s)</b>");
    if (catched==dotnr) {
     window.location.reload();  
    }
     }
      }
    }

keep status


    noStroke();
    fill(255);
    rect(width/4, 0, width/2, height/12);
    fill(255,100,100);
    rect(width/4, 0, width/2, (catched)*height/12/dotnr);
  }

class Dot


  
  class Dot {
    
    int x, y, oldY, oldX;
    int r, g, b;
    
    Dot (int x, int y) {
      this.x = x;
      this.oldX = x;
      this.y = y;
      this.oldY = y;
      this.r = (int) random(0,255);
      this.g = (int) random(0,255);
      this.b = (int) random(0,255);
    }

change position


    void nextPos() {
      int moveX = (int) random(-10,10);
      int moveY = (int) random(-10,10);
      oldX = x;
      oldY = y;
      int deltaX = x-mouseX;
      int deltaY = y-mouseY;
      if (abs(deltaX)<65 && abs(deltaY)<65 && deltaX != 0 && deltaY != 0) {
        x += deltaX/abs(deltaX)*15;
        y += deltaY/abs(deltaY)*15;
      } else {
        x += moveX;
        y += moveY;
      }

test and draw


      if (x>width) x = width-5;
      if (x<0) x = 5;
      if (y<0) y = 5;
      if (y>height) y = height-5;
  
      fill(r, g, b);
      stroke(r, g, b);
      noStroke();
      ellipse(x, y, 10, 10);
      strokeWeight(10);
      line(oldX, oldY, x, y);
      noStroke();
    }
  }
  
  </script>

canvas 


  <canvas width="500" height="500"></canvas>
  <div id="log1"></div>
  </div>
  </center>
  </div>
  </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 04/09/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.