Control the color of the shadow with a Processing filter(BLUR).
I tried to control the situation the Processing filter(BLUR) function produced a black shadow.
I wrote a code that blurs the white circles randomly in the previous article My loving Processing must get over the p5.js drawingContext!.
Here is the drawn image.
This is the reference image drawn by the p5.js drawingContext.
off / on
— Shunsuke Takawo (@takawo) August 9, 2022
drawingContext.filter = "blur(" + int(random(15)) + "px)" pic.twitter.com/0SvEqQOrvu
I just thought 'There are different nuances between p5.js and Processing' at that time.
Why the black shadow?
@emeen231 san tweets me about the difference in the nuances. And I realized that my code produced a black shadow.
出来ました！
— え ͤみ ͫ ͤー ͤん ͛ (@emeen231) September 30, 2022
circle単位でfilter(BLUR, ～);をかけるのではなくPGraphicsごとに実行すると円の周りが黒くなることなく重なってくれます pic.twitter.com/Z4w7qo1fOb
Why the black shadow? The black reminds me of the line in the code.
p.background(0.0, 0.0);
Here is the whole code.
/**
* Stacking the random blur layers.
*
* @author @deconbatch
* @version 0.1
* @license CC0
* Processing 3.5.3
* created 2022.09.23
*/
void setup(){
size(640, 640);
int layerNum = 12; // number of layers
background(0.0);
for (int i = 0; i < layerNum; i++) {
image(
getLayer(
random(10.0) // blur randomly
),
0, 0);
}
}
/**
* getLayer : returns the blured layer.
*/
PGraphics getLayer(float _blur) {
int cNum = 24;
PGraphics p = createGraphics(width, height);
p.beginDraw();
p.background(0.0, 0.0);
p.noStroke();
p.fill(240.0);
for (int i = 0; i < cNum; i++) {
p.circle(
random(width),
random(height),
random(60.0)
);
}
p.filter(BLUR, _blur);
p.endDraw();
return p;
}
I used transparent background for stacking the layers. And the brightness of the background was zero which is black.
Let's increase the brightness value on trial.
p.background(240.0, 0.0);
The white shadow!
Control the color of the shadow.
It seems that the background color affects the shadow color. I tried the blue background for confirmation. The transparency value of the background is zero still.
p.background(64.0, 128.0, 255.0, 0.0);
How about the pink background?
p.background(255.0, 128.0, 222.0, 0.0);
I see the background color condition the shadow color.
Random background color on each layer produces the image like this.
p.colorMode(HSB, 360.0, 100.0, 100.0, 100.0);
p.background(random(210.0, 360.0), 80.0, 90.0, 0.0);
Can I change the color of the part of a shadow?
Now I can control the shadow color as one in the whole canvas. Then, can I control the color in each part of the canvas?
Something is wrong.
For example, I wrote the code below instead of 'p.background()'. It separates the canvas into four parts that have a different colors.
int div = 2;
p.blendMode(REPLACE);
p.noStroke();
for (int x = 0; x < div; x++) {
for (int y = 0; y < div; y++) {
float rw = width / div;
float rh = height / div;
p.fill(
(x * 60.0 + y * 150.0) % 360.0,
80.0,
90.0,
0.0
);
p.rect(x * rw, y * rh, rw, rh);
}
}
'p.blendMode(REPLACE);' is the key. It draws a image like this.
Yes! That's... No. Something is wrong.
You can see the left side of each rectangle has a black shadow. When I remove the transparency, the whole part of the rectangle has a color like this. So it is not the failure of painting colors.
You can see the problem well when I separate the canvas into 64 parts and set the circle color black.
I'm afraid the color value does not affect to the left side of each rectangle.
The last resort.
I've not been able to resolve this problem. My last resort is to paint the rectangles with a transparent value of 1.0 instead of 0.0.
It's not dead transparent, so the background has the color of rectangles.
Love is blind?
I may disappoint a little if the program does not work as expected. But I love problems like this also. That's because I feel Processing's handmade taste, not the ready-made practical product.
In conclusion, I'll show you the code that draws colorful shadows.
/**
* Random colorful shadows
*
* @author @deconbatch
* @version 0.1
* @license CC0
* Processing 3.5.3
* created 2022.10.08
*/
void setup(){
size(640, 640);
smooth();
int layerNum = 12; // number of the layers
background(255.0);
blendMode(SUBTRACT);
for (int i = 0; i < layerNum; i++) {
image(
getLayer(
random(10.0) // random blur
),
0, 0);
}
}
/**
* getLayer : return _blur value blured layer
*/
PGraphics getLayer(float _blur) {
PGraphics p = createGraphics(width, height);
p.beginDraw();
p.colorMode(HSB, 360.0, 100.0, 100.0, 100.0);
// random color matrix
int div = 8;
p.blendMode(REPLACE);
p.noStroke();
for (int x = 0; x < div; x++) {
for (int y = 0; y < div; y++) {
int rw = round(width / div);
int rh = round(height / div);
int rx = x * rw;
int ry = y * rh;
p.fill(
random(360.0),
90.0,
80.0,
1.0
);
p.rect(rx, ry, rw, rh);
}
}
// random located circles
int cNum = 12;
p.blendMode(BLEND);
p.fill(0.0, 0.0, 0.0, 100.0);
for (int i = 0; i < cNum; i++) {
p.circle(
random(width),
random(height),
pow(random(9.0), 2)
);
}
p.filter(BLUR, _blur);
p.endDraw();
return p;
}
For reference.
My Processing version was 'Processing 3.5.3 on Linux'.
When I tried with the 'Processing 4.0.1 on Linux' the right side and the bottom of the rectangles had a black shadow.
deconbatch
To make something is my pleasure. Having fun in endless trial-and-error. Now, I'm loving creative coding and showing some example code in my blog. Mainly creating Processing code examples.
