Photoshop Question posted in
The official user guide can be found here.

How to make the blend mode MULTIPLY not make all the image black in p5js – Photoshop

I have this codepen: https://codepen.io/giorgiomartini/pen/OjQpKd?editors=0010

Where I paint some shapes and some text, now I want to add a radial overlay between the shapes and the text.

So I created a drawgradient function and call it between the shapes and the text:

function drawGradient() {
  blendMode(MULTIPLY)
  for (let r = canvasX; r > 0; --r) {
    let lightnes = map(r,0,canvasX,255,0)
    fill(0, 0, lightnes)
    ellipse(0, 0, r*1.8, r*2)
  }
}

I want this gradient to have a multiply blend mode, so that it makes the whole thing a bit darker where the pixels are darker in the gradient.

But all i get is a full black overlay…

In photoshop or gimp, if you add a black and white radial gradient with a multiply blend mode it makes the background darker where there are darker pixles in the gradient.. but here in p5js it just makes everything black.

any ideas what am I doing wrong?

This is the mouseClicked function, and at the bottom, you can see the gradient function being called:

function mouseClicked(){

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



    //////////////////////////////////////////////////////////////////          amt              initial       range
    const arrayOfRandomNumsOfFirstProbStepX  = createArrayOfRandomNums(amtOfSpotsInFirstProb,startProbStep,firstProbStepX)
    const arrayOfRandomNumsOfFirstProbStepY  = createArrayOfRandomNums(amtOfSpotsInFirstProb,startProbStep,firstProbStepY)

    const arrayOfRandomNumsOfSecondProbStepX = createArrayOfRandomNums(amtOfSpotsInSecondProb,startProbStep,secondProbStepX) 
    const arrayOfRandomNumsOfSecondProbStepY = createArrayOfRandomNums(amtOfSpotsInSecondProb,startProbStep,secondProbStepY)

    drawLinesAtRandomspots(6,random(50),colsArray)

    //args => element, arrayOfRandomNumsOfProbStepX, arrayOfRandomNumsOfProbStepY, elmntSizeMin, elmntSizeMax,rot, colors
    drawElmntsOnSomeProbabilityStep('ellipse',arrayOfRandomNumsOfFirstProbStepX, arrayOfRandomNumsOfFirstProbStepY , 10, 80, true, colsArray )
    drawElmntsOnSomeProbabilityStep('rect',arrayOfRandomNumsOfSecondProbStepX, arrayOfRandomNumsOfSecondProbStepY, 5, 30, true, colsArray)   
   drawGradient()
     addText() 

}
Tags:

2

Answers


  1. 0

    If the effect you’re going for is a linear gradient, it seems a little weird that you’re drawing a bunch of ellipses to the screen.

    ellipse(0, 0, r*1.8, r*2)

    What do you expect this line to do?

    Instead, I would think it would make more sense if you would draw a series of lines, a little bit darker or lighter each time. Here’s an example:

    function drawGradient() {
  blendMode(MULTIPLY);
  for (let lineX = 0; lineX < width; lineX++) {
    let lightness = map(lineX, 0, width, 0, 255);
    stroke(0, lightness)
    line(lineX, 0, lineX, height)
  }
}

    This creates a horizontal gradient that fades from light to dark.

    Edit: If you want a radial gradient, right now you’re drawing a ton of dark circles on top of each other, so they’re “stacking” to just become entirely black. You need to do a combination of drawing fewer circles (every 10 pixels instead of every 1 pixel, for example) and drawing them lighter. Here’s an example:

    function drawGradient() {
  blendMode(MULTIPLY);
  for (let r = 600; r > 0; r-=10) {
    let lightness = map(r, 0, 600, 20, 0);
    fill(0, lightness);
    noStroke();
    ellipse(0, 0, r, r);
  }
}

    This code draws circles every 10 pixels, and the darkest circle has an alpha of 20 instead of 255. This causes a much lighter gradient. You’ll have to play with the exact values to get the effect you’re going for.

    If you have a follow-up question, please post a MCVE instead of your whole project. Just a couple of hard-coded shapes and a single gradient function would be enough, as long as we can run it. As of now your code is a little hard to debug because it contains a bunch of stuff not directly related to the problem. Good luck.

    Login or Signup to reply.
  2. 0

    Placing clear() at the beginning of the draw() function will clear the pixels within a buffer. This lets you use blendMode(MULTIPLY) without your overlapping shapes turning black after the first few frames.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search