Creating a background which fades trough all color values

edited May 2016 in How To...

Hello everyone, I am a beginner in processing and need some help :/ I am looking for a code that allows me to create a background which fades trough all color values. I've already searched on google without any result, just some fades from black to white. After some experimets I wasnt able to create that kind of background with an smooth fade between different colors. If anyone can come up with an easy, begginer friendly solution I would really apreciate it.

Answers

  • an animated fade? or just a graduation from one side of the screen to the other?

    https://processing.org/reference/colorMode_.html

  • edited May 2016

    It should look like this, but changing trough all color values instead of white to black:

    color fillcolour=255;
    float colourincrement=1;
    
    void setup()
    {
      size(400, 400);
      frameRate(30);
      smooth();
      noStroke();
      background(0);
    }
    
    void draw()
    {
      if (fillcolour>0) fillcolour-=colourincrement;
      background(fillcolour);
    } 
    
  • look at HSB colormode. use frameCount % (number of colors) as first argument to color().

  • Thanks koogs, but I didnt get it ^^ Im really new to processing and tried it out, without a result :(

  • well, i could write it for you but then you'd learn nothing.

    try setting colorMode(HSB, 360, 100, 100); in your setup, no other changes, see what it does...

  • it still look's the same :-S

  • edited May 2016

    that's because you're calling color() with only one parameter. try

    background(fillcolour, 50, 50);
    

    (which is another option on the background() page -

    background(v1, v2, v3)
    v1 float: red or hue value (depending on the current color mode)
    v2 float: green or saturation value (depending on the current color mode)
    v3 float: blue or brightness value (depending on the current color mode)

    )

  • edited May 2016

    Should it look like this now?

    ` color fillcolour=255; float colourincrement=1;

    void setup() { size(400, 400); colorMode(HSB, 360, 100, 100); background(fillcolour, 255, 50); frameRate(30); smooth(); noStroke(); }

    void draw() { if (fillcolour>0) fillcolour-=colourincrement; background(fillcolour); } `

  • well, it should be better indented for a start - highlight code, press ctrl-o.

    i meant the background call in draw. the one in setup is called once. the one in draw is called every frame. if you want to see changes then it's the one in draw you have to change. (the one in setup is actually unnecessary)

  • (as are the calls to smooth and noStroke)

  • edited May 2016

    now i get it :D Thats exactly what ive tried to do :3 Thank you so much! Do you know how to do it backwards? I mean, to create an endless loop?

    color fillcolour=255; float colourincrement=1; void setup() { size(400, 400); colorMode(HSB, 360, 100, 100); background(fillcolour, 255, 50); frameRate(20); } void draw() { if (fillcolour>0) fillcolour-=colourincrement; background(fillcolour, 255, 255); }

  • Answer ✓
    int x = 255;
    
    void setup() { 
      size(400, 400); 
      colorMode(HSB, 360, 100, 100); 
    }
    
    void draw(){
      x--;
      if(x==0)x=360;
      background(x, 255, 255);
    }
    
  • Thank you guys! This is so awesome :D Thanks alot!

  • edited May 2016

    I wrote it for you. Hopefully you still learned something.

  • Sure! Ive learned alot and started my first project since yesterday :) But now other problems appear and hopefully i will solve them to go on

Sign In or Register to comment.