complete exercise 0.4

2024-02-05 21:21:54 +02:00 · 2024-02-05 21:21:54 +02:00 · b939faa914
commit b939faa914
parent cb14f6543b
2 changed files with 89 additions and 0 deletions
--- a/Splatter/index.html
+++ b/Splatter/index.html
@ -0,0 +1,16 @@
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
+    <script src="sketch.js"></script>
+    <style>
+    body {
+      background: #212121;
+      color: #EFEFEF;
+    }
+    </style>
+  </head>
+  <body>
+    <main>
+    </main>
+  </body>
+</html>
--- a/Splatter/sketch.js
+++ b/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)
+    }
+}
+