Skip to content

Instantly share code, notes, and snippets.

@Meekohi
Created November 7, 2018 20:53
Show Gist options
  • Save Meekohi/d9df2740bb553619d516e9ec9ef72789 to your computer and use it in GitHub Desktop.
Save Meekohi/d9df2740bb553619d516e9ec9ef72789 to your computer and use it in GitHub Desktop.
codevember 06 - Web
<span style="font-family: sans-serif;">Click to crash.</span>
// 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);
}
};
<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>
canvas {
display: block;
margin: 0 auto;
border: 1px solid black !important;
border-radius: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment