fade in element out of object

luiseFB

hi, how can i easily fade elements in?

here my beginners idea which doesn't work...

int fade=0;

void setup(){
  size(800, 600);
  smooth();
}

void draw(){
  pattern();
}

void pattern(){

  fade++;
  if (fade == 255) {
    fade=fade;
   }

  tint(255, fade);
  fill(random(255,fade));
  noStroke();
  ellipse(random(width),random(height),11,11);

}

schotsl

You should comment your code using ctrl + o or pressing the little code button when you've selected your code, concerning your problem. to increase the fade variable without getting above 255 I would use if (fade < 255) fade ++;

This way it will only increase if fade is bellow 255 other wise it wont do anything, your current statement if (fade == 255) { fade=fade; } doesnt do anything (like the ide says) since you change fade to its self.

fill(random(255,fade)); This line doesnt create anything random, if you want a variable between fade and 255. You would have to do random(fade, 255); since the random function works like this random(MiniumValue, MaximumValue); but you put 255 as minimum and fade as maximum, since fade is either below or equal to 255 this wont create anything random

just using fill(255, 255, 255, fade) will work just fine. so your pattern void should look something like this

if (fade < 255) fade ++;
fill(255, 255, 255, fade);

noStroke(); 
ellipse(random(width),random(height),11,11);

luiseFB

thank you for answering! ok, i know how to fade in a shape with raising alpha value using ++ within the void draw(), but i want to fade in elements from another void object. every single circle should fade in when appearing... i tried many different ways, but nothing worked:(

void setup(){
  size(800, 600);
  smooth();
}

void draw(){
  pattern();
}

void pattern(){

  fill(random(255));
  noStroke();
  ellipse(random(width),random(height),11,11);
}

koogs

use the alpha value as schotsi said, the 4th argument in the color() method. HOWEVER, if you don't clear the frame with background() then you won't see the effect.

luiseFB

thank you! pls look down how it fades now... but i want each dot fading in seperatly, from its appearance, not all at the same time until it's finished...

int fade=0;

void setup(){
    size(800, 600);
  smooth();
}

void draw(){

  pattern();
}

void pattern(){
    if (fade < 255){
    fade ++;
      }else{
    fade=255;
  }
  fill(0,fade);
  noStroke();
  ellipse(random(width),random(height),11,11);
}

koogs

you only ever draw each dot once, so how can it fade in?

also ctrl-t in the processing editor will fix your indenting.

luiseFB

this is a quite complicated version, using a class. it exactly does what i want, but so complicated! isn't it possible in some easier way in processing? (..would have been so easy in flash).

ArrayList<Fad> fades = new ArrayList();

void setup() {
 size(800,800);
 smooth();
}

void draw() {
  fades.add(new Fad(random (width),random (height)));
  background(255); 
  for(int i = 0; i < fades.size(); i++){
    Fad r = fades.get(i);
    r.display();
    r.fadeIn();
  } 
}



class Fad {
  float x;
  float y;
  float rSize=random(30);
  float fade = 0;
  int r = int(random(255));
  int g = int(random(255));
  int b = int(random(255));

  Fad(float _x, float _y) {
    x = _x;
    y = _y;
  }

  void display() {
    stroke(r, g, b,fade);
    fill(r, g, b,fade);
    ellipse(x, y, rSize, rSize);

  }

  void fadeIn() {
    if (fade < 255){
      fade +=10;
    }else{
      fade=255;
    }
  }
}

TfGuy44

Looks fine to me. Each fad object represents a dot that is fading in. Since each dot has many things to know about itself - position, size, color, how much it has faded in - it makes a lot of sense to have a class for them (instead of many arrays of variables). :D