Esto codifica un círculo giratorio que incluye colores cambiantes. Quiero poder cambiar el fondo de blanco a negro más tarde con una función mouseOver en sorteo, pero no puedo hacerlo a menos que la variable 'bg' esté en sorteo. ¿Hay alguna manera de mantenerlo configurado para poder dejar el rastro del arcoíris mientras sigo cambiando el color a negro?
Aquí está el código que tengo hasta ahora:
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>No estoy totalmente de acuerdo, no estoy seguro de si se trata de algún marco o qué, pero en caso de que ayude de alguna manera.
De lo contrario:
Disculpas si apresuré la respuesta aquí, pero no veo por qué no puedes usar bg en draw() o cualquier otra variable.
Esto parece funcionar como creo que pretendes:
<!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>