Question

0

215

Views

How can I set a variable for my background to change it later without putting background in draw? I want to keep it in setup so it doesn't redraw over

This codes a spinning circle including changing colors. I want to be able to change the background from white to black later with a mouseOver function in draw, but I cant do that unless the 'bg' variable is in draw. Is there a way to keep it in setup so I can leave the rainbow trail while still changing the color to black?

Here is the code I have so far:

let bg = 255
let hueV2 = 0
let position = 0

function setup() {
  createCanvas(500, 500)
  background(bg)
}

function draw() {
  console.log(mouseX, mouseY);
  colorMode(HSL);

  //circle with rainbow trail
  strokeWeight(13);
  stroke(hueV2, 90, 61)
  hueV2 = hueV2 + 1
  arc(410, 240, 50, 50, position, position + 0.001, OPEN);
  position += 2.5

  if (hueV2 >= 360) {
    hueV2 = 0
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-24T19:51:42.570Z

Not totally following - not sure if that is some framework or what - but in case it helps in any way.

Initialize the background with whatever colour you want. Black.
Then, on the draw() method have a bool that registers if the mouse is over.
If true (mouseOver), then swap colour to something if false then swap colour to something else.

Otherwise:

Initialize the background in setup()
Swap it to black later in draw() if != 0 (or if mouse over triggers)

Apologies if I rushed the answer here, but I kind of fail to see why you can´t use bg in draw() or any other variable.

This seems to kind of work as I think you intend:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <title></title>
</head>
<body>
<script>
let bg = 255
let hueV2 = 0
let position = 0
let swap=true

function setup() {
  createCanvas(500, 500)
  background(bg)
}

function renderstuff() {
    
  //circle with rainbow trail
  strokeWeight(13);
  stroke(hueV2, 90, 61)
  hueV2 = hueV2 + 1
  arc(410, 240, 50, 50, position, position + 0.001, OPEN);
  position += 2.5

  if (hueV2 >= 360) {
    hueV2 = 0
  }
}

function draw() {
  console.log(mouseX, mouseY);
  colorMode(HSL);
  
  if (swap==true){
    background(0)
    swap=false
  }
  renderstuff()
}
</script>
</body>
</html>

0

215

How can I set a variable for my background to change it later without putting background in draw? I want to keep it in setup so it doesn't redraw over

1 answers

0

Find remote jobs

Andres GPT