fractalkitty looking for math? fractalkitty.com

Genuary 2024

flow with me

#random#trig#classes#curves#interactive#animation#genuary

shapesblobBlobborder

let shapes = [];
let t, g, b;
function setup() {
  createCanvas(windowWidth * 0.9, windowHeight * 0.9);
  rectMode(CENTER);
  angleMode(DEGREES);
  shapes = [];
  n = int(random(10, 20));
  g = random(20, 50);
  b = random(20, 90);
  nRot = int(random(5, 15));
  for (let i = 0; i < n; i++) {
    shapes.push(new Blob());
  }
}

function draw() {
  background(
    255 - 200 * abs(sin(t / 50)),
    255 - 170 * abs(sin(t / 50)),
    255 - 120 * abs(sin(t / 50))
  );
  fill(255);
  translate(width / 2, height / 2);
  t = frameCount * 2;
  noStroke();
  for (let blob of shapes) {
    for (let i = 0; i < nRot; i++) {
      push();
      rotate((360 / nRot) * i);
      blob.display();
      pop();
    }
  }

  border();
}

class Blob {
  constructor() {
    this.a = random(5, 30);
    this.b = random(10, width / 5);
    this.n = random(10, 40);
    this.t = random(-0.05, 0.05);
    this.red = random(130, 170);
    this.green = g + this.red;
    this.blue = b + this.red;
    this.x = random(-width / 2, width / 2);
    this.y = random(-height / 2, height / 2);
    this.shape = [];
    this.m = [];
    this.c = [];
    this.rt = random(-0.05, 0.05);
    for (let j = 0; j <= this.n; j++) {
      this.shape[j] = {
        x: random(0, 10) + this.a * sin((360 / this.n) * j),
        y: this.b * cos((360 / this.n) * j)
      };
      this.m[j] = random(-5, 5);
      this.c[j] = random(0.1, 0.5);
    }
    this.shape2 = [];

    this.shape2 = this.shape;
  }
  move() {
    for (let j = 0; j <= this.n; j++) {
      this.shape[j].x = this.shape2[j] + this.m[j] * sin(t * this.c[j]);
      this.shape[j].x = this.shape2[j] + this.m[j] * cos(t * this.c[j]);
    }
  }
  display() {
    push();
    rotate((this.rt * t) / 4);
    fill(
      this.red + 50 * sin(this.t * t),
      this.green + 50 * sin(this.t * t),
      this.blue + 50 * sin(this.t * t),
      150 + 100 * sin(t * this.t)
    );
    translate(
      this.x + 2 * this.a * sin(this.t * t),
      this.y + 2 * this.b * sin(this.t * t)
    );
    curveTightness(0.001);
    beginShape();
    for (let i = 0; i <= this.n; i++) {
      curveVertex(
        this.shape[i].x + this.m[i] * sin(t),
        this.shape[i].y + this.m[i] * cos(t)
      );
    }
    endShape();
    pop();
  }
}

function border() {
  noFill();
  stroke(20, 50, 60);
  strokeWeight(4);
  rect(0, 0, width - 20, height - 20);
}

function mousePressed() {
  frameCount = 0;
  setup();
  draw();
}

function keyPressed() {
}

function windowResized() {
  resizeCanvas(windowWidth * 0.9, windowHeight * 0.9);
}