шумовой градиент в p5. js - PullRequest
Новая
       50

шумовой градиент в p5. js

1 голос
/ 02 мая 2020

Цель

Часто встречающийся эффект на иллюстрациях и других графических работах c - это градиент между двумя цветами, который обеспечивается зернистостью / шумом и, таким образом, получает очень особенный эффект. (особенно пример 3.)

Мое исследование показало много решений, как добиться этого эффекта в программном обеспечении, таком как Illustrator, но я бы хотел воссоздать его с p5 js или ванильным js canvas.

enter image description here

(источник: https://medium.com/@stefanhrlemann / как создавать шумные ризографы в стиле градиентов и текстур в фотошопе -in-3-way-394d6012a93a )

Моя попытка

Я уже пытался создать градиент и установить случайный шум с указанием c цвет, используя массив пикселей поверх него. Что лишь частично приводит к желаемому эффекту: 

function draw() {
    setGradient(0, 0, width, height, color(0, 0, 0), color(255, 255 ,255));
    setNoise();
}

function setNoise() {
    loadPixels();
    for (let x = 0; x < width; x++ ) {
        for (let y = 0; y < height; y++ ) {
            if (random(1) > 0.9) {
                const index = (x + y * width) * 4;
                pixels[index] = 255;
                pixels[index + 1] = 255;
                pixels[index + 2] = 255;
                pixels[index + 3] = 255;
            }
        }
    }
    updatePixels();
}

function setGradient(x, y, w, h, c1, c2) {
    noFill();
    for (let i = y; i <= y + h; i++) {
        let inter = map(i, y, y + h, 0, 1);
        let c = lerpColor(c1, c2, inter);
        stroke(c);
        line(x, i, x + w, i);
    }
}

enter image description here

как вы думаете? это правильный подход или есть лучшее / более простое решение?

1 Ответ

2 голосов
/ 05 мая 2020

Вам нужно смешать ваш шум с градиентом. Вы не можете напрямую смешивать ImageData, вам нужно сначала преобразовать его в растровое изображение (это можно сделать на холсте). Поэтому вместо оверлея , в котором говорилось о вашем уроке, вы можете предпочесть hard-light, который изменит порядок наших слоев. 

const w = 300;
const h = 300;
const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
// some colored noise
const data = Uint32Array.from( {length: w*h }, () => Math.random() * 0xFFFFFFFF );
const img = new ImageData( new Uint8ClampedArray( data.buffer ), w, h );

ctx.putImageData( img, 0, 0 );
// first pass to convert our noise to black and transparent
ctx.globalCompositeOperation = "color";
ctx.fillRect( 0, 0, w, h );

ctx.globalCompositeOperation = "hard-light";
ctx.fillStyle = ctx.createLinearGradient( 0, 0, 0, h );
ctx.fillStyle.addColorStop( 0.1, 'white' );
ctx.fillStyle.addColorStop( 0.9, 'black' );
ctx.fillRect( 0, 0, w, h );
canvas { background: lime; }
<canvas id="canvas" height="300"></canvas>

Но смешивание требует наличия непрозрачной сцены. Если вы хотите иметь прозрачность, вам также придется использовать композитинг: 

const w = 300;
const h = 300;
const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
// some black and transparent noise
const data = Uint32Array.from( {length: w*h }, () => Math.random() > 0.5 ? 0xFF000000 : 0 );
const img = new ImageData( new Uint8ClampedArray( data.buffer ), w, h );

ctx.putImageData( img, 0, 0 );

ctx.fillStyle = ctx.createLinearGradient( 0, 0, 0, h );
ctx.fillStyle.addColorStop( 0.1, 'transparent' );
ctx.fillStyle.addColorStop( 0.9, 'black' );
// apply transparency gradient on noise (dim top)
ctx.globalCompositeOperation = "destination-in";
ctx.fillRect( 0, 0, w, h );
// apply black of the gradient on noise (darken bottom)
ctx.globalCompositeOperation = "multiply";
ctx.fillRect( 0, 0, w, h ); 

// optionally change the color of the noise
ctx.globalCompositeOperation = "source-atop";
ctx.fillStyle = "red";
ctx.fillRect( 0, 0, w, h );
canvas { background: lime; }
<canvas id="canvas" height="300"></canvas>
...