codevember 06 - Web

codevember-06-web.markdown

codevember 06 - Web

A Pen by .CLI on CodePen.

License.

index.html

<span style="font-family: sans-serif;">Click to crash.</span>

script.js

// Give me noise.
// 🎵: Faust - Krautrock

var movers = [];
var amount = 300;
var voronoi;
function setup() {


  var width = 500,
    height = 500;
  
  
  // using d3.js voronoi layout to calculate voronoi polygons
  createCanvas(width, height);
  
//   generate movers
  reset();
}

function draw() {
  for (var i = 0; i < movers.length; i++) {
    
    // Gravity is scaled by mass here!
    var gravity = createVector(0, 0.1*movers[i].mass);
    // Apply gravity
    movers[i].applyForce(gravity);
   
    // Update
    movers[i].update();
    movers[i].checkEdges();
  }
  
  
  
  
  voronoi = d3.geom.voronoi()
    .clipExtent([
      [0, 0],
      [width, height]
    ]);
  
  // create polygons using d3.js voronoi diagram
  var vertices = movers.map(mover => [mover.position.x, mover.position.y])
  var polygons = voronoi(vertices);
  
  stroke(0);
  // draw polygons
  for(var j=0; j<polygons.length; j++) {
    var apolygon = polygons[j];
    
    fill(255);
    
    beginShape();
    for(var k=0; k<apolygon.length; k++) {
      
      var v = apolygon[k];
      vertex(v[0], v[1]);
      
    }
    endShape(CLOSE);
  }
  
  
  // for (var i = 0; i < movers.length; i++) {
  //   movers[i].display();
  // }
  
  // draw circles.
  
//   var circles = vertices.slice(1);
  
//   stroke(0);
//   for(var i=0; i< circles.length; i++) {
//     var center = circles[i];
//     push();
//     translate(center[0], center[1]);
//     fill(0);
//     ellipse(0, 0, 3,3);
//     pop();
//   }
  
  // fill(0);
  // noStroke();
  // text('Click to crash', 15, 15);
 
}

function mousePressed() {
  reset();
}

// Restart all the Mover objects randomly
function reset() {
  for (var i = 0; i < amount; i++) {
    movers[i] = new Mover(random(0.5, 3), 40 + i*(width/amount), random(0, 500));
  }
}

function Mover(m,x,y) {
  this.mass = m;
  this.position = createVector(x,y);
  this.velocity = createVector(0,0);
  this.acceleration = createVector(0,0);
}

// Newton's 2nd law: F = M * A
// or A = F / M
Mover.prototype.applyForce = function(force) {
  var f = p5.Vector.div(force,this.mass);
  this.acceleration.add(f);
};
  
Mover.prototype.update = function() {
  // Velocity changes according to acceleration
  this.velocity.add(this.acceleration);
  // position changes by velocity
  this.position.add(this.velocity);
  // We must clear acceleration each frame
  this.acceleration.mult(0);
};

Mover.prototype.display = function() {
  stroke(0);
  strokeWeight(2);
  fill(255,127);
  ellipse(this.position.x,this.position.y,this.mass*16,this.mass*16);
};

// Bounce off bottom of window
Mover.prototype.checkEdges = function() {
  if (this.position.y > (height - this.mass*8)) {
    // A little dampening when hitting the bottom
    this.velocity.y *= -0.9;
    this.position.y = (height - this.mass*8);
  }
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>

style.css

canvas {
  display: block;
  margin: 0 auto;
  border: 1px solid black !important;
  border-radius: 50%;
}