diff --git a/0. Randomness/4. Paint Splatter/index.html b/0. Randomness/4. Paint Splatter/index.html new file mode 100644 index 0000000..7a417ce --- /dev/null +++ b/0. Randomness/4. Paint Splatter/index.html @@ -0,0 +1,16 @@ + + + + + + + +
+
+ + diff --git a/0. Randomness/4. Paint Splatter/sketch.js b/0. Randomness/4. Paint Splatter/sketch.js new file mode 100644 index 0000000..0015845 --- /dev/null +++ b/0. Randomness/4. Paint Splatter/sketch.js @@ -0,0 +1,73 @@ +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) + } +} +