Processing脚本修改需求：实现带指甲的手指跟随鼠标光标

核心思路是保留现有鼠标跟随逻辑，将最后绘制椭圆的代码替换为带指甲的手指图形即可。以下是具体修改方案：

步骤1：优化跟随平滑度（可选） #

原代码中鼠标跟随是瞬间到位，若想让移动更自然，可给位移添加缓动系数，修改后的跟随逻辑如下：

float targetX = mouseX;
float dx = targetX - x;
x += dx * 0.1; // 系数越小，跟随越平滑，范围0~1

float targetY = mouseY;
float dy = targetY - y;
y += dy * 0.1;

步骤2：替换椭圆为带指甲的手指 #

删除原代码最后一行的ellipse(x, y, 20, 20);，替换为以下绘制手指的代码块（以(x,y)作为指尖位置，通过坐标偏移让图形更协调）：

// 绘制指甲（浅米色椭圆，对应指尖）
fill(255, 240, 220);
ellipse(x, y, 12, 18);

// 绘制手指主体（肤色圆角矩形）
fill(240, 210, 180);
rect(x-6, y+5, 12, 30, 6); // 圆角半径6，让手指边缘更柔和

修改后的完整代码 #

float x = 100;
float y = 100;

void setup() {
  size(360, 600);
}


void draw() {
  background(220, 220, 220);
  strokeWeight(1);
  
  fill(180, 180, 180);
  rect(20, 20, 320, 280);
  
  fill(200, 225, 150);
  square(60, 40, 240);
  
  fill(0);
  rect(60, 380, 40, 120); 
  rect(20, 422, 120, 35); 
  

  fill(200, 50, 255);
  circle(240, 440, 40); 
  circle(300, 440, 40); 
  
  
  fill(180, 180, 180);
  rect(120, 540, 40, 20);
  rect(195, 540, 40, 20);


  fill(150, 150, 150);
  circle(80, 440, 20);

  line(260, 540, 300, 580);
  line(280, 520, 320, 560);
  line(300, 500, 340, 540);
  
  fill(230, 220, 180);
  rect(140, 240, 80, 160, 40, 40, 0, 0);
  fill(255);
  rect(160, 240, 40, 40, 20, 20, 0, 0);
  
  float targetX = mouseX;
  float dx = targetX - x;
  x += dx * 0.1;
  
  float targetY = mouseY;
  float dy = targetY - y;
  y += dy * 0.1;
  
  // 绘制带指甲的手指
  fill(255, 240, 220);
  ellipse(x, y, 12, 18);
  
  fill(240, 210, 180);
  rect(x-6, y+5, 12, 30, 6);
}

自定义调整方向 #

• 可以修改指甲和手指的颜色值，匹配你想要的风格；
• 调整椭圆、矩形的尺寸和偏移量，优化手指比例；
• 若需要手指随鼠标移动方向改变朝向，可结合translate()和rotate()函数实现角度旋转。

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