let dotCount = 20
let dotDeviation = 10
let dotColor
let dotColorDeviation = 10
let dotSize = 10

let centerX = 320
let centerY = 120

let dotCountSlider
let dotDeviationSlider
let dotColorSlider
let dotColorDeviationSlider

function setup() {
    createCanvas(640, 240)

    dotColor = color(51, 51, 51)

    splatPaint()

    createSpan("Dot count")
    dotCountSlider = createSlider(5, 500);
    dotCountSlider.changed(() => {
        dotCount = dotCountSlider.value()
        splatPaint()
    })

    createDiv()
    createSpan("Dot deviation")
    dotDeviationSlider = createSlider(0, 75);
    dotDeviationSlider.changed(() => {
        dotDeviation = dotDeviationSlider.value()
        splatPaint()
    })

    createDiv()
    createSpan("Dot color")
    dotColorSlider = createColorPicker(dotColor);
    dotColorSlider.changed(() => {
        dotColor = dotColorSlider.color()
        splatPaint()
    })

    createDiv()
    createSpan("Dot color deviation")
    dotColorDeviationSlider = createSlider(0, 255);
    dotColorDeviationSlider.changed(() => {
        dotColorDeviation = dotColorDeviationSlider.value()
        splatPaint()
    })

}

function clamp(x, min_x, max_x) {
    return min(max(x, min_x), max_x)
}

function splatPaint() {
    background(255)
    noStroke()
    for (let i = 0; i < dotCount; i++) {
        let colorR = clamp(randomGaussian(dotColor.levels[0], dotColorDeviation), 0, 255)
        let colorG = clamp(randomGaussian(dotColor.levels[1], dotColorDeviation), 0, 255)
        let colorB = clamp(randomGaussian(dotColor.levels[2], dotColorDeviation), 0, 255)
        fill(colorR, colorB, colorG, 40)

        let dotX = randomGaussian(centerX, dotDeviation)
        let dotY = randomGaussian(centerY, dotDeviation)
        circle(dotX, dotY, dotSize)
    }
}