如何为我的背景设置一个变量以便稍后更改它而不将背景放入绘图中？ 我想把它保存在设置中，这样它就不会重绘
[英]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.我希望以后能够在绘图中使用 mouseOver 函数将背景从白色更改为黑色，但除非'bg'变量在绘图中，否则我不能这样做。 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>
1 个解决方案
解决方案1
0 2022-06-15 20:28:33
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.然后，在 draw() 方法上有一个 bool 来注册鼠标是否在上面。
- If true (mouseOver), then swap colour to something if false then swap colour to something else.如果为真（mouseOver），则将颜色交换为某种东西，如果为假，则将颜色交换为其他东西。
Otherwise:否则：
- Initialize the background in setup()在 setup() 中初始化背景
- Swap it to black later in draw() if != 0 (or if mouse over triggers)如果 != 0 （或者如果鼠标悬停触发），稍后在 draw() 中将其切换为黑色
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.抱歉，如果我在这里匆忙回答，但我有点看不出为什么你不能在 draw() 或任何其他变量中使用 bg 。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.