どのようにブレンドモードMULTIPLYは、すべての画像が黒にしない作り方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やGIMPで

、あなたは乗算ブレンドモードと黒と白の放射状のグラデーションを追加する場合、それは暗く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) 
    } 
} 

これは、明るいものから暗いものへとフェードする水平のグラデーションを作成します。

編集：あなたは放射状のグラデーションをしたい場合は、今あなたが互いの上にくまのトンを描画しているので、彼らはただ真っ黒になるために「積み重ね」です。あなたはサークルを減らす（例えば、1ピクセルごとではなく10ピクセルごとに）描画し、より軽く描画するという組み合わせを行う必要があります。ここでの例は次のとおり

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を投稿してください。ハードコーディングされた図形と単一のグラデーション関数があれば、実行することができれば十分です。現時点では、問題に直接関係していないものがたくさん含まれているため、コードは少し難しいです。がんばろう。