Daily Creative Coding

元「30 min. Processing」。毎日、Creative Codingします。

低解像度ディスプレイ上のオブジェクト

/**
 * rect flows in display
 * 
 * @author aadebdeb
 * @date 2017/02/10
 */

var particles;

function setup() {
  createCanvas(windowWidth, windowHeight); 
  frameRate(8);
  background(0);
  noStroke();
  
  particles = [];
  for (var i = 0; i < 30; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  blendMode(BLEND);
  fill(0, 100);
  rect(0, 0, width, height);
  blendMode(SCREEN);
  fill(255, 255, 245);
  for (var w = 0; w <= width; w += 7) {
    for (var h = 0; h <= height; h += 7) {
      for (var i = 0; i < particles.length; i++) {
        if (particles[i].isInRange(w, h)) {
          ellipse(w, h, 4, 4);
        }
      }
    }
  }
  for (var i = 0; i < particles.length; i++) {
    particles[i].update();
  }
}

function Particle() {
  this.loc = createVector(random(width), random(height));
  var velSize = 40;
  var velAng = random(PI * 4 / 6, PI * 5 / 6);
  this.vel = createVector(velSize * cos(velAng), velSize * sin(velAng));
  this.size = 50;
  
  this.isInRange = function(w, h) {
    return abs(w - this.loc.x) < this.size && abs(h - this.loc.y) < this.size;
  } 
  
  this.update = function() {
    this.loc.add(this.vel);
    if(this.loc.x < -this.size || this.loc.y > height + this.size) {
      this.loc.x = random(width * 2);
      this.loc.y = -this.size;
    }
  }
}
f:id:aa_debdeb:20170208212408j:plain