processing thing

by Giorgio Malvone

HTML

<title>Basic Processing</title>
<script id="processingcode" type="application/processing">
        
int width;
int height;
int diameter = 100;
color fillColor;
float x, y, vx, vy;
  
void setup() {    
     width = window.innerWidth;
     height = window.innerHeight;
     size(width, height);    
     x = width / 2;    
     y = height / 2;    
     vx = random(20.0) - 10.0;    
     vy = random(20.0) - 10.0;     
     fill(#27ae60);
     background(#e74c3c); 
};
    
  
void draw(){
    noStroke();
        fill(random(260),random(260),random(260));
     // draw the circle at the correct position
    text("HelloWorld",x, y); 
     // add velocity to the position    
     x += vx;
     y += vy;    
     // bounce off the walls    
     if (x > width) {
          x = width;
          vx *= -1.0;
     }    
     if (x < 0) {
          x = 0;
          vx *= -1.0;
     }    
     if (y > height) {
          y = height;         
          vy *= -1.0;
     }    
     if (y < 0) {
          y = 0;
          vy *= -1.0;
     }
};
    
</script>

<canvas id="canvas1"> </canvas>

CSS

body{
    overflow:hidden;
}

JavaScript

new Processing(document.getElementById("canvas1"),
               document.getElementById("processingcode").text);