Black to white and then white to black

p5.js Beginners
1

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;
}
}

2

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

3

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

2 Likes
4

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

5

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

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.

1 Like
6

or this:

SPOILER CODE


































let bg,x=-1;

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

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

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

8

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

9

I am seeing u guys code

10

Thank you u guys very much!

11

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

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