brt wrote on May 6^th, 2010, 5:17am:


Rethink how your 'previous frames' are being displayed.  The usual approach in this situation is - each time draw() is called - determine what should and shouldn't be displayed (usually using conditions and boolean variables).  So whatever code was used to draw the elements in the 'previous frames' should exist as separate entities, either as functions or class methods, that can be called each frame if an appropriate condition is true...

This should give you greater control and also avoid the issue you're having with transparency...

ok! this is a simplyfied version of my code ( i removed a gradient on the background and a grid)
Code:

import tuioZones.*;
import oscP5.*;
import netP5.*;
TUIOzoneCollection zones;
Bolas b1 = new Bolas();
PImage butao;

void setup(){
  size(screen.width,screen.height);
  smooth();
  butao = loadImage("butao.png");
  zones=new TUIOzoneCollection(this);
  zones.setZone("zone1", 50,height-150,100,100);
  zones.setZone("zone2", width-150,height-150,100,100);
  image(butao,zones.getZoneX("zone2"),zones.getZoneY("zone2"),zones.getZoneWidth("zone2"),zones.getZoneHeight("zone2"));
  stroke(0);
  rect(zones.getZoneX("zone1"),zones.getZoneY("zone1"),zones.getZoneWidth("zone1"),zones.getZoneHeight("zone1"));
  
}

void draw(){
 
  
   if (zones.isZoneToggleOn("zone1")){
  fill(255);
    stroke(0);
    //loop();
  b1.desenhar();
  
   }
   
   if (zones.isZoneToggleOn("zone2")){
exit();
  
   }
}

  class Bolas{
 
float xplus = random(0.09);
float yplus = random(0.09);
float xinc = random(1);
float yinc = random(1);

float xx = random(width);
float yy = random(height);




void desenhar(){
  stroke(0);
//noStroke();
  
 float x3 = random(xx);
 //float y3 = noise(yy);
 float x = noise(xx)*width;
 float y = noise(yy)*height;
 xx += xplus;
 yy += yplus;
 int x2 = (int)x;
  int y2 = (int)y;
 
//color col = img.get(x2,y2);
//fill(col);
//float prop = random(90,100);
float prop = random(9,20);
 ellipse(x, y, prop, prop);
 
 

}
  }
 

as you see my bolas class is some balls moving with some perlin noise and leaving a trail and that is my the main thing about this app ( off course other things will be added later

brt wrote on May 6^th, 2010, 6:23am:

Show us your attempt.

Quote:

No wonder, as you create the graphics on each draw. You are supposed to create it once, since you must draw multiple instances of your object on it.
Move the createGraphics() call to the constructor of your object.

No need to noLoop(), I don't see how it would help.

On event to draw the button, animate it (update its position) and just draw it in draw() after the call drawing your bolas.

OK, here is what I meant. The problem was that you used width & height values while creating Bolas before calling setup() which defines the values of these variables.
Code:

Bolas b1;
PImage butao;
boolean bMoveButton, bDrawButton;
float bX, bY;
float dbX = 20, dbY = 10;

void setup() {
  size(screen.width, screen.height);
  smooth();
  // Better here as width & height variables are now defined
  b1 = new Bolas();
  butao = loadImage("D:/Dev/PhiLhoSoft/images/logo_sun_small_sdn.gif");
}

void draw() {
  background(120);
  b1.desenhar();
  if (bMoveButton) {
    dbX -= bX / width;
    dbY -= bY / height;
    bX += dbX;
    bY += dbY;
    if (bX > width / 2 - butao.width / 2) {
	bMoveButton = false;
    }
  }
  if (bDrawButton) {
    image(butao, bX, bY);
  }
}

void keyPressed() {
  if (key == 's') {
    bMoveButton = bDrawButton = true;
  }
}

void mousePressed() {
  if (mouseX > bX && mouseX < bX + butao.width &&
	mouseY > bY && mouseY < bY + butao.height) {
    bDrawButton = false;
    // Do action
  }
}

class Bolas {

float xplus = random(0.09);
float yplus = random(0.09);
float xinc = random(1);
float yinc = random(1);

float xx = random(width);
float yy = random(height);
  PGraphics cena = createGraphics(width, height, JAVA2D);

void desenhar() {
  cena.beginDraw();
  cena.smooth();
  cena.stroke(0);
//noStroke();
  
 float x3 = random(xx);
 //float y3 = noise(yy);
 float x = noise(xx)*width;
 float y = noise(yy)*height;
 xx += xplus;
 yy += yplus;
 int x2 = (int)x;
 int y2 = (int)y;
 
//color col = img.get(x2,y2);
//fill(col);
//float prop = random(90,100);
float prop = random(9,20);
 cena.ellipse(x, y, prop, prop);
 cena.endDraw();
    image(cena,0,0);
}
} 

(removed library code as I don't have them)
There is a poor attempt at easing the move of the button...

[OT] Amusing. It is just a shortcut for Philippe Lhoste, my real name, and I found that abbreviation amusing as it sounds like philo[sophy] (in English and in French) even if I have no ambition in this field!

Code:

int Y_AXIS = 1;
int X_AXIS = 2;
  b11 = color(255);
  b2 = color(#369DC9);
  setGradient(0, 0, width, height, b11, b2, Y_AXIS);   

Code:

 void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ){
  // calculate differences between color components 
  float deltaR = red(c2)-red(c1);
  float deltaG = green(c2)-green(c1);
  float deltaB = blue(c2)-blue(c1);

  // choose axis
  if(axis == Y_AXIS){
    /*nested for loops set pixels
     in a basic table structure */
    // column
    for (int i=x; i<=(x+w); i++){
	// row
	for (int j = y; j<=(y+h); j++){
	  color c = color(
	  (red(c1)+(j-y)*(deltaR/h)),
	  (green(c1)+(j-y)*(deltaG/h)),
	  (blue(c1)+(j-y)*(deltaB/h)) 
	    );
	  set(i, j, c);
	}
    }  
  }  
  else if(axis == X_AXIS){
    // column 
    for (int i=y; i<=(y+h); i++){
	// row
	for (int j = x; j<=(x+w); j++){
	  color c = color(
	  (red(c1)+(j-x)*(deltaR/h)),
	  (green(c1)+(j-x)*(deltaG/h)),
	  (blue(c1)+(j-x)*(deltaB/h)) 
	    );
	  set(j, i, c);
	}
    }  
  }

    } 

how do i put this into a PGraphic?