​

const colors = [

    { "color": "#ecd2b0", "importance": 4 },

    { "color": "#efcea5", "importance": 1 },

    { "color": "#e7b987", "importance": 3 },

    { "color": "#e0ab84", "importance": 2 },

    { "color": "#e7eceb", "importance": 2 },

    { "color": "#72adc5", "importance": 2 },

    { "color": "#3783af", "importance": 2 },

    { "color": "#06649c", "importance": 2 },

    { "color": "#0258a3", "importance": 2 },

    { "color": "#0452a8", "importance": 2 }

]

​

function setup() {

    createCanvas(400, 500);

    noLoop();

}

​

async function draw() {

    background(colors[colors.length - 1].color);

​

    // calculate importance point to width

    importanceTotal = 0;

    importanceArr = [];

    for (let i = colors.length - 1; i >=0; i--) {

        importanceTotal += colors[i].importance;

        importanceArr[i] = colors[i].importance;

    }

    importancePointToPixel = width / importanceTotal;

​

    prefixSum = fillPrefixSum(importanceArr);

​

    for (let i = colors.length - 1; i >= 0; i--) {

        stroke(colors[i].color);

        // await sleep(100);

        await drawWaveWithNoise(prefixSum[i] * importancePointToPixel);

    }

}

​

function drawWaveWithNoise(widthOffset) {

    noiseLevel = random(70, 110);

    noiseScale = random(0.008, 0.015);

    noiseSeed(random(0,1000));

​

    for(let i = 0; i < height; i++) {

        nx = noiseScale * i * 0.5;

        // we want our line to "shift" to the left, gradually

        x = (noiseLevel * noise(nx)) - (i * 0.5);

        y = i;

​

        line(0, y, x + widthOffset, y);

    }

}

​

function sleep(millisecondsDuration)

{

    return new Promise((resolve) => {

        setTimeout(resolve, millisecondsDuration);

    })

}

​

function fillPrefixSum(arr)

{

    prefixSum = [];

    prefixSum[0] = arr[0];

​

    for (let i = 1; i < arr.length; ++i) {

        prefixSum[i] = prefixSum[i - 1] + arr[i];

    }

​

    return prefixSum;

}