Rain | NegativeSpace.Net

Submitted by michael on Sat, 04/04/2020 - 13:01
Description
Rain drops keep falling on my head.
Source Code
let sketch = function(p) {

const BOX_COUNT=100;
const MAX_RADIUS=250;


  function Box(cx, cy, style) {
    this.cx = Math.floor(Math.random() * p.width);
    this.cy = Math.floor(Math.random() * p.height);
    this.speed = 0.1 + Math.random() * 0.7;
    this.style = p.color(0,255,255);
    this.radius = 0;
  }

  Box.prototype.expand = function () {
    if (this.radius < MAX_RADIUS) {
      this.radius += this.speed;
      return true;
    }
    return false;
  };
  Box.prototype.draw = function () {
    this.style.setAlpha(255 * (1 - this.radius / MAX_RADIUS ));
    p.strokeWeight(1);
    p.stroke(this.style);
    p.circle(this.cx, this.cy, this.radius);
  };

  var boxes = [];

function buttons() {
  $("<button>Start</button>").click(function(){p.loop();}).appendTo("#controls");
  $("<button id='stop'>Stop</button>").click(function(){p.noLoop();}).appendTo("#controls");
  $("<button>Step</button>").click(function(e) { p.redraw(); p.noLoop();}).appendTo("#controls");
  $("<button>Clear</button>").click(function(e) { p.background(0); }).appendTo("#controls");
  $("<button>Save</button>").click(function(e) { p.saveCanvas(canvas, 'negativespace.net.png','png'); }).appendTo("#controls");
}

  
    
  p.setup = function() {
      canvas = p.createCanvas($('#canvas_container').width(), 610);
      p.strokeWeight(1);
    p.noFill();
      p.background(0);
      buttons();

    for (var i = 0; i < BOX_COUNT; i++) {
      boxes[i] = new Box();
    }
      p.loop();
  };

  p.draw = function() {
    p.background(0);
    for (var i = 0; i < BOX_COUNT; i++) {
      if (boxes[i].expand()) {
        boxes[i].draw();
      } else {
        boxes[i] = new Box();
      }
    }
  };
};

let myp5 = new p5(sketch, 'canvas_container');
Gallery