Skip to content

Instantly share code, notes, and snippets.

@PatrickMurphy

PatrickMurphy/Disc.js

Created February 28, 2017 01:02
Show Gist options
  • Save PatrickMurphy/c0304eb2103ec0a01841ad1cad6e81aa to your computer and use it in GitHub Desktop.
Save PatrickMurphy/c0304eb2103ec0a01841ad1cad6e81aa to your computer and use it in GitHub Desktop.
Download ZIP
P5linko
Raw
Disc.js
function Disc(parent, position, rad) {
this.parent = parent; // a PlinkoBoard object
this.position = position;
this.r = rad;
this.velocity = createVector(0, 0);
this.mass = 1;
this.acceleration = createVector(0, 0);
this.update = function () {
//this.applyForce(GRAVITY);
this.acceleration.y = 1;
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.acceleration.mult(0);
this.checkCollisions();
}
this.hoverUpdate = function(){
this.applyForce(createVector(.1,0));
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.acceleration.mult(0);
this.checkCollisions();
}
//Show the disc
this.show = function () {
fill(color(220, 10, 10));
stroke(color(255, 0, 0));
ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
noStroke();
}
this.applyForce = function (force) {
var f = p5.Vector.div(force, this.mass);
this.acceleration.add(f);
};
this.checkCollisions = function () {
// if hits right wall
if (this.position.x > (this.parent.position.x+this.parent.size_width-(this.r))) {
this.position.x = (this.parent.position.x+this.parent.size_width-(this.r));
this.velocity.x *= -1;
} else if (this.position.x < this.parent.position.x+(this.r)) { // left wall
this.velocity.x *= -1;
this.position.x = this.parent.position.x+(this.r);
}
// floor
if (this.position.y > this.parent.floor_y) {
this.velocity.y *= -0.5;
this.position.y = this.parent.floor_y;
}
for(var index = 0; index < this.parent.pegs.length; index++){
var this_peg = this.parent.pegs[index];
if(dist(this.position.x,this.position.y,this_peg.position.x,this_peg.position.y) < (this.r + this_peg.r-1)){
var collisionPointX = ((this.position.x * this_peg.r) + (this_peg.position.x * this.r)) / (this.r + this_peg.r);
var collisionPointY = ((this.position.y * this_peg.r) + (this_peg.position.y * this.r)) / (this.r + this_peg.r);
var normal_vect = createVector(collisionPointX-this_peg.position.x,collisionPointY-this_peg.position.y).normalize();
console.log(collisionPointX,collisionPointY,normal_vect);
//this.velocity.x = (this.velocity.x * (this.mass - this_peg.mass)) / (this.mass + this_peg.mass);
//this.velocity.y = (this.velocity.y * (this.mass - this_peg.mass)) / (this.mass + this_peg.mass);
this.velocity = p5.Vector.add(p5.Vector.mult(p5.Vector.mult(normal_vect,p5.Vector.dot(this.velocity,normal_vect)),-2),this.velocity);//( -2*(V dot N)*N + V )
this.velocity.mult(.5);
this.position.x += this.velocity.x*1.2;
this.position.y += this.velocity.y*1.2;
}
}
};
}
Raw
index.html
<html>
<head>
<title>Class Randomizer | Plinko</title>
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
<script language="javascript" type="text/javascript" src="../lib/p5.js"></script>
<script language="javascript" type="text/javascript" src="../lib/p5.dom.js"></script>
<script src="//www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<script language="javascript" type="text/javascript" src="../js/data.js"></script>
<script language="javascript" type="text/javascript" src="../js/plinko.js"></script>
<script language="javascript" type="text/javascript" src="../js/plinko/Disc.js"></script>
<script language="javascript" type="text/javascript" src="../js/plinko/Peg.js"></script>
<script language="javascript" type="text/javascript" src="../js/plinko/PlinkoBoard.js"></script>
<style>
body {
background-color: #000000;
font-family: 'Source Code Pro', serif;
font-size: 16px;
}
.button {
font-family: 'Source Code Pro', serif;
font-size: 16px;
width: 200px;
}
</style>
</head>
<body>
</body>
</html>
Raw
Peg.js
function Peg(position, rad){
this.position = position;
this.r = rad;
this.mass = 10;
this.update = function(){
}
//Shwo the cell and the name
this.show = function(){
fill(55);
noStroke();
ellipse(this.position.x,this.position.y,this.r*2,this.r*2);
}
}
Raw
plinko.js
var GRAVITY;
//Not really the sketch's speed, but the Cells speed
var sketch_speed;
var sketch_started = false;
//The user's input names
var names = [];
//This will become true when everything is ready
var loadAllDataFinished = false;
var foundWinner = false;
//The winner Cell object
var winner = null;
//Start button
var startSimBtn;
//Sketch speed input
var speedInput;
var Board;
function setup() {
GRAVITY = createVector(0, .015);
var config = {
apiKey: "AIzaSyA-VyZJOZVqXZj82wvVMkfJedDEhqXcIh8",
authDomain: "a2zitp-6519b.firebaseapp.com",
databaseURL: "https://a2zitp-6519b.firebaseio.com",
storageBucket: "a2zitp-6519b.appspot.com",
messagingSenderId: "363965061200"
};
firebase.initializeApp(config);
database = firebase.database();
// Make the canvas full screen size
canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0, 0);
ellipseMode(CENTER);
// Make a silly github thing
var github = createA('https://github.com/shiffman/randomizer', '');
var gitimg = createImg('https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png');
gitimg.id('gitimg');
github.child('gitimg');
gitimg.attribute('style', 'position: absolute; top: 0; right: 0; border: 0;');
startSimBtn = createButton("Start");
startSimBtn.class('button');
startSimBtn.position(20, windowHeight - 40);
startSimBtn.mousePressed(startSimulation);
//speedInput = createInput();
// speedInput.position(20, windowHeight - 70);
// speedInput.value(1);
// fill(255);
// text("Sketch speed (0 to 10): ", 20, windowHeight - 75);
Board = new PlinkoBoard(createVector(50,25),windowWidth-100,windowHeight-100);
}
function draw() {
background(20);
if (sketch_started) {
if (loadAllDataFinished) {
if (!foundWinner) {
// display active game
Board.update();
Board.show();
} else {
//Show the winner text
textSize(35);
fill(255);
text("And the winner is...", width / 2 - 160, height / 2 - height / 4);
textSize(55);
fill(0);
text(winner.name, width / 2 - winner.name.length * 16, height / 2 - height / 8);
}
}
// fill(255);
//textSize(12);
//text("Sketch speed (0 to 10): ", 20, windowHeight - 75);
}else{
Board.show();
Board.update();
}
}
function initialize() {
Board.loadNames(names);
//Everything is ready to go!
loadAllDataFinished = true;
}
function startSimulation() {
//If the sketch is already "running" then reset all the variables
if (sketch_started) {
Board = new PlinkoBoard(createVector(50,25),windowWidth-100,windowHeight-100);
loadAllDataFinished = false;
foundWinner = false;
winner = null;
}
//Limit the sketch_speed to max 10
//sketch_speed = parseInt(speedInput.value());
sketch_speed = 1;
//if (parseInt(speedInput.value()) > 10) {
// speedInput.value(10);
// sketch_speed = 10;
// }
sketch_started = true;
loadFirebase(initialize);
}
Raw
PlinkoBoard.js
function PlinkoBoard(position, size_width, size_height) {
this.position = position;
this.size_height = size_height;
this.size_width = size_width;
this.names = [];
this.pegs = [];
this.discs = [];
this.row_count = 14;
this.col_count = 21;
this.floor_y = this.position.y + this.size_height;
this.discs[0] = (new Disc(this, createVector(this.position.x, this.position.y + 20), 20));
for (var y = 0; y < this.row_count; y++) {
for (var x = 0; x < this.col_count; x++) {
var alt_row = (y % 2) == 0;
var offset = (size_width / this.col_count) / 4;
if (alt_row) {
offset = offset + ((size_width / this.col_count) / 2);
}
if (y < this.row_count - 2) {
this.pegs.push(new Peg(createVector(this.position.x + offset + (x * (size_width / this.col_count)), this.position.y + (y + 1) * (size_height / this.row_count)), 3));
}
}
}
for(var name_index = 0; name_index <= names.length; name_index++){
}
this.update = function () {
if (sketch_started) {
for (var i = 0; i < this.discs.length; i++) {
this.discs[i].update();
}
} else {
for (var i = 0; i < this.discs.length; i++) {
this.discs[i].hoverUpdate();
}
}
}
//Shwo the cell and the name
this.show = function () {
fill(200);
rect(this.position.x, this.position.y, this.size_width, this.size_height);
for (var i = 0; i < this.discs.length; i++) {
this.discs[i].show();
}
for (var j = 0; j < this.pegs.length; j++) {
this.pegs[j].show();
}
}
this.loadNames = function (names) {
this.names = names;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment