在处理中：如何移动自定义函数？
我试图让3个热气球从底部移动到顶部，并且有3个云从右向左移动。
当你用鼠标点击它们时，我还想让气球上的椭圆改变颜色。
我的代码：
void setup() {
size(500, 500);
//define colors for gradient background
b1 = color(139, 211, 242);
b2 = color(212, 221, 198);
noLoop();
}
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2;
void draw() {
//gradient background
setGradient(0, 0, 500, 500, b1, b2, Y_AXIS);
setGradient(0, 500, 540, 500, b2, b1, X_AXIS);
balloon();
cloud();
}
//cloud shape
void cloud() {
beginShape();
noStroke();
fill(204, 206, 207);
triangle(180, 50, 195, 50, 188, 35);
triangle(195, 50, 188, 65, 202, 65);
fill(189, 192, 193);
triangle(188, 35, 195, 50, 202, 35);
triangle(180, 50, 195, 50, 188, 65);
triangle(202, 65, 195, 50, 209, 50);
fill(255);
triangle(195, 50, 209, 50, 202, 35);
triangle(215, 35, 209, 50, 222, 50);
triangle(215, 65, 202, 65, 209, 50);
fill(224, 231, 234);
triangle(209, 50, 202, 35, 215, 35);
triangle(209, 50, 215, 65, 222, 50);
endShape();
}
// hot air balloon shape
void balloon() {
fill(217, 105, 95);
noStroke();
ellipse(95, 100, 90, 90);
stroke(242, 191, 128);
line(59, 127, 130, 127);
line(59, 127, 80, 170);
line(130, 127, 109, 170);
beginShape();
noStroke();
fill(242, 191, 128);
triangle(80, 170, 95, 170, 88, 183);
fill(203, 140, 103);
triangle(88, 183, 103, 183, 95, 170);
fill(191, 131, 96);
triangle(95, 170, 103, 183, 110, 170);
fill(140, 55, 70);
triangle(59, 127, 77, 127, 69, 143);
triangle(85, 127, 95, 143, 105, 127);
triangle(113, 127, 121, 143, 130, 127);
endShape();
}
//gradient background
void setGradient(int x, int y, float w, float h, color b1, color b2, int axis ) {
noFill();
if (axis == Y_AXIS) { // Top to bottom gradient
for (int i = y; i <= y+h; i++) {
float inter = map(i, y, y+h, 0, 1);
color b = lerpColor(b1, b2, inter);
stroke(b);
line(x, i, x+w, i);
}
}
}
1 个答案:
答案 0 :(得分：0)
您好，欢迎来到stackoverflow。您的问题有多个问题：
我想要做的是3个热气球（不同的 位置），从底部移动到顶部和3个云（在不同的位置） 位置）从右向左移动。
我还希望气球上的椭圆会改变颜色 用鼠标点击它们。
将来请一次坚持一个问题（以便其他人在将来搜索更容易）。当你把它分解成几个步骤时，编码任何东西都会容易得多：
- 3个不同位置的热气球
- 从底部移动到顶部（3个云（在不同位置）从右向左移动。）
- 用鼠标点击气球......
- ...气球改变颜色
- 使用PVector存储位置（每个气球一个变量而不是两个）
- 为多个气球/云使用for循环（而不是复制/粘贴函数调用）。
- 将代码封装到气球和单独的Cloud类（绘图，坐标，颜色，位置等）中。查看Daniel Shiffman's Objects tutorials了解详情。
<强> 1。不同的职位 让我们从不同的立场开始：一旦这适用于一个，它应该工作更多。有很多方法可以写这个，但是，既然你提到你是编程的新手，那就让它尽可能保持基本（虽然代码不会太优雅）
查看setGradient()函数，您必须已经熟悉定义和调用带参数的函数。您可以将相同的逻辑应用于balloon()函数：只需添加x，y参数，即可在给定位置绘制气球。使用不同坐标调用相同的函数应该会导致多个气球以独立位置绘制。这意味着您将需要每个气球的x，y位置变量，但稍后会有更多。
一个重要的注意事项是，您目前正在对每个气球形状的坐标进行硬编码。要在屏幕上移动某些内容，您需要对其进行翻译，这意味着在其当前位置添加或减去某个值。你可以这样：
void balloon(int x,int y) {
fill(217, 105, 95);
noStroke();
ellipse(x+95, y+100, 90, 90);
stroke(242, 191, 128);
line(x+59, y+127, x+130, y+127);
line(x+59, y+127, x+80, y+170);
line(x+130, y+127, x+109, y+170);
beginShape();
noStroke();
fill(x+242, y+191, 128);
triangle(x+80, y+170, x+95, y+170, x+88, y+183);
fill(203, 140, 103);
triangle(x+88, y+183, x+103, y+183, x+95, y+170);
fill(191, 131, 96);
triangle(x+95, y+170, x+103, y+183, x+110, y+170);
fill(140, 55, 70);
triangle(x+59, y+127, x+77, y+127, x+69, y+143);
triangle(x+85, y+127, x+95, y+143, x+105, y+127);
triangle(x+113, y+127, x+121, y+143, x+130, y+127);
endShape();
}
然后在balloon(mouseX,mouseY);中调用draw()会使气球跟随鼠标。
这是一种方法，但显然它很快就变得相当繁琐。
如果您可以移动一次通话中绘制的所有内容，该怎么办？您可以使用translate()，但有一个问题：它会在调用之后移动所有内容。这意味着第二个气球的位置将相对于第一个气球的位置，依此类推。为了让它独立，你可以translate()从第一个球的位置回到0,0，然后translate()再次回到第二个球的位置，但是再一次，这将得到乏味。再一次，Processing中有一些东西可以帮助：pushMatrix()/popMatrix()。
这些函数允许您在Processing的主要坐标系中嵌套坐标系。在pushMatrix()/popMatrix()次调用中进行的任何转换（转换，旋转，缩放）都将独立于程序的其余部分。想象一下，在Illustrator / Photoshop等编辑器中嵌套/分组形状，以便您可以单独或一起操作它们。这是一个非常宽松的定义。请务必查看2D Transformations Processing教程。它详细介绍了这一点，包括嵌套形状和制作机器人：）
以下是如何使用pushMatrix()/popMatrix()和translate()实现上述相同的功能：
// hot air balloon shape
void balloon(int x,int y) {
//isolate coordinate system
pushMatrix();
//translate just this baloon
translate(x,y);
fill(217, 105, 95);
noStroke();
ellipse(95, 100, 90, 90);
stroke(242, 191, 128);
line(59, 127, 130, 127);
line(59, 127, 80, 170);
line(130, 127, 109, 170);
beginShape();
noStroke();
fill(242, 191, 128);
triangle(80, 170, 95, 170, 88, 183);
fill(203, 140, 103);
triangle(88, 183, 103, 183, 95, 170);
fill(191, 131, 96);
triangle(95, 170, 103, 183, 110, 170);
fill(140, 55, 70);
triangle(59, 127, 77, 127, 69, 143);
triangle(85, 127, 95, 143, 105, 127);
triangle(113, 127, 121, 143, 130, 127);
endShape();
popMatrix();
//pop back to the Processing's original coordinate system
}
请注意，光标和气球之间存在偏移。这是因为所有形状都被绘制到右侧和下侧（较大的x，y值）。想象一下，将光标定位为气球＆＃34;＃34;锚点＆＃34;。绘制的形状的坐标需要偏向不同的位置。鉴于您想要点击气球的圆圈，您可以使用圆圈的中心作为气球＆＃34;锚点＆＃34; / origin：
void balloon(float x,float y) {
//isolate coordinate system
pushMatrix();
//translate just this baloon
translate(x,y);
fill(217, 105, 95);
noStroke();
ellipse(0, 0, 90, 90);
stroke(242, 191, 128);
line(59-95, 27, 130-95, 27);
line(59-95, 27, 80-95, 70);
line(130-95, 27, 109-95, 70);
beginShape();
noStroke();
fill(242, 191, 128);
triangle(80-95, 70, 0, 70, 88-95, 83);
fill(203, 140, 103);
triangle(88-95, 83, 103-95, 83, 0, 70);
fill(191, 131, 96);
triangle(0, 70, 103-95, 83, 110-95, 70);
fill(140, 55, 70);
triangle(59-95, 27, 77-95, 27, 69-95, 43);
triangle(85-95, 27, 0, 43, 105-95, 27);
triangle(113-95, 27, 121-95, 43, 130-95, 27);
endShape();
popMatrix();
//pop back to the Processing's original coordinate system
}
注意x，y坐标的值是如何减去的（基于旧椭圆的位置）。
现在你应该可以在3个不同的位置轻松绘制3个气球。 您所要做的就是为不同的坐标设置变量（对于每个气球）并调用气球功能3次：
float ballon1X;
float ballon1Y;
float ballon2X;
float ballon2Y;
float ballon3X;
float ballon3Y;
void setup() {
size(500, 500);
//define colors for gradient background
b1 = color(139, 211, 242);
b2 = color(212, 221, 198);
// noLoop();
//randomize X positions
ballon1X = random(100,width-100);
ballon2X = random(100,width-100);
ballon3X = random(100,width-100);
//randomize y positions, keeping in mind they rise from the bottom
ballon1Y = random(height/2);
ballon2Y = random(height/2);
ballon3Y = random(height/2);
}
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2;
void draw() {
//gradient background
setGradient(0, 0, 500, 500, b1, b2, Y_AXIS);
setGradient(0, 500, 540, 500, b2, b1, X_AXIS);
balloon(ballon1X,ballon1Y);
balloon(ballon2X,ballon2Y);
balloon(ballon3X,ballon3Y);
cloud();
}
//cloud shape
void cloud() {
beginShape();
noStroke();
fill(204, 206, 207);
triangle(180, 50, 195, 50, 188, 35);
triangle(195, 50, 188, 65, 202, 65);
fill(189, 192, 193);
triangle(188, 35, 195, 50, 202, 35);
triangle(180, 50, 195, 50, 188, 65);
triangle(202, 65, 195, 50, 209, 50);
fill(255);
triangle(195, 50, 209, 50, 202, 35);
triangle(215, 35, 209, 50, 222, 50);
triangle(215, 65, 202, 65, 209, 50);
fill(224, 231, 234);
triangle(209, 50, 202, 35, 215, 35);
triangle(209, 50, 215, 65, 222, 50);
endShape();
}
// hot air balloon shape
void balloon(float x,float y) {
//isolate coordinate system
pushMatrix();
//translate just this baloon
translate(x,y);
fill(217, 105, 95);
noStroke();
ellipse(0, 0, 90, 90);
stroke(242, 191, 128);
line(59-95, 27, 130-95, 27);
line(59-95, 27, 80-95, 70);
line(130-95, 27, 109-95, 70);
beginShape();
noStroke();
fill(242, 191, 128);
triangle(80-95, 70, 0, 70, 88-95, 83);
fill(203, 140, 103);
triangle(88-95, 83, 103-95, 83, 0, 70);
fill(191, 131, 96);
triangle(0, 70, 103-95, 83, 110-95, 70);
fill(140, 55, 70);
triangle(59-95, 27, 77-95, 27, 69-95, 43);
triangle(85-95, 27, 0, 43, 105-95, 27);
triangle(113-95, 27, 121-95, 43, 130-95, 27);
endShape();
popMatrix();
//pop back to the Processing's original coordinate system
}
//gradient background
void setGradient(int x, int y, float w, float h, color b1, color b2, int axis ) {
noFill();
if (axis == Y_AXIS) { // Top to bottom gradient
for (int i = y; i <= y+h; i++) {
float inter = map(i, y, y+h, 0, 1);
color b = lerpColor(b1, b2, inter);
stroke(b);
line(x, i, x+w, i);
}
}
}
<强> 2。从下到上
就从底部移动到你而言，由于存在可用的位置变量，它只是一个问题，或者只是随着时间的推移更新y坐标。 从下到上移动意味着降低y位置：
void draw() {
//decrease ballons y position -> bottom to top
ballon1Y -= 0.25;
ballon2Y -= 0.75;
ballon3Y -= 1.15;
//gradient background
setGradient(0, 0, 500, 500, b1, b2, Y_AXIS);
setGradient(0, 500, 540, 500, b2, b1, X_AXIS);
balloon(ballon1X,ballon1Y);
balloon(ballon2X,ballon2Y);
balloon(ballon3X,ballon3Y);
cloud();
}
第3。当您使用鼠标单击气球时...
您可以使用mousePressed()进行点击。要弄清楚是否点击了一个气球，你可以使用一点三角法（毕达哥拉斯定理）来确定鼠标位置和气球位置之间的距离，然后使用dist()函数再次处理你的背部。它需要4个参数（2对x，y坐标（从 - 到））并返回一个数字：距离。如果从鼠标到气球的距离小于气球的半径，则鼠标在气球内。与添加balloon1X,balloon1Y变量的方式类似，可以添加ballonSize变量，以便可以轻松地重复使用气球绘图和点击计算。
这是一个简单的例子，如果它被点击则随机化第一个气球的坐标：
void mouseReleased(){
//check if the distance between the mouse cursor and the balloon is smaller than the ballon radius (size / 2)
if(dist(mouseX,mouseY,balloon1X,balloon1Y) < balloonSize / 2){
balloon1X = random(100,width-100);
balloon1Y = random(height/2);
}
}
<强> 4。 ......气球改变颜色
最后一步应该是微不足道的，因为可以修改balloon()以使用x,y,size参数/参数。这只是添加颜色变量的问题，如果点击气球，可以更新颜色变量。
这是一个涵盖所有4个问题的草图：
float balloon1X;
float balloon1Y;
float balloon2X;
float balloon2Y;
float balloon3X;
float balloon3Y;
float balloonSize = 90;
color balloon1Color = color(217, 105, 95);
color balloon2Color = color(217, 105, 95);
color balloon3Color = color(217, 105, 95);
void setup() {
size(500, 500);
//define colors for gradient background
b1 = color(139, 211, 242);
b2 = color(212, 221, 198);
// noLoop();
//randomize X positions
balloon1X = random(100,width-100);
balloon2X = random(100,width-100);
balloon3X = random(100,width-100);
//randomize y positions, keeping in mind they rise from the bottom
balloon1Y = random(height/2);
balloon2Y = random(height/2);
balloon3Y = random(height/2);
}
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2;
void draw() {
//decrease ballons y position -> bottom to top
balloon1Y -= 0.25;
balloon2Y -= 0.75;
balloon3Y -= 1.15;
//gradient background
setGradient(0, 0, 500, 500, b1, b2, Y_AXIS);
setGradient(0, 500, 540, 500, b2, b1, X_AXIS);
balloon(balloon1X,balloon1Y,balloonSize,balloon1Color);
balloon(balloon2X,balloon2Y,balloonSize,balloon2Color);
balloon(balloon3X,balloon3Y,balloonSize,balloon3Color);
cloud();
}
//cloud shape
void cloud() {
beginShape();
noStroke();
fill(204, 206, 207);
triangle(180, 50, 195, 50, 188, 35);
triangle(195, 50, 188, 65, 202, 65);
fill(189, 192, 193);
triangle(188, 35, 195, 50, 202, 35);
triangle(180, 50, 195, 50, 188, 65);
triangle(202, 65, 195, 50, 209, 50);
fill(255);
triangle(195, 50, 209, 50, 202, 35);
triangle(215, 35, 209, 50, 222, 50);
triangle(215, 65, 202, 65, 209, 50);
fill(224, 231, 234);
triangle(209, 50, 202, 35, 215, 35);
triangle(209, 50, 215, 65, 222, 50);
endShape();
}
// hot air balloon shape
void balloon(float x,float y,float size,color fillColor) {
//isolate coordinate system
pushMatrix();
//translate just this baloon
translate(x,y);
fill(fillColor);
noStroke();
ellipse(0, 0, size, size);
stroke(242, 191, 128);
line(59-95, 27, 130-95, 27);
line(59-95, 27, 80-95, 70);
line(130-95, 27, 109-95, 70);
beginShape();
noStroke();
fill(242, 191, 128);
triangle(80-95, 70, 0, 70, 88-95, 83);
fill(203, 140, 103);
triangle(88-95, 83, 103-95, 83, 0, 70);
fill(191, 131, 96);
triangle(0, 70, 103-95, 83, 110-95, 70);
fill(140, 55, 70);
triangle(59-95, 27, 77-95, 27, 69-95, 43);
triangle(85-95, 27, 0, 43, 105-95, 27);
triangle(113-95, 27, 121-95, 43, 130-95, 27);
endShape();
popMatrix();
//pop back to the Processing's original coordinate system
}
void mouseReleased(){
//check if the distance between the mouse cursor and the balloon is smaller than the ballon radius (size / 2)
if(dist(mouseX,mouseY,balloon1X,balloon1Y) < balloonSize / 2){
//randomize balloon 1 color
balloon1Color = color(random(127,255),random(127,255),random(127,255));
}
}
//gradient background
void setGradient(int x, int y, float w, float h, color b1, color b2, int axis ) {
noFill();
if (axis == Y_AXIS) { // Top to bottom gradient
for (int i = y; i <= y+h; i++) {
float inter = map(i, y, y+h, 0, 1);
color b = lerpColor(b1, b2, inter);
stroke(b);
line(x, i, x+w, i);
}
}
}
你可以使用p5.js在这里运行演示，这有多好？ （点击最慢的气球）
＆＃13;
＆＃13;
＆＃13;
＆＃13;
var balloon1X;
var balloon1Y;
var balloon2X;
var balloon2Y;
var balloon3X;
var balloon3Y;
var balloonSize = 90;
var balloon1Color;
var balloon2Color;
var balloon3Color;
function setup() {
createCanvas(500, 500);
//define colors for gradient background
b1 = color(139, 211, 242);
b2 = color(212, 221, 198);
// noLoop();
//randomize X positions
balloon1X = random(100,width-100);
balloon2X = random(100,width-100);
balloon3X = random(100,width-100);
//randomize y positions, keeping in mind they rise from the bottom
balloon1Y = random(height);
balloon2Y = random(height);
balloon3Y = random(height);
balloon1Color = color(217, 105, 95);
balloon2Color = color(217, 105, 95);
balloon3Color = color(217, 105, 95);
}
var Y_AXIS = 1;
var X_AXIS = 2;
var b1, b2;
function draw() {
//decrease ballons y position -> bottom to top
balloon1Y -= 0.25;
balloon2Y -= 0.75;
balloon3Y -= 1.15;
//gradient background
setGradient(0, 0, 500, 500, b1, b2, Y_AXIS);
setGradient(0, 500, 540, 500, b2, b1, X_AXIS);
balloon(balloon1X,balloon1Y,balloonSize,balloon1Color);
balloon(balloon2X,balloon2Y,balloonSize,balloon2Color);
balloon(balloon3X,balloon3Y,balloonSize,balloon3Color);
cloud();
}
//cloud shape
function cloud() {
beginShape();
noStroke();
fill(204, 206, 207);
triangle(180, 50, 195, 50, 188, 35);
triangle(195, 50, 188, 65, 202, 65);
fill(189, 192, 193);
triangle(188, 35, 195, 50, 202, 35);
triangle(180, 50, 195, 50, 188, 65);
triangle(202, 65, 195, 50, 209, 50);
fill(255);
triangle(195, 50, 209, 50, 202, 35);
triangle(215, 35, 209, 50, 222, 50);
triangle(215, 65, 202, 65, 209, 50);
fill(224, 231, 234);
triangle(209, 50, 202, 35, 215, 35);
triangle(209, 50, 215, 65, 222, 50);
endShape();
}
// hot air balloon shape
function balloon(x,y,size,fillColor) {
//isolate coordinate system
push();
//translate just this baloon
translate(x,y);
fill(fillColor);
noStroke();
ellipse(0, 0, size, size);
stroke(242, 191, 128);
line(59-95, 27, 130-95, 27);
line(59-95, 27, 80-95, 70);
line(130-95, 27, 109-95, 70);
beginShape();
noStroke();
fill(242, 191, 128);
triangle(80-95, 70, 0, 70, 88-95, 83);
fill(203, 140, 103);
triangle(88-95, 83, 103-95, 83, 0, 70);
fill(191, 131, 96);
triangle(0, 70, 103-95, 83, 110-95, 70);
fill(140, 55, 70);
triangle(59-95, 27, 77-95, 27, 69-95, 43);
triangle(85-95, 27, 0, 43, 105-95, 27);
triangle(113-95, 27, 121-95, 43, 130-95, 27);
endShape();
pop();
//pop back to the Processing's original coordinate system
}
function mouseReleased(){
//check if the distance between the mouse cursor and the balloon is smaller than the ballon radius (size / 2)
if(dist(mouseX,mouseY,balloon1X,balloon1Y) < balloonSize / 2){
//randomize balloon 1 color
balloon1Color = color(random(127,255),random(127,255),random(127,255));
}
}
//gradient background
function setGradient(x, y, w, h, b1, b2, axis ) {
noFill();
if (axis == Y_AXIS) { // Top to bottom gradient
for (var i = y; i <= y+h; i++) {
var inter = map(i, y, y+h, 0, 1);
var b = lerpColor(b1, b2, inter);
stroke(b);
line(x, i, x+w, i);
}
}
} <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script>
现在您应该了解如何为一个独立的绘图随时间设置坐标变量的动画，这意味着您可以应用相同的原则在独立坐标处绘制云并从右向左移动它们。此外，您可以在mouseReleased()事件中添加剩余的两个if条件，以更改其他两个气球的颜色。
根据您在处理课程中的位置，您可能需要考虑以下后续步骤：
通过上述内容，您应该能够组合一个漂亮，易于管理的程序，该程序可以平滑地为漂亮的气球和云设置动画，并使视差效果更加明显。玩得开心！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？