Processing实现可全屏移动的白色云朵图形技术问询

核心思路 #

原来的云朵用固定坐标绘制，要实现整体移动，需要把所有圆的坐标改为基于一个基准位置的相对坐标，通过修改基准位置的变量，就能让整个云朵同步移动。

基础代码框架 #

首先定义全局变量存储云朵的基准位置（以中间圆的坐标为基准），并在初始化时设置全屏：

float cloudX;
float cloudY;
color whiteCloud = #FFFFFF;
float moveSpeed = 5; // 移动速度，按需调整

void setup() {
  fullScreen(); // 启用全屏模式
  cloudX = width / 2; // 初始位置设为屏幕中央
  cloudY = height / 2;
}

在draw()中，通过基准位置加相对偏移绘制云朵：

void draw() {
  background(135, 206, 235); // 设置天空蓝背景，便于观察云朵
  stroke(whiteCloud);
  fill(whiteCloud);
  
  // 基于基准位置绘制云朵（三个圆的相对位置保持不变）
  circle(cloudX - 40, cloudY, 60);
  circle(cloudX, cloudY, 80);
  circle(cloudX + 40, cloudY, 60);
}

可选移动方案 #

方案1：键盘控制移动 #

通过方向键控制云朵上下左右移动，同时限制云朵在屏幕范围内（避免完全移出视野）：
在draw()中添加键盘检测逻辑：

void draw() {
  background(135, 206, 235);
  stroke(whiteCloud);
  fill(whiteCloud);

  // 键盘控制逻辑
  if (keyPressed) {
    // 上移：确保云朵顶部不超出屏幕
    if (keyCode == UP && cloudY > 40) {
      cloudY -= moveSpeed;
    }
    // 下移：确保云朵底部不超出屏幕
    else if (keyCode == DOWN && cloudY < height - 40) {
      cloudY += moveSpeed;
    }
    // 左移：确保云朵左侧不超出屏幕
    else if (keyCode == LEFT && cloudX > 70) {
      cloudX -= moveSpeed;
    }
    // 右移：确保云朵右侧不超出屏幕
    else if (keyCode == RIGHT && cloudX < width - 70) {
      cloudX += moveSpeed;
    }
  }

  // 绘制云朵
  circle(cloudX - 40, cloudY, 60);
  circle(cloudX, cloudY, 80);
  circle(cloudX + 40, cloudY, 60);
}

方案2：自动循环移动（左右往返） #

让云朵从屏幕左侧自动移动到右侧，完全移出后重置到左侧，实现循环：
修改draw()中的位置更新逻辑：

void draw() {
  background(135, 206, 235);
  stroke(whiteCloud);
  fill(whiteCloud);

  // 自动右移，超出屏幕右侧后重置到左侧外
  cloudX += 2;
  if (cloudX > width + 70) {
    cloudX = -70;
  }

  // 绘制云朵
  circle(cloudX - 40, cloudY, 60);
  circle(cloudX, cloudY, 80);
  circle(cloudX + 40, cloudY, 60);
}

方案3：平滑跟随鼠标（优化生硬绑定） #

如果想要跟随鼠标但避免瞬移感，用缓动算法实现平滑移动：
修改draw()中的位置更新逻辑：

void draw() {
  background(135, 206, 235);
  stroke(whiteCloud);
  fill(whiteCloud);

  // 缓动跟随鼠标，easing系数越小越平滑（取值0.01~0.1）
  float easing = 0.05;
  cloudX += (mouseX - cloudX) * easing;
  cloudY += (mouseY - cloudY) * easing;

  // 绘制云朵
  circle(cloudX - 40, cloudY, 60);
  circle(cloudX, cloudY, 80);
  circle(cloudX + 40, cloudY, 60);
}

内容的提问来源于stack exchange，提问作者anonymous_girl2023