Black to white and then white to black

p5.js Beginners
21 
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

22

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

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

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

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

for setting the stage to 0 just use

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
} ...
1 Like
24

I still cannot generate it …

25

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

26

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

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

1 Like
27

Sinusoidal oscillations are good to know!

Here is something for you to ponder:

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
  }

:)

2 Likes
28

Hello,

Here is a list of community guidelines:

:)

29

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:

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

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

2 Likes
30

Thank you all of you very much!

1 Like
31

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. I have tried capturing click event but not sure how to proceed. Please help.