読者です 読者をやめる 読者になる 読者になる

30 min. Processing

毎日30分、Processingで何かを作る

触れると小さくなり消える円

p5.js インタラクション
/**
 * touchable bubbles
 * 
 * @author aadebdeb
 * @date 2017/03/14
 */

var easingVariables;
var circles;

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  frameRate(30);
  easingVariables = [];
  circles = [];
  for (var i = 0; i < 250; i++) {
    circles.push(new Circle());
  }
}

function draw() {
  background(0, 0, 100);
  var mouse = createVector(mouseX, mouseY);
  for (var i = 0; i < circles.length; i++) {
    var circle = circles[i];
    circle.render();
    circle.update(mouse);
  }

  updateEasingVariables();
}

function updateEasingVariables() {
  for (var i = 0; i < easingVariables.length; i++) {
    easingVariables[i].update();
  }
}

function isOverlapping(circle) {
  for (var i = 0; i < circles.length; i++) {
    var other = circles[i];
    var d = circle.loc.dist(other.loc);
    if (d < circle.maxRadius + other.maxRadius) {
      return true;
    }
  }
  return false;
}


function EasingVariable() {
  this.value = 0;
  this.step = 0.04;
  this.isIncreasing = true;
  this.isDecreasing = false;
  easingVariables.push(this);
}

EasingVariable.prototype = {
  update: function() {
    if (this.isIncreasing) {
      this.value += this.step;
      if (this.value >= 1) {
        this.value = 1;
        this.isIncreasing = false;
      }
    }
    if (this.isDecreasing) {
      this.value -= this.step;
      if (this.value <= 0) {
        this.value = 0;
        this.isDecreasing = false;
      }
    }
  },
  
  startIncrement: function() {
    this.isIncreasing = true;
    this.isDecreasing = false;
  },
  
  startDecrement: function() {
    this.isIncreasing = false;
    this.isDecreasing = true;
  }
}

function Circle() {
  this.loc = createVector(random(windowWidth), random(windowHeight));
  this.ev = new EasingVariable();
  this.maxRadius = random(10, 100);
  this.c = color(random(360), 100, 100);
}

Circle.prototype = {
  resetLoc: function() {
    this.loc = createVector(random(windowWidth), random(windowHeight));
  },
  
  getRadius: function() {
    var v = this.ev.value;
    return map(v, 0, 1, 0, this.maxRadius);
  },
  
  render: function() {
    var r = this.getRadius();
    fill(hue(this.c), saturation(this.c), brightness(this.c), 30);
    stroke(hue(this.c), saturation(this.c), brightness(this.c), 60);
    ellipse(this.loc.x, this.loc.y, r * 2, r * 2);
  },
  
  update: function(mouse) {
    var d = this.loc.dist(mouse);
    if (!this.ev.isDecreasing && d  < this.getRadius()) {
      this.ev.startDecrement();
    }
    if (!this.ev.isIncreasing && !this.ev.isDecreasing && this.ev.value == 0) {
      this.resetLoc();
      this.ev.startIncrement();
    }
  }
}
f:id:aa_debdeb:20170313223358j:plain