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>Not totally following - not sure if that is some framework or what - but in case it helps in any way.
Otherwise:
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>