Renderowanie mapy 2d w canvas

Question

Hejka, mam problem z renderowaniem mapy (a dokladniej szumu) w canvas. Zależy mi na efekcie 'chmury', zeby ten szum stal sie swoistym gradientem. Chciałem zrobić to w Vanilla JS, tylko nie mam za bardzo pomyslu jak to zrobić. Udało mi się otrzymać płynne przejscia tylko w pionie, dlatego wygenerowane mapy wyglądają tak:

Co mogę zrobić, żeby uzyskać wygładzanie w poziomie? Dziekuje za wszystkie odpowiedzi!
Pliki:
index.html - https://pastebin.com/0dwRtDdu
script.js - https://pastebin.com/KT7wtjqg

Answer 1

Spróbuje jakoś przeanalizować jak ten kod działa - może jakoś Ci to pomoże. Przy tym być może sam zrozumiem.

Pierwsza funkcja ( getPixels() ) - odpala funkcje rysującą pixele (drawPixels) kolejno dla współrzędnych x i y. Czyli rysuje pixel kolejno od lewego górnego rogu do prawego dolnego rogu pixel po pixelu w pętli.

Druga funkcja drawPixels rysuje kwadrat o boku 1 na 1 pixel o kolorze jaki zwraca funkcja smooth. Ten kod moim zdaniem można skrócić - nigdzie dalej nie jest wykorzystywane x i y z funkcji smooth, beginPath również jest zbędne. Można wykorzystać metodę canvas fillRect() która już rysuje wypełniony kwadrat

function drawPixels(x, y) {
    ctx.fillStyle = smooth();
    ctx.fillRect(x, y, 1, 1);
}

Trzecia funkcja - ma parametry, x i y która nie są nigdzie wykorzystywane, dlatego również nie są potrzebne w smooth. Funkcja po każdym wywołaniu zwiększa zmienną o losową liczbę z przedziału -25 do 50 i w przypadku gdy przekroczy skrajne wartości zostanie do nich zaokrąglona. To spowoduje, że częściej będzie zwracane 0 (u Ciebie kolor niebieski) lub 255 (co nie spowoduje zmiany koloru i będzie użyty poprzedni).

i najbardziej hardcorowa funkcja przypisująca kolor. Kolor zależy od przedziału w którym znajduje się liczba. I od tego zależy wzorek.

Liczba składa się z 3 składników:

- pierwszy to suma 4 liczb gdzie każda kolejna powstaje przez dodanie do poprzedniej liczby z przedziału -25-50 i podzielenie tego wszystkiego przez 20

- druga to suma 4 liczb gdzie każda kolejna powstaje przez dodanie do poprzedniej liczby z przedziału -25-50 i podzielenie tego wszystkiego przez 10

- trzecia to ta poprzednia liczba plus losowa liczba z przedziału -25-50 podzielona przez 4

W zależności co będzie wynikiem dodawania taki jest kolor - trochę ciężko (przynajmniej dla mnie) będzie wywnioskować jak ta zmienna ostatecznie powstaje)

Na końcu trochę zmieniony kod:

var canvas = document.querySelector('.cnv');
var startingPixel = Math.floor((Math.random() * 255));
var ctx = canvas.getContext('2d');
var a = [];

getPixels();
 
function getPixels() {
    for (var i = 0; i < canvas.height; i++) {
        a[i] = [];
        for (var j = 0; j < canvas.width; j++) {
            a[i][j] = j;
            drawPixels(i, j);
        }
    }
}
 
function drawPixels(x, y) {
    ctx.fillStyle = smooth();
    ctx.fillRect(x, y, 1, 1);
}
 
function getHeight() {
    startingPixel += Math.floor((Math.random() * 50) - 25);
 
    if (startingPixel >= 255) {
        startingPixel = 255;
    }
    if (startingPixel <= 0) {
        startingPixel = 0;
    }

    return startingPixel;
}
 
function smooth() {
    var corners = parseInt((getHeight() + getHeight() + getHeight() + getHeight()) / 20);
    var sides = parseInt((getHeight() + getHeight() + getHeight() + getHeight()) / 10);
    var center = parseInt((getHeight()) / 4);
    var total = parseInt(center + sides + corners);

    if (total < 30) {
        return '#3388ff';
    }
    if (total < 50) {
        return '#55aaff';
    }
    if (total < 70) {
        return '#77ccff';
    }
    if (total < 100) {
        return '#ffdd99'
    }
    if (total < 140) {
        return '#ccff77';
    }
    if (total < 180) {
        return '#44cc33';
    }
    if (total < 220) {
        return '#aaa';
    }
    if (total < 255) {
        return '#666';
    }
}

Najprostsze może się okazać zmodyfikowanie getPixel() - żeby zacząć rysowanie nie od prawego górnego rogu poziomo co piksel tylko pionowo - zmodyfikować pętle for - pomysł "na czuja".