Smooth floating colors

[MLK]

Im new to processing
Can anyone help me make something like this to get startet

[kfrajer]

It looks like a blur effect. Do you have the original image… I mean, the base image? Consider checking Fast blur in JAVA2D

Kf

[MLK]

No, i just wanted to create this kind of look without any base image

[nicolaskellum]

You might be able to make use of Perlin Noise. You can find an example of what can be done with this here.

[jeremydouglass]

One approach is to draw random colored ellipses and apply multiple blur passes, then repeat.

How to draw an ellipse:

https://processing.org/reference/ellipse_.html

Random ellipses:

https://processing.org/examples/randomgaussian.html

How to blur:

https://processing.org/examples/blur.html

A second (much more advanced) approach would be to use PixelFlow.

[MLK]

Thanks. As i said earlier im a beginner, could you let me know how PixelFlow works?

[jeremydouglass]

Since you are a beginner, I would not necessarily recommend it to start. It is a library that you can install through Contributions Manager in PDE – there are example sketches you can then check in the PDE Examples menu under Contributed Libraries > PixelFlow. It does many things, but for achieving a drip-watercolor effect, the thing that would be most relevant to you would be fluid dynamics.

diwi/PixelFlow

[MLK]

Hmm i dont know if its a water color fx i need

I wanna make something like this where the blurring between the colors is variated

It should be more like a compact piece of code if you know what i mean

[MLK]

But maybe PixelFlow can do that too

[jeremydouglass]

Hmm. That second image has hard and soft edges and colors laid down in paths, like an adjustable airbrush effect – it is particularly visible on the left side of the orange. The first image looks more like it was created by diffusing droplets, especially the white overlays. Not sure either was algorithmically generated (rather than just created in Photoshop) – but if they were, I’m not sure they are the same algorithm.

If you want to lay down random adjustable airbrush / spray-tool operations and then blur them, here is some old example code:

https://forum.processing.org/one/topic/fill-tool-and-spray-tool-in-a-drawing-program.html

Another way to approach a problem like that is by generating random gradient masks, for solid color images, then compositing them.

[MLK]

Thanks for the reply again

Can you tell me more about the last method? Cause i would rather have something randomly generated than to draw it in a custom drawing program. If i understand it right

[jeremydouglass]

Well, for example:

First imagine random colored dots. These change whenever you press a key:

void setup() {
  noLoop();
  noStroke();
}
void draw() {
  background(255);
  for (int i=0; i<8; i++) {
    float size = random(width*0.75);
    fill(random(255),random(255),random(255),32);
    ellipse(random(width), random(height), size, size);
  }
}
void keyReleased() {
  redraw();
}

Now, instead of dots, make them brushstrokes by drawing them as random bouncing balls that leave colored trails – different sizes, directions, durations. See the classic bouncing ball example:

https://processing.org/examples/bounce.html

At this point instead of drawing an ellipse each time the balls move, you could draw with that airbrush effect, for example.

https://forum.processing.org/one/topic/fill-tool-and-spray-tool-in-a-drawing-program.html

Now that you have drawn random colored trails (whether ellipses or an airbrush speckle effect), call a blur function to blur them further together:

https://processing.org/examples/blur.html

[jeremydouglass]

Regarding the blur stage of your project specifically – I had completely forgotten that PImage / PGraphics has .filter() built-in. See the blur example from the reference:

https://processing.org/reference/PImage_filter_.html

So a much easier method of doing the blur stage than writing your own pixel blur or PShader is instead to draw onto a PGraphics rather than the main canvas, blur the results with .blur, and display them using image().

If you want to blur everything, you can also skip that step with a shortcut – call g.blur to blur the canvas directly, like this:

int count = 20;             // number of circles
int opacity = 64;           // out of 255
int blurStrength = 12;      // pixel distance
float maxSizeRatio = 0.75;  // ratio to canvas width
float whiteRatio = 0.33;    // chance of being white, out of 1.0

void setup() {
  size(400, 400);
  noStroke();
  frameRate(1);
}

void draw(){
  background(255);
  for (int i=0; i<count; i++) {
    float size = random(width * maxSizeRatio);
    if(random(1) > whiteRatio){
      fill(random(255), random(255), random(255), opacity);
    } else {
      fill(255, opacity);
    }
    ellipse(random(width), random(height), size, size);
  }
  g.filter(BLUR, blurStrength);
}

This is with simple circles and transparency – it doesn’t do any of the other things you are looking for in the composition. Try setting the blur strength to 0 to see what it is doing during the draw stage:

You could also do multi-pass blurring and / or vary the blur strength for different layers or at different stages of compositing the drawing, et cetera.

Still, it gives you an example of one way to start.

[MLK]

Another pic:

Maybe it could be a blur fx on an image
Where it kind of creates directions on the images according to colors and shapes
And then it blurs according to those directions if that makes sense

[jeremydouglass]

If you want the effect to blur “according to those directions” then you probably want to check out PixelFlow (link above) and fluid dynamics.

[MLK]

Sorry if im bad at explaining what i mean.
I want something that looks like the last pic
with pure vanilla processing code,
so it doesnt look like a bunch of blurred circles
– sorry just wanna know the easiest way to do that

[jeremydouglass]

Yes, good luck – share some code here with your experiments if you want feedback.