sample-js-processing.htm / htm
<html><head>
<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 type="text/javascript">taken from: jouz.org/static/nm1/dynamic.html
document.ready(function(){ $('body').css('cursor','auto'); }); </script> </head>
<body> <div> <center> <div class="window_content"> <script type="application/processing"> int dotnr = 100; Dot dots[] = new Dot[dotnr]; int catched = 0;
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); }
void draw() { noFill(); stroke(255); strokeWeight(2); ellipse(mouseX, mouseY, 30, 30); fill(0, 50); noStroke(); rect(0, 0, width, height);
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;
$('#log1').html("1: <b>you catched "+catched+" ball(s)</b>"); if (catched==dotnr) { window.location.reload(); } } } }
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 { 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); }
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; }
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 width="500" height="500"></canvas> <div id="log1"></div> </div> </center> </div> </body></html>
(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.