P5js: Cant get a radial gradient to blend in with the MULTIPLY mode....is all dark

giorgiomartini

Hi, I have a sketch which has three groups of elelements:

1. background and shapes
2. radial gradient
3. text

Here is the3 codepen: https://codepen.io/giorgiomartini/pen/GvQVxy?editors=0010

I want the gradient to be blended with the multiply mode, because the effect im trying to get is like a vignette:

But somehow when i add the multiply mode.. all i get is a dark circle...

On line 43, the mouseClicked function is called.. which executes the drawing of the shapes, then the gradient and at the end of that function the text is added.

At line 64/65 its the commented multiply blend mode.. uncomment and click on the screen to see how its not working properly.

On line 163.. there is the radial gradient function

Can anyone please tell me why the blending is not working?

kfrajer

What are you expecting from multiply? To get you the second image?

I remove your line 66 and I did the following modification:

function mouseClicked(){    

    const colsArray = randomColor({luminosity: 'light', format: 'hsl',count: 4}) 
    background(colsArray[0])
    translate(width/2, height/2)

    drawGradient()

    blendMode(LIGHTEST)  //Give it a try to either: DARKEST, LIGHTEST, MULTIPLY

     (.... the rest of your code)

There are more fixes to be done. Hopefully this will address your main question.

Kf

giorgiomartini

What im trying to get from multiply is what it normaly does in photoshop or gimp... so that the white pixels become like transparent and the black pixels stay and thus make the background darker...

In this image.. you can see:

1. there is a background in gimp
2. i add a black and white radial gradient in another layer
3. I choose multiply as blend mode for the radial layer
4. As a result the radial gets blended with the background. creating some kind of tranparency effect,

But when i use the multiply blend mode in my sketch .. all i get is a black circle.

I have edited the codepen so is easier to see the problem...

https://codepen.io/giorgiomartini/pen/GvQVxy?editors=0010

if we enable blendMode(MULTIPLY) on line 17... you can see the error.. insted of doing what happend in gimp ( or photoshop) it makes all the cicle black...

Any idea how to get to the effect in the last part of the image?

by the way you have to click on the canvas to draw the sketch

jeremydouglass

@giorgiomartini -- Your method of drawing a gradient circle is incompatible with blendMode() as you are trying to use it.

That is because you are drawing a large black circle, then a smaller gray circle, then a smaller light gray circle... until you get to a white point.

Notice that this messes up almost every blend mode. ADD, SUBTRACT, DIFFERENCE -- none of them work right if you are applying dozens of circles of different colors on top of each other. None of them will show the background through.

You probably need to render your gradient circle to an off-screen graphics buffer,

https://p5js.org/examples/structure-create-graphics.html

...then apply that to the screen as a single image with a blendMode() set.

giorgiomartini

A ha! i though that might be hapening :) will check the off screen graphics buffer... that sounds awesome! :) thaaaaaaaanks!