fade in element out of object

edited November 2017 in Questions about Code

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);

}
Tagged:

Answers

  • edited November 2017

    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);
    
  • 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);
    }
    
  • 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.

  • 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);
    }
    
  • you only ever draw each dot once, so how can it fade in?

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

  • edited November 2017

    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;
        }
      }
    }
    
  • Answer ✓

    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

Sign In or Register to comment.