# Smooth floating colors
**URL:** https://discourse.processing.org/t/smooth-floating-colors/929
**Category:** Processing
**Created:** [June 13, 2018, 7:59pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929 "2018-06-13T19:59:08Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@MLK](https://discourse.processing.org/u/MLK)
#### Post date: [June 13, 2018, 7:59pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/1 "2018-06-13T19:59:08Z")
Im new to processing
Can anyone help me make something like this to get startet
---
### Author:  [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [June 13, 2018, 11:32pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/2 "2018-06-13T23:32:11Z")
It looks like a blur effect. Do you have the original image… I mean, the base image? Consider checking [Fast blur in JAVA2D](https://discourse.processing.org/t/fast-blur-in-java2d/690)
Kf
---
### Author:  [@MLK](https://discourse.processing.org/u/MLK)
#### Post date: [June 14, 2018, 12:32pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/3 "2018-06-14T12:32:53Z")
No, i just wanted to create this kind of look without any base image
---
### Author:  [@nicolaskellum](https://discourse.processing.org/u/nicolaskellum)
#### Post date: [June 14, 2018, 3:32pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/4 "2018-06-14T15:32:13Z")
You might be able to make use of [Perlin Noise](https://processing.org/reference/noise_.html). You can find an example of what can be done with this [here](https://processing.org/examples/noise2d.html).
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 20, 2018, 7:25pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/5 "2018-06-20T19:25:03Z")
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](https://processing.org/reference/ellipse_.html)
Random ellipses:
[https://processing.org/examples/randomgaussian.html](https://processing.org/examples/randomgaussian.html)
How to blur:
[https://processing.org/examples/blur.html](https://processing.org/examples/blur.html)
A second (much more advanced) approach would be to use PixelFlow.
---
### Author:  [@MLK](https://discourse.processing.org/u/MLK)
#### Post date: [June 20, 2018, 7:53pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/6 "2018-06-20T19:53:41Z")
Thanks. As i said earlier im a beginner, could you let me know how PixelFlow works?
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 20, 2018, 7:55pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/7 "2018-06-20T19:55:33Z")
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](https://github.com/diwi/PixelFlow)**
>
> A Processing/Java library for high performance GPU-Computing (GLSL). Fluid Simulation + SoftBody Dynamics + Optical Flow + Rendering + Image Processing + Particle Systems + Physics +... - diwi/Pixe...
---
### Author:  [@MLK](https://discourse.processing.org/u/MLK)
#### Post date: [June 20, 2018, 8:02pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/8 "2018-06-20T20:02:10Z")
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
---
### Author:  [@MLK](https://discourse.processing.org/u/MLK)
#### Post date: [June 20, 2018, 8:08pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/9 "2018-06-20T20:08:25Z")
But maybe PixelFlow can do that too
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 20, 2018, 11:08pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/10 "2018-06-20T23:08:03Z")
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](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.
---
### Author:  [@MLK](https://discourse.processing.org/u/MLK)
#### Post date: [June 20, 2018, 11:32pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/11 "2018-06-20T23:32:56Z")
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
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 21, 2018, 4:54am UTC](https://discourse.processing.org/t/smooth-floating-colors/929/12 "2018-06-21T04:54:45Z")
Well, for example:
First imagine random colored dots. These change whenever you press a key:
```auto
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](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](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](https://processing.org/examples/blur.html)
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 21, 2018, 3:54pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/13 "2018-06-21T15:54:43Z")
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](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:
```auto
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 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.
---
### Author:  [@MLK](https://discourse.processing.org/u/MLK)
#### Post date: [June 21, 2018, 8:01pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/14 "2018-06-21T20:01:39Z")
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
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 21, 2018, 10:25pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/15 "2018-06-21T22:25:13Z")
If you want the effect to blur “according to those directions” then you probably want to check out PixelFlow (link above) and fluid dynamics.
---
### Author:  [@MLK](https://discourse.processing.org/u/MLK)
#### Post date: [June 21, 2018, 11:46pm UTC](https://discourse.processing.org/t/smooth-floating-colors/929/16 "2018-06-21T23:46:44Z")
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
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 22, 2018, 1:10am UTC](https://discourse.processing.org/t/smooth-floating-colors/929/17 "2018-06-22T01:10:43Z")
Yes, good luck – share some code here with your experiments if you want feedback.