Blending fill colors across mouse movements

Processing Coding Questions
1

I saw this cool video the other day and am trying to replicate how its done.

It’s pretty straight forward but the thing I’m stuck on is how to get the drawn shapes to be more blurred and have a smooth gradient across them like the reference:

Doe anyone have any ideas of how I blend the circle colors to make them seem more like a gradient?

PImage img;
int value = 0;
int size = 50;

void setup() {
  size(640, 800);
  frameRate(60);
  img = loadImage("blue.jpg");
  img.resize(width, height);
  background(img);
}

void draw() {
  //get the color at the mouse position
  color c = img.get(mouseX, mouseY);
  
  //change the fill to that color
  fill(c);
  noStroke();
  
  //draw a circle with that color when mouse pressed
  if(mousePressed) circle(mouseX, mouseY, size);;
}
2 Likes
2

Good question!

Let’s say the circle has a diameter of 20.

You click in x,y and hold mouse down and start dragging.

Now in the moment of click he could collect all 20 colors of the pixels in the image of its line at mouseY

Upon moving the mouse use lerpColor and display circles of the color proportional to the distance of the mouse to the initial point (use dist() and then map() of the distance to get the amt parameter for lerpColor)

It’s not fully trivial and not sure if it will work

1 Like
4

This did the trick!

color getAverageColor(PImage img) {
  img.loadPixels();
  int r = 0, g = 0, b = 0;
  for (int i=0; i<img.pixels.length; i++) {
    color c = img.pixels[i];
    r += c>>16&0xFF;
    g += c>>8&0xFF;
    b += c&0xFF;
  }
  r /= img.pixels.length;
  g /= img.pixels.length;
  b /= img.pixels.length;
 
  return color(r, g, b);
}
3 Likes