如何使混合模式乘不会在p5js所有图像黑色

Question

我有这个codepen：https://codepen.io/giorgiomartini/pen/OjQpKd?editors=0010

如果我画一些形状和一些文字，现在我婉添加的形状和之间的径向覆盖文本。

所以我创建了一个drawgradient功能，并调用它形状和文本之间：

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) 
    } 
} 

我想这个梯度有多重混合模式，所以，它使整个事情有点暗像素在渐变中较暗。

但我得到的是一个全黑覆盖...

在Photoshop或瘸子，如果添加了黑色和白色的径向渐变与乘法混合模式它使得背景暗的地方有在较暗pixles渐变......但是在p5js中它只是让所有的东西变黑。

任何想法我做错了什么？

这是的mouseClicked功能，并在底部可以看到被称为gradiend功能：

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() 

} 

Answer 1

如果你要的效果是一个线性渐变，似乎有点怪异，你在画面上画出一串椭圆。

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

你期望这行呢？

相反，如果您绘制一系列线条，每次都会稍微变暗或变浅，我认为它会更有意义。这里有一个例子：

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) 
    } 
} 

这会创建一个淡淡的水平渐变。

编辑：如果你想要一个径向渐变，现在你正在相互叠加绘制大量的黑色圆圈，所以它们会“叠加”而变得完全变黑。您需要组合绘制较少的圆圈（例如每10个像素而不是每1个像素）并将它们绘制得较浅。下面是一个例子：

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); 
    } 
} 

此代码绘制圆圈，每10个像素，和最暗的圆具有的20代替255的α。这会导致更轻的梯度。你必须使用确切的数值来获得你要的效果。

如果您有后续问题，请发布MCVE而不是整个项目。只要我们可以运行它，只需几个硬编码的形状和一个渐变函数就足够了。截至目前，你的代码有点难以调试，因为它包含了一些与问题没有直接关系的东西。祝你好运。