LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html,
body {
  padding: 0;
  margin: 0;
  background-color: black;
}
JS
var particles = [];
var bg = "#202020";
var fc=0, saveGIF = false, frms = 250;

function setup() {
  createCanvas(windowWidth, windowHeight-4);
  colorMode(HSB, 360, 1, 1);
}

function draw() {
  background(bg);
  for (var i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].paint();
  }
  fill('#ffffff');
  noStroke();
  textAlign(RIGHT);
  text("click to add particles", width-50, 50);
  /*
  if (saveGIF && frameCount <=fc+frms) {
      save("anim/image-"+frameCount+".png");
  }
  */
}

function mousePressed() {
  particles.push(new Particle(mouseX, mouseY));
}

/*
function keyPressed() {
  fc = frameCount;
  saveGIF = true;
}
*/

function Particle(x, y) {
  this.x = x;
  this.y = y;
  this.history = [];
  this.baseCol = random(360);
  var maxParts = 25;

  this.update = function() {
    var r = 10;
    this.x += random(-r, r);
    this.y += random(-r, r);
    var v = createVector(this.x, this.y);
    this.history.push(v);
    if (this.history.length > maxParts) {
      this.history.splice(0, 1);
    }
  }

  this.paint = function() {
    for (var i = 0; i < this.history.length; i++) {
      var sz = map(i, 0, maxParts - 1, 0, 25);
      var pos = this.history[i];
      stroke(bg);
      fill(this.baseCol + random(-50, 50), .9, .9);
      ellipse(pos.x, pos.y, sz, sz);
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight-4);
}

Description

based on Dan Shiffman's p5js tutorial: https://www.youtube.com/watch?v=vqE8DMfOajk
Term
Sat, 01/13/2018 - 07:26

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv