fin

1/sketch.js

@@ -1,16 +1,91 @@
-function drawCanvasContent(){
-  createCanvas(windowWidth, windowHeight)
-  background(255)
-  for (let i = 0; i <= 50; i++) {
-    fill(0, 0, 0, 0)
-    square(random(width/2), random(height/2), random(width/8, width/2))
-  }
-}
+const sketch = function (p) {
+  p.drawCanvasContent = function () {
+    p.background(255);
+    for (let i = 0; i <= 50; i++) {
+      p.fill(0, 0, 0, 0);
+      p.square(
+        p.random(p.width / 2),
+        p.random(p.height / 2),
+        p.random(p.width / 8, p.width / 2)
+      );
+    }
+  };
 
-function setup() {
-  drawCanvasContent();
-}
+  p.setup = function () {
+    p.createCanvas(400, 400);
+    p.drawCanvasContent();
+  };
 
-function mouseMoved() {
-  drawCanvasContent();
-}
+  p.mouseMoved = function () {
+    p.drawCanvasContent();
+  };
+};
+
+const sketch2 = function (p) {
+  let x, y, xconst, yconst;
+  let i = 0;
+
+  p.setup = function () {
+    p.createCanvas(400, 400);
+    p.background(255);
+    x = p.width / 2;
+    y = p.height / 2;
+    xconst = 0;
+    yconst = 0;
+  };
+
+  p.draw = function () {
+    i++;
+    if (i > 50) {
+      i = 0;
+      yconst = p.random(-2, 2);
+      xconst = p.random(-2, 2);
+    }
+    x += p.random(-5, 5) + xconst;
+    y += p.random(-5, 5) + yconst;
+    p.fill(p.random(255), p.random(255), p.random(255));
+    p.noStroke();
+    p.ellipse(x, y, 5, 5);
+    if (x < 0) x = p.width;
+    if (x > p.width) x = 0;
+    if (y < 0) y = p.height;
+    if (y > p.height) y = 0;
+  };
+};
+
+const sketch3 = function (p) {
+  let randomnessSeed;
+
+  p.setup = function () {
+    randomnessSeed = p.random(100);
+    p.createCanvas(400, 400);
+  };
+
+  p.draw = function () {
+    const size = 50;
+    p.randomSeed(randomnessSeed);
+    p.background(255);
+    p.noStroke();
+    for (let i = 0; i <= p.width; i += size) {
+      for (let j = 0; j <= p.height; j += size) {
+        p.colorMode(p.HSL);
+        p.fill(
+          p.random(180) +
+            (p.mouseX / p.width) * p.random(90) +
+            (p.mouseY / p.height) * p.random(90),
+          p.keyIsPressed ? 0 : 100,
+          p.random(50) + (p.mouseX / p.width) * 25 + (p.mouseY / p.height) * 25
+        );
+        let randomsize = 0;
+        do {
+          randomsize = p.randomGaussian(size / 20) * 20;
+        } while (randomsize >= size + size / 10 || randomsize < size / 10);
+        p.circle(i, j, randomsize / 2 + (p.mouseY / p.height) * 50);
+      }
+    }
+  };
+};
+
+p5Sketch = new p5(sketch);
+p5Sketch2 = new p5(sketch2);
+p5Sketch3 = new p5(sketch3);