Skip to content

Commit

Permalink
gui
Browse files Browse the repository at this point in the history
  • Loading branch information
@martijnkunstman
martijnkunstman committed Jun 9, 2020
1 parent 67036d8 commit 43c67a1
Show file tree
Hide file tree
Showing 7 changed files with 141 additions and 84 deletions.
85 changes: 48 additions & 37 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
"use strict";
//import * as dat from 'dat.gui'
//import Chart from 'chart.js'
//
// classes
//
var World = /** @class */ (function () {
function World(width, height, denisty, framerate, personSize) {
function World(width, height, density, framerate, personSize) {
this.graphData = [];
this.first = 0;
this.animationRuns = false;
this.width = width;
this.height = height;
this.denisty = denisty;
this.personCount = Math.round(width * height * denisty);
this.density = density;
this.persons = [];
this.framerate = 1000 / framerate;
this.personSize = personSize;
}
World.prototype.init = function () {
var body = document.getElementsByTagName("body")[0];
var body = document.getElementById("container");
var canvasChart = document.createElement('canvas');
canvasChart.id = "chart";
canvasChart.width = 700;
canvasChart.height = 700;
canvasChart.style.zIndex = "2";
canvasChart.style.position = "absolute";
canvasChart.style.border = "1px solid";
canvasChart.style.marginLeft = this.width + "px";
body.appendChild(canvasChart);
this.chart = new Chart(canvasChart, {
type: 'line',
Expand Down Expand Up @@ -88,32 +87,31 @@ var World = /** @class */ (function () {
canvas.id = "canvas";
canvas.width = this.width;
canvas.height = this.height;
canvas.style.zIndex = "1";
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
body.appendChild(canvas);
var div = document.createElement('div');
div.id = "info";
body.appendChild(div);
document.getElementById("info").innerHTML = "persons: " + this.personCount;
this.load();
};
World.prototype.load = function () {
this.first = 0;
this.persons = [];
this.graphData = [];
this.personCount = this.width * this.height * 0.0001 * this.density;
for (var a = 0; a < this.personCount; a++) {
var person = new Person(randomIntFromInterval(0, this.width), randomIntFromInterval(0, this.height), this.width, this.height, this.infection, this.mobility, "uninfected", this.personSize);
this.persons.push(person);
}
this.animationStep();
if (!this.animationRuns) {
this.animationStep();
this.animationRuns = true;
}
};
World.prototype.animationStep = function () {
var _this = this;
var runAnimation = false;
this.first++;
if (this.first == 2) {
this.persons[0].state = "infected";
}
//
if (this.first < 3) {
runAnimation = true;
}
//
var uninfected = 0;
var infected = 0;
var deceased = 0;
Expand All @@ -125,7 +123,6 @@ var World = /** @class */ (function () {
for (var a = 0; a < this.persons.length; a++) {
for (var b = 0; b < this.persons.length; b++) {
if (this.persons[a].state == "infected") {
runAnimation = true;
var dist = Math.sqrt(Math.pow((this.persons[a].xPosition - this.persons[b].xPosition), 2) + Math.pow((this.persons[a].yPosition - this.persons[b].yPosition), 2));
if (dist < this.persons[a].infection.reach + this.persons[a].size) {
if (this.persons[b].state == "uninfected") {
Expand All @@ -147,7 +144,9 @@ var World = /** @class */ (function () {
recovered++;
}
}
this.graphData.push({ "uninfected": uninfected, "infected": infected, "deceased": deceased, "recovered": recovered });
if (this.first > 2 && infected > 0) {
this.graphData.push({ "uninfected": uninfected, "infected": infected, "deceased": deceased, "recovered": recovered });
}
//convert data
var labels = [];
var uninfectedArray = [];
Expand All @@ -161,7 +160,7 @@ var World = /** @class */ (function () {
deceasedArray.push(this.graphData[a].deceased);
recoveredArray.push(this.graphData[a].recovered);
}
var xaxisstep = 15;
var xaxisstep = 20;
labels = convertArrayLenght(labels, xaxisstep);
uninfectedArray = convertArrayLenght(uninfectedArray, xaxisstep);
infectedArray = convertArrayLenght(infectedArray, xaxisstep);
Expand All @@ -178,22 +177,15 @@ var World = /** @class */ (function () {
this.persons[a].move();
this.persons[a].draw(ctx);
}
if (runAnimation) {
setTimeout(function () {
_this.animationStep();
}, this.framerate);
}
setTimeout(function () {
_this.animationStep();
}, this.framerate);
};
return World;
}());
var Controls = /** @class */ (function () {
function Controls() {
}
return Controls;
}());
var Infection = /** @class */ (function () {
//public state : string
//public exposure: number
//public icnubation: number
function Infection(duration, mortality, reach) {
this.duration = duration;
this.mortality = mortality;
Expand Down Expand Up @@ -297,7 +289,8 @@ function randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function convertArrayLenght(inputArray, length) {
//return inputArray
//return inputArray
length = length - 1;
var myNewArray = [];
for (var a = 0; a < length; a++) {
myNewArray.push(inputArray[Math.floor(a / length * inputArray.length)]);
Expand All @@ -309,10 +302,28 @@ function convertArrayLenght(inputArray, length) {
// let's do it...
//
var framerate = 30;
var personSize = 3;
var world = new World(700, 700, 0.005, framerate, personSize); // width, height, density, framerate, personSize
var infection = new Infection(40, 0.33, 7); // duration, mortality, reach
var personSize = 6;
var world = new World(700, 700, 10, framerate, personSize); // width, height, density, framerate, personSize
var infection = new Infection(200, 0.3, 12); // duration, mortality, reach
var mobility = new Mobility(1, 13); // speed, distance
world.infection = infection;
world.mobility = mobility;
world.init();
//
// dat.gui
//
var gui = new dat.GUI();
var slider1 = gui.add(world, 'density').min(1).max(20).step(1);
var slider2 = gui.add(world, 'personSize').min(2).max(10).step(1);
var slider3 = gui.add(world.infection, 'duration').min(50).max(500).step(50);
var slider4 = gui.add(world.infection, 'mortality').min(0).max(1).step(0.1);
var slider5 = gui.add(world.infection, 'reach').min(1).max(20).step(1);
var slider6 = gui.add(world.mobility, 'speed').min(0).max(2).step(0.1);
var slider7 = gui.add(world.mobility, 'distance').min(1).max(50).step(1);
slider1.onChange(function () { world.load(); });
slider2.onChange(function () { world.load(); });
slider3.onChange(function () { world.load(); });
slider4.onChange(function () { world.load(); });
slider5.onChange(function () { world.load(); });
slider6.onChange(function () { world.load(); });
slider7.onChange(function () { world.load(); });
97 changes: 54 additions & 43 deletions app.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
//import * as dat from 'dat.gui'
//import Chart from 'chart.js'
//
// classes
//
class World {
public width: number
public height: number
public denisty: number
public density: number
public infection: Infection
public mobility: Mobility
public framerate: number
Expand All @@ -13,27 +15,24 @@ class World {
private persons: any
private graphData: any = []
private first: number = 0
private animationRuns = false
public chart: Chart

constructor(width: number, height: number, denisty: number, framerate: number, personSize: number) {
constructor(width: number, height: number, density: number, framerate: number, personSize: number) {
this.width = width
this.height = height
this.denisty = denisty
this.personCount = Math.round(width * height * denisty)
this.density = density
this.persons = []
this.framerate = 1000 / framerate
this.personSize = personSize
}
init() {
let body = document.getElementsByTagName("body")[0]
let body = document.getElementById("container")
let canvasChart: any = document.createElement('canvas')
canvasChart.id = "chart"
canvasChart.width = 700
canvasChart.height = 700
canvasChart.style.zIndex = "2"
canvasChart.style.position = "absolute"
canvasChart.style.border = "1px solid"
canvasChart.style.marginLeft = this.width + "px"
body.appendChild(canvasChart)
this.chart = new Chart(canvasChart, {
type: 'line',
Expand Down Expand Up @@ -100,33 +99,30 @@ class World {
canvas.id = "canvas"
canvas.width = this.width
canvas.height = this.height
canvas.style.zIndex = "1"
canvas.style.position = "absolute"
canvas.style.border = "1px solid"
body.appendChild(canvas)
let div = document.createElement('div')
div.id = "info"
body.appendChild(div)
document.getElementById("info").innerHTML = "persons: " + this.personCount
this.load()
}
load() {
this.first = 0
this.persons = []
this.graphData = []
this.personCount = this.width * this.height * 0.0001 * this.density
for (let a: number = 0; a < this.personCount; a++) {
let person = new Person(randomIntFromInterval(0, this.width), randomIntFromInterval(0, this.height), this.width, this.height, this.infection, this.mobility, "uninfected", this.personSize)
this.persons.push(person)
}
this.animationStep()
if (!this.animationRuns) {
this.animationStep()
this.animationRuns = true
}
}
animationStep() {
let runAnimation = false
this.first++;
if (this.first==2)
{
this.first++
if (this.first == 2) {
this.persons[0].state = "infected"
}
//
if (this.first<3)
{
runAnimation = true
}
//
let uninfected = 0
let infected = 0
let deceased = 0
Expand All @@ -138,7 +134,6 @@ class World {
for (let a: number = 0; a < this.persons.length; a++) {
for (let b: number = 0; b < this.persons.length; b++) {
if (this.persons[a].state == "infected") {
runAnimation = true
let dist = Math.sqrt(Math.pow((this.persons[a].xPosition - this.persons[b].xPosition), 2) + Math.pow((this.persons[a].yPosition - this.persons[b].yPosition), 2))
if (dist < this.persons[a].infection.reach + this.persons[a].size) {
if (this.persons[b].state == "uninfected") {
Expand All @@ -160,8 +155,9 @@ class World {
recovered++
}
}
this.graphData.push({ "uninfected": uninfected, "infected": infected, "deceased": deceased, "recovered": recovered })

if (this.first > 2 && infected > 0) {
this.graphData.push({ "uninfected": uninfected, "infected": infected, "deceased": deceased, "recovered": recovered })
}
//convert data
let labels = []
let uninfectedArray = []
Expand All @@ -175,7 +171,7 @@ class World {
deceasedArray.push(this.graphData[a].deceased)
recoveredArray.push(this.graphData[a].recovered)
}
let xaxisstep = 15;
let xaxisstep = 20
labels = convertArrayLenght(labels, xaxisstep)
uninfectedArray = convertArrayLenght(uninfectedArray, xaxisstep)
infectedArray = convertArrayLenght(infectedArray, xaxisstep)
Expand All @@ -194,23 +190,19 @@ class World {
this.persons[a].move()
this.persons[a].draw(ctx)
}
if (runAnimation) {
setTimeout(() => {
this.animationStep()
}, this.framerate)
}
}
}
class Controls {

setTimeout(() => {
this.animationStep()
}, this.framerate)

}
}
class Infection {
public duration: number
public mortality: number
public reach: number

//public state : string
//public exposure: number
//public icnubation: number

constructor(duration: number, mortality: number, reach: number) {
this.duration = duration
Expand Down Expand Up @@ -329,7 +321,8 @@ function randomIntFromInterval(min: number, max: number) { // min and max includ

function convertArrayLenght(inputArray: any, length: number): any {

//return inputArray
//return inputArray
length = length - 1
let myNewArray: any = []
for (let a = 0; a < length; a++) {
myNewArray.push(inputArray[Math.floor(a / length * inputArray.length)])
Expand All @@ -341,10 +334,28 @@ function convertArrayLenght(inputArray: any, length: number): any {
// let's do it...
//
let framerate: number = 30
let personSize: number = 3;
let world = new World(700, 700, 0.005, framerate, personSize) // width, height, density, framerate, personSize
let infection = new Infection(40, 0.33, 7) // duration, mortality, reach
let personSize: number = 6
let world = new World(700, 700, 10, framerate, personSize) // width, height, density, framerate, personSize
let infection = new Infection(200, 0.3, 12) // duration, mortality, reach
let mobility = new Mobility(1, 13) // speed, distance
world.infection = infection
world.mobility = mobility
world.init()
world.init()
//
// dat.gui
//
let gui = new dat.GUI()
let slider1 = gui.add(world, 'density').min(1).max(20).step(1)
let slider2 = gui.add(world, 'personSize').min(2).max(10).step(1)
let slider3 = gui.add(world.infection, 'duration').min(50).max(500).step(50)
let slider4 = gui.add(world.infection, 'mortality').min(0).max(1).step(0.1)
let slider5 = gui.add(world.infection, 'reach').min(1).max(20).step(1)
let slider6 = gui.add(world.mobility, 'speed').min(0).max(2).step(0.1)
let slider7 = gui.add(world.mobility, 'distance').min(1).max(50).step(1)
slider1.onChange(function () { world.load() })
slider2.onChange(function () { world.load() })
slider3.onChange(function () { world.load() })
slider4.onChange(function () { world.load() })
slider5.onChange(function () { world.load() })
slider6.onChange(function () { world.load() })
slider7.onChange(function () { world.load() })
3 changes: 3 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@

<head>
<title>Minimalistic infection simulation based on very few variables.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="node_modules/chart.js/dist/Chart.min.js"></script>
<script src="node_modules/dat.gui/build/dat.gui.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container"></div>
<script src="app.js"></script>
</body>

Expand Down
Loading

0 comments on commit 43c67a1

Please sign in to comment.