# Black to white and then white to black

**URL:** <https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307>\
**Category:** Beginners\
**Created:** [December 16, 2020, 6:47pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307 "2020-12-16T18:47:10Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 16, 2020, 6:47pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/1 "2020-12-16T18:47:11Z")

</div>

Why it doesn’t work?  
Want the background turn from black to white and then white to black.  
Thank you!

let bg;

function setup() {  
createCanvas(400, 400);  
bg = 255;  
}

function draw() {  
background(bg);  
bg -= 1;  
if (bg == 0) {  
bg += 1;  
}  
}

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 7:57pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/2 "2020-12-16T19:57:38Z")

</div>

what exactly do you want to do? Swap between black and white backgrounds every frame?

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 8:00pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/3 "2020-12-16T20:00:42Z")

</div>

> [@Jayda](#):
>
> let bg;
> 
> function setup() {  
> createCanvas(400, 400);  
> bg = 255;  
> }
> 
> function draw() {  
> background(bg);  
> bg -= 1;  
> if (bg == 0) {  
> bg += 1;  
> }  
> }

i found the issue.When you get bg to 0 (bg == 0) you add 1. therefore bg is no longer 0. (bg == 1). So the next frame the statement bg == 0 is false so you decrease it by 1 again. So it continously swaps between 0 and 1

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 8:01pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/4 "2020-12-16T20:01:46Z")

</div>

do you understand? If you don’t just reply. I’m gonna be online for an hour or so.

Reply if you need any more help

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 16, 2020, 8:06pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/5 "2020-12-16T20:06:14Z")

</div>

If you would like it to gradually go back and forth between black and white repeatedly, you can do this (spoiler code below):

```auto
let bg = 255;
let direction = -1;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(bg);
  bg += direction;
  
  if (bg == 0) {
    // start brightening
    direction = 1;
  }
  if (bg == 255) {
    // start darkening
    direction = -1;
  }
}

```

_Edited on December 16, 2020 to mark spoiler code._

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 8:07pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/6 "2020-12-16T20:07:35Z")

</div>

or this:

SPOILER CODE

```auto
let bg,x=-1;

function setup() {
createCanvas(400, 400);
bg = 255;
}

function draw() {
background(bg);
bg += x;
if (bg == 0 || bg == 256) {
x*=-1;
}
}

```

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 16, 2020, 8:08pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/7 "2020-12-16T20:08:14Z")

</div>

from black gradually to white  
then white gradually to black  
and have a loop

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 8:09pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/8 "2020-12-16T20:09:14Z")

</div>

have you completed it or need help? Sorry if I’m intruding I’m just really bored

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 16, 2020, 8:12pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/9 "2020-12-16T20:12:02Z")

</div>

I am seeing u guys code

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 16, 2020, 8:25pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/10 "2020-12-16T20:25:50Z")

</div>

Thank you u guys very much!

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 8:53pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/11 "2020-12-16T20:53:58Z")

</div>

no problem. I’ll give you a challenge in return for me doing the previous one. It’s a bit harder but still. Try to make a blue \> black \> red \> black \> blue \> black \> red \> … try it. It’s a lot harder but if you use a combination of the previous solutions it should work

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 16, 2020, 9:13pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/12 "2020-12-16T21:13:23Z")

</div>

how to let the colours instead of the range from white to black?

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 9:14pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/13 "2020-12-16T21:14:42Z")

</div>

background, (255,0,0) = red, (0,255,0) = green (0,0,255) = blue  
255,255,0 ) = yellow, 255,0,255 = purple, 0,255,255 = cyan

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 9:15pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/14 "2020-12-16T21:15:25Z")

</div>

if you want I can give you hints on processing (I am not good with p5js).

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 16, 2020, 9:18pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/15 "2020-12-16T21:18:02Z")

</div>

I know the format of filling colours but do not know how to substitute in this case.  
okay thank you for your hints.

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 9:21pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/16 "2020-12-16T21:21:54Z")

</div>

I don’t know if this is too much hints but try it

```auto
int rs = 0, gs = 0, bs = -1, r = 0, g = 0, b = 255, stage = 0;

void setup() {
  
}

void draw() {
  background(r,g,b);
  b += bs;
  g += gs;
  r += rs;
  if(b == 0) {
    bs = 0;
    rs=1;
    stage = 1;
  } if(stage == 1) {
    
  }
  
}

```

edit: if you need more hints tell me. I will be online for 30 mins so just ask

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 16, 2020, 9:36pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/17 "2020-12-16T21:36:00Z")

</div>

```auto
let rs = 1,
  gs = 1,
  bs = 1,
  r = 0,
  g = 0,
  b = 255;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(r, g, b);
  b -= bs;
  g -= gs;
  r -= rs;
  if (b == 0) {
    bs = 0;
    rs = -1;
    gs = -1;
  }
  if (r == 0) {
    bs = 1;
    rs = -1;
    gs = 1;

  }

}

```

trying the loop now

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 9:37pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/18 "2020-12-16T21:37:54Z")

</div>

nice : ) good luck. It may be a bit tricky but yeah.

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 16, 2020, 9:49pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/19 "2020-12-16T21:49:17Z")

</div>

Any hints?  
need to use conditions/ frame count?

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [December 16, 2020, 9:58pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/20 "2020-12-16T21:58:44Z")

</div>

no need for frameCount. btw this is the last hint before I go to sleep.

I suggest adding “stages”. for example stage 0 = blue 255 =\> blue 0 when it hits 0 and stage == 0, set stage to 1 and proceed with 0,0,0 =\> 255,0,0 by setting rs (red speed (bad name ik)) and yeah. When it reaches 255,0,0 set to sage 2 and transition to black.

You should be able to do the rest?  
I’ll be online in ~ 9hrs. Ask any questions then

[Next page](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307.md?page=2)