added code for p5.js

genuary_04/genuary_04.js

@@ -0,0 +1,60 @@
+// add this code to your p5.js -> sketch.js 🎉
+
+class Bubble {
+  constructor() {
+    this.x = random(width);
+    this.r = random(16, 32);
+    this.y = height + this.r * 5;
+  }
+
+  rise() {
+    this.y = this.y - random(5);
+    this.x = this.x + random(-2, 2);
+
+    if (this.y < this.r) {
+      this.y = height + this.r * 5;
+    }
+  }
+
+  show() {
+    stroke(255);
+    noFill();
+    circle(this.x, this.y, this.r*2);
+  }
+}
+
+const bublesLength = 50;
+let bubbles = [];
+
+
+function setup() {
+  createCanvas(600, 400);
+
+  for (let i = 0; i < bublesLength; i++) {
+    bubbles[i] = new Bubble();
+  }
+}
+
+function draw() {
+  fill(0, 10);
+  noStroke();
+  rect(0, 0, width, height);
+  for (let b of bubbles) {
+    b.rise();
+    // b.show();
+  }
+
+
+  for (let a of bubbles) {
+    for (let b of bubbles) {
+      if (a != b) {
+        let d = dist(a.x, a.y, b.x, b.y);
+        if (d < a.r + b.r) {
+          strokeWeight(2);
+          stroke(255);
+          line(a.x, a.y, b.x, b.y);
+        }
+      }
+    }
+  }
+}

genuary_05/genuary_05.js

@@ -0,0 +1,67 @@
+// add this code to your p5.js -> sketch.js 🎉
+
+class Bubble {
+  constructor() {
+    this.x = random(width);
+    this.r = random(16, 32);
+    this.y = height + this.r * 5;
+    this.intersects = false;
+  }
+
+  rise() {
+    this.y = this.y - random(5);
+    this.x = this.x + random(-2, 2);
+
+    if (this.y < this.r) {
+      this.y = height + this.r * 5;
+    }
+  }
+
+  show() {
+    noStroke();
+    if (this.intersect) fill(255, 0, 0, 50);
+    else fill(0, 255, 0, 50);
+    circle(this.x, this.y, this.r*2);
+  }
+}
+
+const bublesLength = 50;
+let bubbles = [];
+
+
+function setup() {
+  createCanvas(600, 400);
+
+  for (let i = 0; i < bublesLength; i++) {
+    bubbles[i] = new Bubble();
+  }
+}
+
+function draw() {
+  background(0);
+
+  for (let b of bubbles) {
+    b.intersects = false;
+  }
+
+
+  for (let a of bubbles) {
+    for (let b of bubbles) {
+      if (a != b) {
+        let d = dist(a.x, a.y, b.x, b.y);
+        if (d < a.r + b.r) {
+          a.intersect = true;
+          b.intersect = false;
+          strokeWeight(2);
+          stroke(255);
+          line(a.x, a.y, b.x, b.y);
+        }
+      }
+    }
+  }
+
+  for (let b of bubbles) {
+    b.rise();
+    b.show();
+  }
+}

genuary_09/genuary_09.js

@@ -0,0 +1,49 @@
+// copy & paste this code in p5.js -> sketch.js file ✌️
+
+let xoff = 0;
+let yoff = 0;
+let len = 100;
+
+function setup() {
+  createCanvas(600, 600);
+}
+
+function draw() {
+  background(0);
+  translate(width/2, height - len);
+  randomSeed(1);
+  xoff = 0;
+  branch(len);
+  yoff += 0.01;
+}
+
+
+function branch(len) {
+  let weight = map(len, 4, 100, 1, 5);
+  strokeWeight(weight);
+  stroke(255);
+  line(0, 0, 0, -len);
+  translate(0, -len);
+
+  let a = map(noise(xoff, yoff), 0, 1, -PI, PI);
+  xoff += 0.01;
+  len = len * 0.75;
+  if (len >= 4) {
+    if (random(1) < 0.9) {
+      push();
+      rotate(a);
+      branch(len);
+      pop();
+    }
+    if (random(1) < 0.9) {
+      push();
+      rotate(-a);
+      branch(len);
+      pop();
+    }
+  } else {
+    noStroke();
+    fill(random(100, 255), 0, random(200, 255), 100);
+    circle(0, 0, 8);
+  }
+}

genuary_12/genuary_12.js

@@ -0,0 +1,37 @@
+// add this code to your p5.js -> sketch.js 🎉
+
+function setup() {
+  createCanvas(600, 400);
+  background(0);
+  fill(255, 100);
+  stroke(255, 0, 0);
+  let r = 50;
+  let counter = 0;
+  for (let y = -r; y < height + r; y+=r) {
+    for (let x = -r; x < width + r; x+=r*2) {
+      if (counter % 2 == 0) {
+        polygon(6, x + r, y, r);
+      } else {
+        polygon(6, x, y, r);
+      }
+    }
+    counter++;
+  }
+}
+
+function polygon(n, x, y, r) {
+  push();
+  translate(x, y);
+
+  beginShape();
+  for (let i = 0; i < n; i++) {
+    let a = map(i, 0, n, 0, TWO_PI);
+    let x_ = r * cos(a);
+    let y_ = r * sin(a);
+    vertex(x_, y_);
+  }
+  endShape(CLOSE);
+
+
+  pop();
+}

genuary_17/genuary_17.js

@@ -0,0 +1,26 @@
+// add this code to your p5.js -> sketch.js 🎉
+
+function setup() {
+  createCanvas(600, 600);
+}
+
+function drawGrid(x, y, w, h, r) {
+
+  for (let i = 0; i < w; i+= r) {
+    for (let j = 0; j < h; j+= r) {
+      stroke(255);
+      noFill();
+      rect(x + i, y + j, r, r);
+
+      if (random(1) < 0.5 && r > 8) {
+        drawGrid(x+i, y+j, r, r, r/2);
+      }
+    }
+  }
+}
+
+function draw() {
+  background(0);
+  drawGrid(0, 0, width, height, width/2);
+  noLoop();
+}

genuary_18/genuary_18.js

@@ -0,0 +1,26 @@
+// add this code to your p5.js -> sketch.js 🎉
+
+function setup() {
+  createCanvas(600, 600);
+}
+
+function drawGrid(x, y, w, h, r) {
+
+  for (let i = 0; i < w; i+= r) {
+    for (let j = 0; j < h; j+= r) {
+      stroke(255);
+      noFill();
+      circle(x + i + random(-100,100), y + j + random(-100,100), r);
+
+      if (random(1) < 0.5 && r > 8) {
+        drawGrid(x+i, y+j, r, r, r/2);
+      }
+    }
+  }
+}
+
+function draw() {
+  background(0);
+  drawGrid(0, 0, width, height, width/2);
+  noLoop();
+}

genuary_19/genuary_19.js

@@ -0,0 +1,27 @@
+// add this code to your p5.js -> sketch.js 🎉
+
+function setup() {
+  createCanvas(600, 600);
+}
+
+function drawGrid(x, y, w, h, r) {
+
+  for (let i = 0; i < w; i+= r) {
+    for (let j = 0; j < h; j+= r) {
+      stroke(255);
+      strokeWeight(random(16));
+      fill(0);
+      circle(x + i + random(-100, 100), y + j + random(-100, 100), r);
+
+      if (random(1) < 0.5 && r > 8) {
+        drawGrid(x+i, y+j, r, r, r/2);
+      }
+    }
+  }
+}
+
+function draw() {
+  background(0);
+  drawGrid(0, 0, width, height, width/2);
+  noLoop();
+}

genuary_24/genuary_24.js

@@ -0,0 +1,45 @@
+// add this code to your p5.js -> sketch.js 🎉
+
+let zoff = 0;
+
+let colors = ["#0a0a0a", "#f7f3f2", "#0077e1", "#f5d216", "#fc3503"];
+
+function setup() {
+  createCanvas(400, 400);
+  background(0);
+}
+
+function drawGrid(x, y, w, h, r) {
+
+  for (let i = 0; i < w; i+= r) {
+    for (let j = 0; j < h; j+= r) {
+      push();
+      let index = floor(random(colors.length));
+      stroke(colors[index]);
+
+      strokeWeight(r/16);
+      noFill();
+      let xoff = (x+i)/100;
+      let yoff = (y+i)/100;
+      let angle = TWO_PI*noise(xoff, yoff, zoff);
+
+      translate(x+i + r/2, y+j+r/2);
+      rotate(angle);
+
+      line(-r, 0, r, 0);
+      pop();
+      if (random(1) < 0.8 && r > 8) {
+        drawGrid(x+i, y+j, r, r, r/2);
+      }
+    }
+  }
+}
+
+function draw() {
+  noStroke();
+  fill(0, 25);
+  rect(0, 0, width, height);
+  randomSeed(1);
+  drawGrid(0, 0, width, height, width/2);
+  zoff +=0.01;
+}

genuary_29/genuary_29.js

@@ -0,0 +1,34 @@
+// add this code to your p5.js -> sketch.js 🎉
+
+function setup() {
+  createCanvas(400, 400)
+  colorMode(HSB, 360, 255, 255);
+  background(0);
+  let w = 128;
+  for (let r = 256; r > 2; r *= 0.75) {
+    for (let y= 0; y < height; y+=w) {
+      for (let x= 0; x < width; x+=w) {
+        stroke(random(360), 255, 255);
+        fill(random(360), 255, 255);
+        polygon(Math.floor(random(1, 11)), x + w/2, y + w/2, r);
+      }
+    }
+  }
+}
+
+function polygon(n, x, y, r) {
+  push();
+  translate(x, y);
+
+  beginShape();
+  for (let i = 0; i < n; i++) {
+    let a = map(i, 0, n, 0, TWO_PI);
+    let x_ = r * cos(a);
+    let y_ = r * sin(a);
+    vertex(x_, y_);
+  }
+  endShape(CLOSE);
+
+
+  pop();
+}