Processing 在处理中：如何使自定义函数移动？

我试着让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);
        }
    }
} 

void setup（）{
大小（500500）；
//定义渐变背景的颜色
b1=颜色（139、211、242）；
b2=颜色（212、221、198）；
noLoop（）；
}
int Y_轴=1；
int X_轴=2；
颜色b1、b2；
作废提款（）{
//梯度背景
设置梯度（0，0，500，500，b1，b2，Y_轴）；
设置梯度（0、500、540、500、b2、b1、X_轴）；
气球（）；
云（）；
}
//云状
虚空云（）{
beginShape（）；
仰泳（）；
填充（204、206、207）；
三角形（180,50,195,50,188,35）；
三角形（195,50188,65202,65）；
填补（189192193）；
三角形（1883519550202 35）；
三角形（180,50,195,50,188,65）；
三角形（202,65,195,50,209,50）；
填充（255）；
三角形（195,50209,50202,35）；
三角形（215352095022250）；
三角形（215,65202,6520950）；
填充（224231234）；
三角形（20950202 35 21535）；
三角形（209502156522250）；
endShape（）；
}
//热气球形状
空气球（）{
填充（217、105、95）；
仰泳（）；
椭圆（951009090）；
中风（242、191、128）；
行（59127130127）；
第（59、127、80、170）行；
线路（130127109170）；
beginShape（）；
仰泳（）；
填充（242、191、128）；
三角形（80、170、95、170、88、183）；
填充（203、140、103）；
三角形（8818310318395170）；
填充（191、131、96）；
三角形（95170103183110170）；
填充（140、55、70）；
三角形（591277712769143）；
三角形（8512795143105127）；
三角形（113127121143130127）；
endShape（）；
}
//梯度背景
void setGradient（整数x，整数y，浮点w，浮点h，颜色b1，颜色b2，整数轴）{
noFill（）；
如果（轴==Y_轴）{//从上到下渐变
对于（int i=y；i大家好，欢迎来到stackoverflow。您的问题中有多个问题：

我想做的是3个热气球（在不同的位置）
位置），从底部移动到顶部和3朵云（在不同的位置）
位置）从右向左移动

我还想在气球上的椭圆改变颜色时，你
用鼠标点击它们

将来，请一次只回答一个问题（这样以后其他人就更容易搜索）。当你将问题分解为以下步骤时，编写代码也更容易：

不同位置的3个热气球
从底部向顶部移动（3朵云（位于不同位置）从右向左移动。）
当你用鼠标点击气球时
…气球会改变颜色
1.不同的位置
让我们从不同的位置开始：一旦这个方法对一个人有效，它就应该对更多的人有效。但是，有多种方法可以编写它，因为您提到您是编程新手，所以让我们尽可能保持这个基础（尽管代码不会太优雅）

查看
setGradient（）
函数，您一定已经对使用参数定义和调用函数有点熟悉了。您可以将相同的逻辑应用于
balloon（）
function：只需添加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();
}

然后在
draw（）
中调用
气球（mouseX，mouseY）；
将使气球跟随鼠标

这是一种方法，但很明显，它很快就会变得非常乏味。
如果您可以移动在一次调用中绘制的所有内容呢？您可以，使用，但有一个问题：调用后，它将移动所有内容。这意味着第二个引出序号的位置将相对于第一个引出序号的位置，依此类推。要使其独立，您可以
translate（）
从第一个气球的位置返回到0,0，然后
转换（）
再次到第二个气球的位置，但同样，这会变得单调乏味。同样，处理过程中也有一些帮助：
pushMatrix（）/popMatrix（）
。
这些函数允许您将坐标系嵌套在处理的主坐标系中

调用将独立于程序的其余部分。想象一下在Illustrator/Photoshop这样的编辑器中嵌套/分组形状，以便您可以单独或一起操作它们。这是一个非常松散的定义。请务必查看教程。它详细介绍了这一点，包括嵌套形状和制作机器人：）

下面介绍如何使用

pushMatrix（）/popMatrix（）

和

translate（）

实现上述相同功能：

请注意，光标和引出序号之间存在偏移。这是因为所有形状都向右和向下绘制（较大的x、y值）。将光标想象为引出序号的“定位点”。绘制形状的坐标需要偏移到不同的位置。如果要单击气球的圆，可以使用圆的中心作为气球的“锚定”/原点：

请注意，x、y坐标的值是如何减去的（基于旧椭圆的位置）

现在，您应该能够轻松地在3个不同的位置绘制3个气球。 全部的

// 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
}

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
}

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);
        }
    }
} 

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();
}

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);
  }
}

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);
        }
    }
}