# 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:** 11\
**Page:** 2

<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 17, 2020, 3:18pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/21 "2020-12-17T15:18:47Z")

</div>

> [@CodeMasterX](#):
>
> ```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) {
>     
> }
>   
> }
> 
> ```

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

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

}

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

```

I do not know how to set the stage 0

---

<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 17, 2020, 3:19pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/22 "2020-12-17T15:19:52Z")

</div>

For the original question, I find another solution with the use of sin

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

function draw() {  
  angleMode(DEGREES);
  let s = sin(frameCount); 
  let sinColor = map(s, -1, 1, 0, 255);
  background(sinColor);
}

```

---

<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 17, 2020, 3:53pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/23 "2020-12-17T15:53:03Z")

</div>

the use of sin() and cos() are a good way to do it.

for setting the stage to 0 just use

```auto
if(stage == 0) {

} else if(stage == 1) {
   if(something) > stage = 2;
} else if (stage == 2) {
   if(something) > stage = 3;
} else if (stage == 3) {
   if(something) > stage = 0
} ...

```

---

<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 17, 2020, 4:40pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/24 "2020-12-17T16:40:09Z")

</div>

I still cannot generate it …

---

<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 17, 2020, 6:23pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/25 "2020-12-17T18:23:40Z")

</div>

Do you want more hints? Edit: I finished the program and it works. If you really want to move on from the challenge I can send it to you

---

<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 17, 2020, 9:49pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/26 "2020-12-17T21:49:36Z")

</div>

here is the blured code (hover over it and click it to view if you want) if you want view it, else don’t

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

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

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

```

edit: there was an inappropriate word so the post was flagged. No wonder there are no words like that on this forum. 0 tolerance policy. I suppose that is a good way to ensure a safe learning environment for younger people

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 18, 2020, 1:11am UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/27 "2020-12-18T01:11:38Z")

</div>

Sinusoidal oscillations are good to know!

Here is something for you to ponder:

```auto
function setup() 
  {
  createCanvas(200, 200);
  }

function draw() 
  { 
  let sinColor = int(127.5+ 127.5*sin(frameCount*TAU/720));
  background(sinColor);
  //print(sinColor) //For initial debugging
  }

```

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 18, 2020, 10:19am UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/28 "2020-12-18T10:19:42Z")

</div>

> [@CodeMasterX](#):
>
> edit: there was an inappropriate word so the post was flagged. No wonder there are no words like that on this forum. 0 tolerance policy. I suppose that is a good way to ensure a safe learning environment for younger people

Hello,

Here is a list of community guidelines:

- [Processing FAQ - Frequently asked questions](https://discourse.processing.org/faq)
- [Guidelines - Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147/4)
- [Guidelines - Answering Questions](https://discourse.processing.org/t/guidelines-answering-questions/2145/1)
- [p5.js Community Statement](https://p5js.org/community/)

`:)`

---

<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 18, 2020, 2:10pm UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/29 "2020-12-18T14:10:53Z")

</div>

Nice demo, @glv. The sinusoidal oscillation enables the transition to proceed rapidly through the medium gray center of each phase, and slowly around the black and white endpoints. The sinusoidal concept is also useful for other phenomena, such as motion, randomization, and spacings of drawn objects.

_Edit (December 18, 2020):_

Here is a revised version of the code, so that we can monitor the numerical value of the background color:

```auto
function setup() {
  createCanvas(200, 160);
  frameRate(10);
}

function draw() { 
  let sinColor = int(127.5+ 127.5*sin(frameCount*TAU/720));
  background(sinColor);
  meter(sinColor);
}
  
function meter(status) {
  push();
  fill(0);
  rect(10, height - 50, 40, 30);
  fill(255);
  text(status, 18, height - 30);
  pop();
}

```

![download](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4b993b2a5096d29fbe9ddc1efef7d7300eeb24bb.png)

Due to the sine curve, the numbers change slowly in the vicinity of 0 and 255 and rapidly in the vicinity of 127.

---

<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:** [January 6, 2021, 11:41am UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/30 "2021-01-06T11:41:26Z")

</div>

Thank you all of you very much!

---

<div class="post-metadata">

**Author:** ![victorjohn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/victorjohn/32/16596_2.png) [@victorjohn](https://discourse.processing.org/u/victorjohn)\
**Post date:** [July 5, 2022, 10:03am UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307/31 "2022-07-05T10:03:42Z")

</div>

I want to achieve something similar but black and white color should change only when the user clicks. my reference is this website - [https://darkblackscreen.com](https://darkblackscreen.com). I have tried capturing click event but not sure how to proceed. Please help.

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