Processing：如何实现鼠标绘制图形的颜色模糊渐变融合效果

Hey there! I see you're trying to replicate that soft, color-fused effect from the Instagram video—awesome project! Your current code draws solid, hard-edged circles, which is why they aren't blending into that smooth gradient look. Let's fix that with a few targeted tweaks to your Processing sketch.

Key Fixes for Blurred, Blended Circles #

1. Use Transparent Fill + Blend Modes #

Opaque circles can't merge smoothly—switch to semi-transparent fill so overlapping circles build up color gradually. Pair this with a blend mode that enhances color fusion, like ADD or SCREEN.

2. Add Soft Edges (Blur) #

You can either apply a light blur filter or pre-draw a blurred circle to a buffer (for better performance) to avoid sharp edges.

3. Tweak Size & Opacity #

Adjusting these values will help the circles merge into a natural, gradient-like effect instead of looking like distinct shapes.

Modified Code (Simple, Quick Fix) #

PImage img; 
int value = 0; 
int circleSize = 50; // Renamed to avoid conflict with Processing's built-in `size()`
float alpha = 30; // Transparency (0-255: lower = more see-through)

void setup() { 
  size(640, 800); 
  frameRate(60); 
  img = loadImage("blue.jpg"); 
  img.resize(width, height); 
  background(img); 
  blendMode(ADD); // Makes overlapping colors merge and brighten
} 

void draw() { 
  if(mousePressed) {
    // Get color from the image and add transparency
    color c = img.get(mouseX, mouseY);
    c = color(red(c), green(c), blue(c), alpha);
    
    noStroke(); 
    fill(c); 
    circle(mouseX, mouseY, circleSize); 
    
    // Optional: Uncomment for subtle edge blur (note: can slow down framerate)
    // filter(BLUR, 1);
  }
}

Quick Explanation:

• blendMode(ADD): This makes overlapping colors combine instead of covering each other, creating that smooth gradient effect where circles meet.
• Transparent Fill: The alpha value lets each circle layer over the last, building up color gradually.
• Renamed size: Avoids conflict with Processing's core size() function—always a good habit for clean code!

Advanced Version (Better Blur Control & Performance) #

If you want precise soft edges without slowing down your sketch with repeated blurs, use a PGraphics buffer to pre-draw a blurred circle:

PImage img; 
int circleSize = 50; 
float alpha = 40;
PGraphics blurredCircle;

void setup() { 
  size(640, 800); 
  frameRate(60); 
  img = loadImage("blue.jpg"); 
  img.resize(width, height); 
  background(img); 
  blendMode(SCREEN); // Softer blend alternative to ADD
  
  // Create a reusable blurred circle buffer
  blurredCircle = createGraphics(circleSize, circleSize);
  blurredCircle.beginDraw();
  blurredCircle.background(0, 0); // Transparent background
  blurredCircle.fill(255);
  blurredCircle.noStroke();
  blurredCircle.circle(circleSize/2, circleSize/2, circleSize);
  blurredCircle.filter(BLUR, 5); // Adjust blur strength here (higher = softer)
  blurredCircle.endDraw();
} 

void draw() { 
  if(mousePressed) {
    color c = img.get(mouseX, mouseY);
    // Tint the pre-blurred circle with the sampled image color
    tint(red(c), green(c), blue(c), alpha); 
    image(blurredCircle, mouseX - circleSize/2, mouseY - circleSize/2);
  }
}

Why This Works:

• PGraphics Buffer: We draw one blurred circle once in setup(), then reuse it by tinting it with your image's colors. This is way more efficient than applying a blur filter every frame.
• tint(): Applies the exact color from your image to the soft-edged circle, keeping the blur while matching your source material.

Final Pro Tips #

• Play with alpha, circle size, and blur amount to nail the exact look—lower alpha + larger circles will create a more gradual, smooth gradient.
• Experiment with blend modes: SCREEN gives a muted, soft blend, while ADD creates brighter, more intense color merging.

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