Hi, welcome to my first post. In this blog you’ll find some of my small art pieces using artistic code frameworks like p5.js or Open Frameworks. This was my first piece using p5.js.

Here you have the source code.

let drops = []; // Declare object

function setup() {
  createCanvas(710, 400);
  // Create object
  for(let i = 0; i < 100; i++){
    drops[i] = new Drop();
  }
  noFill();
}

function draw() {
  background(0, 0, 0);
  for(let i = 0; i < 100; i++){
    drops[i].display();
  }
}

// Jitter class
class Drop {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.diameter = 1;
    this.max = random(25,40);
    this.gs = 255;
  }

  display() {
    stroke(this.gs,this.gs,this.gs);
    
    let r5 = random(5,7);
    
    ellipse(this.x, this.y, r5, r5);
    ellipse(this.x, this.y, this.diameter, this.diameter);
    
    for(let i = 0; i < this.max; i += this.max / 2){
      if(this.diameter > i) ellipse(this.x, this.y, this.diameter - i, this.diameter - i);
    }
    
    this.grow();
  }
  
  grow(){
    this.diameter += 0.4;
    if(this.diameter > this.max){
      this.gs -= 10;
      if(this.gs < 0){
        this.reset();
      }
    }
  }
  
  reset(){
    this.x = random(width);
    this.y = random(height);
    this.diameter = 1;
    this.gs = 255;
  }
}