如何在处理中用渐变填充矩形或椭圆？

Question

我试图让我的球拍从白色变为渐变（线性），并使球具有径向渐变。感谢您的帮助！您可以在 void drawPaddle 中找到桨的代码。

这是我的目标：

这是我的代码： //Ball int ballX = 500; int ballY = 350; int 球高度 = 35; int 球宽度 = 35; int速度X = 4; int速度Y = 4; int 方向 X = 1;
int 方向Y = 1;

//Paddles
int player1X = 30;
int player2X = 830;
int player1Y = 350;
int player2Y = 350;

//Healthbars
int bar1X = 100;
int bar1Y = 20;
int player1health = 100;
int bar1colour = #22E515;
int bar2X = 700;
int bar2Y = 20;
int player2health = 100;
int bar2colour = #22E515;

//Movements
boolean upX = false;
boolean downX = false;
boolean upY = false;
boolean downY = false;

void setup() {
  size(900, 700);
}

void draw() {
  background(55, 68, 120);

drawPaddle();

  //EmptySpace**
  fill(55, 68, 120);
  noStroke();
  rect(player1X, player1Y, 40, 140);
  rect(player2X, player2Y, 40, 140);
  
  //Healthbars
  fill(bar1colour);
  rect(bar1X, bar1Y, player1health, 15);
  fill(bar2colour);
  rect(bar2X, bar2Y, player2health, 15);

  //Ball
  fill(194, 16, 0);
  ellipse(ballX, ballY, ballHeight, ballWidth);
  

  moveCircle();
  movePaddle();
  moveCollisions();
}

void drawPaddle() {  
  fill(255);
  noStroke();
  rect(30, 0, 40, 1000);
  rect(830, 0, 40, 1000);
}

void moveCircle() {  
  ballX = ballX + speedX * 1;
  ballY = ballY + speedY * 1;

  if (ballX > width- ballWidth +20 || ballX < ballWidth) {
    speedX *= -1;
  }
  if (ballY > height- ballHeight +20 || ballY < ballHeight) {
    speedY *= -1;
  }
}

void movePaddle() {
  //key movements
  if (upX == true) {
    player1Y = player1Y - 5;
  }
  if (downX == true) {
    player1Y = player1Y + 5;
  }
  if (upY == true) {
    player2Y = player2Y - 5;
  }
  if (downY == true) {
    player2Y = player2Y + 5;
  } 

  //Wrap around
  if (player1Y > 700) {
    player1Y = 0;
  } else if (player1Y + 140 < 0) {
    player1Y = 700;
  }
  if (player2Y > 700) {
    player2Y = 0;
  } else if (player2Y + 140 < 0) {
    player2Y = 700;
  }
}

void moveCollisions() {
  //Collisions
  if ((ballX - ballWidth / 2 < player1X + 40) && ((ballY - ballHeight / 2 > player1Y + 140) || (ballY + ballHeight / 2 < player1Y))) {
    if (speedX < 0) {
      player1health -= 20;
      speedX = -speedX*1;
      if (player1health == 20) {
        bar1colour = #F51911;
      }
    }
  } else if ((ballX + ballWidth / 2 > player2X) && ((ballY - ballHeight / 2 > player2Y + 140) || (ballY + ballHeight/2 < player2Y))) {
    if (speedX > 0) {
      player2health -= 20;
      bar2X += 20;
      speedX = -speedX*1;
      if (player2health == 20) {
        bar2colour = #F51911;
      }
    }
  }
}

void keyPressed() {
  if (key == 'w' || key == 'W') {
    upX = true;
  } else if (key == 's' || key == 'S') {
    downX = true;
  } else if (keyCode == UP) {
    upY = true;
  } else if (keyCode == DOWN) {
    downY = true;
  }
}

void keyReleased() {
  if (key == 'w' || key == 'W') {
    upX = false;
  } else if (key == 's' || key == 'S') {
    downX = false;
  } else if (keyCode == UP) {
    upY = false;
  } else if (keyCode == DOWN) {
    downY = false;
  }
}

Answer 1

您可以尝试的是为您正在绘制的每个矩形创建一个PGraphics对象，使用线性插值用渐变颜色填充它，然后而不是使用rect(x1, y1, x2, y2), in drawPaddle()use image(pgraphic, x, y)。

以下是如何在处理中使用创建渐变效果lerpColor()：

• 指定渐变的起点(x1, y1)和终点。(x2, y2)
• 将起始颜色和结束颜色设为c1和c2。
• 现在对于点 P (x, y)，计算起点和 P 之间的距离，并将其除以起点和终点之间的距离。这将是从开始颜色和结束颜色到 lerp 的“数量”。 float t = dist(x1, y1, x, y) / dist(x1, x2, y1, y2)
• 将此值放入lerpColor()as中lerpColor(c1, c2, value)。这将为您提供 P 点的颜色。
• 对要计算梯度的每个点重复相同的操作。

这是一个例子： 注意：这里，我将要调整t的量作为梯度起点之间的距离除以梯度起点和终点之间的距离，因为它始终是 0 之间的值和 1。

PGraphics g = createGraphics(50, 200); // set these values to the size(width, height) of paddle you want 
    color startColor = color(255, 25, 25); // color of start of the gradient
    color endColor   = color(25, 25, 255); // color of end of the gradient
    
    g.beginDraw(); //start drawing in this as you would draw in the screen
    g.loadPixels();//load pixels, as we are going to set the color of this, pixel-by-pixel
    
    int x1 = g.width/2;
    int y1 = 0;
    int x2 = g.width/2;
    int y2 = g.height;
    
    // (x1, y1) is the start point of gradient
    // (x2, y2) is the end point of gradient
    
    // loop through all the pixels
    for (int x=0; x<g.width; x++) {
        for (int y=0; y<g.height; y++) {
            
            //amout to lerp, the closer this is to (x2, y2) it will get closer to endColor
            float t = dist(x1, y1, x, y) / dist(x1, y1, x2, y2);
            
            // you need to convert 2D indices to 1D, as pixels[] is an 1D array
            int index = x + y * g.width;
            g.pixels[index] = lerpColor(startColor, endColor, t);
        }
    }
    g.updatePixels(); // update the pixels
    g.endDraw(); // we are done drawing into this
    
    // Now, you can draw this using image(g, x, y);

这是我在全局范围内创建它然后使用以下命令绘制它时的draw()结果image(g, width/2 ,height/2)：

现在，您可以根据自己的喜好修改所有内容。
如果它对您有任何帮助，请将此标记为答案。