Black to white and then white to black

p5.js Beginners
#12

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

#13

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

1 Like
#14

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

1 Like
#15

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

#16

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

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

#17 
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

#18

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

#19

Any hints?
need to use conditions/ frame count?

#20

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

1 Like
#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.