We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
fade rectanlge (Read 1712 times)
brewthom11
fade rectanlge
Dec 29th, 2009, 7:35am  
I'm coming to Processsing from Flash and am loving it, but there are some things I can't get my head around. I'm drawn rectangles on the stage with a mouse drag-- I want the storke visible when the mouse is down, but to fade when the mouse is up. A lot of what I've found is saying to fade the background-- which I can't do as there are other things on the stage. I've reworked what I had earlier to use a rect class (overkill, I know) and tried
adding an update, but it doesn't work. Ideas? (where are my movieslips and alpha fade????)


Code:

////main class

void draw(){
  
  onOff=false;


  if ((keyPressed) && (key=='s')){
     
  
    onOff=true;
    moveX=mouseX;
    moveY=mouseY;
     
     r = new MyRect(click.x, click.y, moveX-click.x, moveY-click.y);
     r.display();
     r.update();
 

    }


///rect class


class MyRect{

 float x,y, rWidth,rHeight;
 int alfa=10;


  MyRect(float rX, float rY, float rW, float rH){

    x=rX;
    y=rY;
    rWidth=rW;
    rHeight= rH;
   // alfa= alf;
    


  }  


void display(){
  
   stroke (0,alfa);
   noFill();
    rect(x,y,rWidth,rHeight);
  
}

void update(){
  if(alfa>0){
    alfa--;
    

///etc
Back to top
 
 
blindfish
Re: fade rectanlge
Reply #1 - Dec 29th, 2009, 8:22am  
Not sure why your original code didn't work as you didn't post the full listing and it wasn't possible to test it.  In principle your update() approach should have worked (though it could just as easily have been added to the display method).  Here's a working version:

Code:
boolean pressed;
MyRect r[] = new MyRect[0];

float clickX;
float clickY;

void setup() {
 size(300,300); 
}

void draw(){
  background(255);
  
  if(pressed) {
    rect(clickX,clickY,mouseX-clickX,mouseY-clickY);
  }
  
  if(r.length > 0){
    for(int i=0; i<r.length; i++){
      r[i].display();
    }
  }
}

///rect class
class MyRect{

 float x,y, rWidth,rHeight;
 int alfa=255;

  MyRect(float rX, float rY, float rW, float rH){
    x=rX;
    y=rY;
    rWidth=rW;
    rHeight= rH;
  }  
  
  void display(){ 
     stroke (0,alfa);
     fill(100,255,155,50);
     rect(x,y,rWidth,rHeight);
     // there's no obvious reason to put this into a separate function
     if(alfa>0){
      alfa--;
    }
  }

}

void mousePressed() {
  clickX = mouseX;
  clickY = mouseY;
  pressed = true;
}

void mouseReleased() {
  pressed = false;
  r = (MyRect[]) append(r, new MyRect(clickX, clickY, mouseX-clickX, mouseY-clickY));
}


Not sure whether you allowed for multiple rectangles in your original.  Strictly speaking once the rectangle disappears it no longer needs to be drawn so should be deleted from the array...  To labour the point I gave the rectangles a transparent fill Wink

Flash to Processing is an interesting move.  There are definitely things I miss from Flash, but then when you go back to Flash you wish certain things were easier...
Back to top
 
Where is the what if the what is in why?
 
cbt3491
Re: fade rectanlge
Reply #2 - Dec 29th, 2009, 2:12pm  
Thanks. I tried using an array(admittedly- they confuse me in java). I'm putting my stripped down code here. The problem is that I want all the rectangles to remain (they do this beautifully) then fade on release. I'm not sure if/ how I need to remove them (ala removeChild in AS3 and make null) but I'm a bit stumped on how to just get them to fade. As said , this is my first full-on adventure in Processing. I'd appreciate any help anyone can offer.
Code:

//main class
boolean onOff;
int dragX,dragY,moveX, moveY;
PVector click,drag;
MyRect r;


void setup(){

 
  size (800, 800);
  frameRate(30);
  background(255);

  click= new PVector (0,0);
  drag= new PVector(0,0);
  
}



void draw(){
  onOff=false;


  if ((keyPressed) && (key=='s')){
     
    onOff=true;
    moveX=mouseX;
    moveY=mouseY;
  
    r = new MyRect(click.x, click.y, moveX-click.x, moveY-click.y);
    r.display();
    }
}
   

void mouseReleased(){


    
    drag.set(mouseX,mouseY,0);

  
}



void mousePressed(){
 
  if ((keyPressed==true) && (key== 's')){
    
    click.set(mouseX, mouseY,0);
    drag.set(mouseX, mouseY,0);

  } 
  else {

    onOff=false;
    
  }
}
//////// MyRect class


class MyRect{

  float x,y, rWidth,rHeight;
  int alfa=10;


  MyRect(float rX, float rY, float rW, float rH){

    x=rX;
    y=rY;
    rWidth=rW;
    rHeight= rH;

  }  


  void display(){

    stroke (0,alfa);
    noFill();
  
    rect(x,y,rWidth,rHeight);
    
  
}



void fade(){
    stroke (0,alfa);
   if (alfa>0){
      alfa--;
    }
     
}



}//close class

Back to top
 
 
blindfish
Re: fade rectanlge
Reply #3 - Dec 29th, 2009, 3:25pm  
Ah - I see your problem now... you're not clearing the background each frame.  That's an easy enough mistake to make when moving from Flash.

If you want to animate something in Processing you start by clearing the background and then draw your object in the new position; or in your case at its new opacity; and you do that every frame.  So you're not changing the location or opacity of the existing rectangle; you're removing it completely and drawing a new one...  I suspect Flash is nice enough to do that in the background without exposing us to the complexities involved.

So with some minor adjustments your rectangle will fade:

Code:
//main class
boolean onOff;
int dragX,dragY,moveX, moveY;
PVector click,drag;
MyRect r;

void setup(){
  size (800, 800);
  frameRate(30);
  background(255);

  click= new PVector (0,0);
  drag= new PVector(0,0);
  
}



void draw(){
  // Draw background every frame, not just in setup
  background(255);
  
  onOff=false;

  if ((keyPressed) && (key=='s')){
	onOff=true;
	moveX=mouseX;
	moveY=mouseY;
	r = new MyRect(click.x, click.y, moveX-click.x, moveY-click.y);
    }
    if(r != null){
	r.display();
    }
}
   

void mouseReleased(){
    drag.set(mouseX,mouseY,0);
}


void mousePressed(){
 
  if ((keyPressed==true) && (key== 's')){    
    click.set(mouseX, mouseY,0);
    drag.set(mouseX, mouseY,0);

  } 
  else {
    onOff=false;
    
  }
}
//////// MyRect class


class MyRect{

  float x,y, rWidth,rHeight;
  int alfa=155;
  boolean fade;


  MyRect(float rX, float rY, float rW, float rH){

    x=rX;
    y=rY;
    rWidth=rW;
    rHeight= rH;

  }  

  void display(){

    stroke (0,alfa);
    noFill();
    rect(x,y,rWidth,rHeight);
    if (alfa>0){
	  alfa--;
    }	
  }

}//close class


Of course the problem you'll find you have now is that you can only draw one rectangle at a time and that's where the array comes in; though in actual fact I'd be tempted to use an ArrayList - there's some awkward syntax involved but when working with objects they offer better functionality than plain arrays...
Back to top
 
Where is the what if the what is in why?
 
brewthom11
Re: fade rectanlge
Reply #4 - Dec 31st, 2009, 7:54am  
Thanks so much! That makes sense and I'll try that now. It's a challenge coming from Flash, but it runs so much cleaner when I can figure it out! Thanks again.  Smiley
Back to top
 
 
brewthom11
Re: fade rectanlge
Reply #5 - Dec 31st, 2009, 10:20am  
Hmm. I think this won't work for me because I have other elements that I want to keep on the stage- so replacing the background every frame won't work? Anyone have any other ideas here? I'm, creating a collage machine where one of the options is to allow the viewer to draw a rectangle the size and place the image is to load. I have that working. But I want to the rect oultine only there as a guide, which will be replaced by the image loaded. Not all of the images loaded are opaque-- so I don't want the rectangles showing underneath this. Seemed so simple in concept! Huh
Back to top
 
 
PhiLho 
Re: fade rectanlge
Reply #6 - Dec 31st, 2009, 10:44am  
Processing doesn't have a scenegraph or similar concept.
Basically, the most common workflow is to erase the sketch surface on each frame and draw everything needing to be displayed.
So you have to add some logic (usually using classes to ease the process) to manage shapes as objects that can be moved, hidden, created, deleted, etc.
Quite some work, but working at low level allows you a finer control.
Back to top
 
WWW  
brewthom11
Re: fade rectanlge
Reply #7 - Dec 31st, 2009, 11:24am  
I've created an array of rectangles-- how do I choose to "hide" or remove one? I've tried .shorten, but it didn't seem to work for me. If I could tell my file to hide an item in my array, I think this would work. I just don't understand the syntax to do this.
Back to top
 
 
PhiLho 
Re: fade rectanlge
Reply #8 - Dec 31st, 2009, 2:27pm  
As I wrote, using classes would ease the process.
But a quick workaround would be to create an array of booleans of same size as your array of rectangles: put true at the same index for a rectangle to be displayed, false if it must be skipped when re-drawing the frame.
Back to top
 
WWW  
blindfish
Re: fade rectanlge
Reply #9 - Jan 1st, 2010, 4:11am  
He is using a class Wink

...so you could add a boolean property to the class to determine if the rectangle should be displayed (simply check against it in the display method).

As I think I suggested before ArrayLists give you a bit more control when working with objects - there's even a handy remove() method (just don't try and remove anything whilst you're iterating over the container!).
Back to top
 
Where is the what if the what is in why?
 
blindfish
Re: fade rectanlge
Reply #10 - Jan 1st, 2010, 8:23am  
Actually it sounds to me like you could just build the rectangle into the class that draws the image and remove it as and when appropriate.  I've updated my previous example, replacing the array with an ArrayList.  See the commented out line required to remove an item from the ArrayList; though in this case I think it would be more appropriate to simply display the image:

Code:
boolean pressed;
ArrayList r;
PImage blindfish;

float clickX;
float clickY;

void setup() {
 size(300,300); 
 r = new ArrayList();
 blindfish = loadImage("blindfish.jpg");
}

void draw(){
  background(255);
  
  if(pressed) {
    stroke(0);
    noFill();
    rect(clickX,clickY,mouseX-clickX,mouseY-clickY);
  }
  
  if(r.size() > 0){
    for(int i=0; i<r.size(); i++){
      MyRect thisRect = (MyRect) r.get(i);
      thisRect.display();
    }
  }
}

///rect class
class MyRect{

 float x,y, rWidth,rHeight;
 int alfa=255;

  MyRect(float rX, float rY, float rW, float rH){
    x=rX;
    y=rY;
    rWidth=rW;
    rHeight= rH;
  }  
  
  void display(){ 
     if(alfa>0){
       // whilst alfa > 0 draw the rectangle:
       stroke (0,alfa);
       noFill();
       rect(x,y,rWidth,rHeight);
       alfa -= 2;
    }
    else {
      // otherwise draw the image:
      image(blindfish,x,y,rWidth,rHeight);
      // alternatively you could just remove the rect from the ArrayList
     // r.remove(this);
    }
  }
}

void mousePressed() {
  clickX = mouseX;
  clickY = mouseY;
  pressed = true;
}

void mouseReleased() {
  pressed = false;
  r.add(new MyRect(clickX, clickY, mouseX-clickX, mouseY-clickY));
}


It would be easy enough to add an image property (or perhaps filename) to the class and pass this in the constructor rather than using a single image as here...

As for the rectangle, I'm not sure why you want it to 'fade out' and not simply disappear the moment the mouse is released and be replaced by the image?
Back to top
 
Where is the what if the what is in why?
 
brewthom11
Re: fade rectanlge
Reply #11 - Jan 1st, 2010, 12:23pm  
I'll try that. Thanks. As for the fade- it's just an elegance issue-- thought it would be a nice touch. But I can live without it. Thanks for all your help blindfish! I'll give it a go and let you all know if this works!
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›