From 3e9f5d0208cde5830ffc08700aecbfa81a1924f7 Mon Sep 17 00:00:00 2001 From: martijnkunstman Date: Sun, 7 Jun 2020 19:58:06 +0200 Subject: [PATCH] line chart --- README.md | 15 +++++++ app.js | 29 +++++++++---- app.ts | 102 +++++++++++++++++++++++++--------------------- index.html | 2 +- package-lock.json | 6 +-- package.json | 2 +- 6 files changed, 96 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index d7faed7..0406444 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,18 @@ Minimalistic infection simulation based on very few variables. npm run tsc //compile .ts files to .js files + + + +ideas: + +compare +own chart + + +world with obstacles +world with different density areas +different infectons +infection exposure + +mobilty speed + diff --git a/app.js b/app.js index 856d58b..6d29020 100644 --- a/app.js +++ b/app.js @@ -25,31 +25,34 @@ var World = /** @class */ (function () { canvasChart.style.marginLeft = this.width + "px"; body.appendChild(canvasChart); this.chart = new Chart(canvasChart, { - type: 'bar', + type: 'line', data: { - labels: ["0", "1", "3"], datasets: [{ barPercentage: 1, + pointRadius: 0, label: 'uninfected', - data: [1, 2, 3], + data: [], backgroundColor: '#0000ff' }, { barPercentage: 1, + pointRadius: 0, label: 'infected', - data: [2, 3, 4], + data: [], backgroundColor: '#ffff00' }, { barPercentage: 1, + pointRadius: 0, label: 'deceased', - data: [4, 5, 6], + data: [], backgroundColor: '#ff0000' }, { barPercentage: 1, + pointRadius: 0, label: 'recovered', - data: [6, 7, 8], + data: [], backgroundColor: '#00ff00' }] }, @@ -165,7 +168,14 @@ var World = /** @class */ (function () { }; return World; }()); +var Controls = /** @class */ (function () { + function Controls() { + } + return Controls; +}()); var Infection = /** @class */ (function () { + //public state : string + //public exposure: number function Infection(duration, mortality, reach) { this.duration = duration; this.mortality = mortality; @@ -265,6 +275,7 @@ function randomIntFromInterval(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function convertArrayLenght(inputArray, length) { + //return inputArray var myNewArray = []; for (var a = 0; a < length; a++) { myNewArray.push(inputArray[Math.round(a / length * inputArray.length)]); @@ -275,9 +286,9 @@ function convertArrayLenght(inputArray, length) { // let's do it... // var speed = 30; -var world = new World(700, 700, 0.0003, speed); // width, height, density, framerate -var infection = new Infection(100, 0.05, 15); // duration, mortality, reach -var mobility = new Mobility(2, 200); // speed, distance +var world = new World(700, 700, 0.0006, speed); // width, height, density, framerate +var infection = new Infection(200, 0.15, 20); // duration, mortality, reach +var mobility = new Mobility(4, 50); // speed, distance world.infection = infection; world.mobility = mobility; world.init(); diff --git a/app.ts b/app.ts index 403d2e8..9823f43 100644 --- a/app.ts +++ b/app.ts @@ -10,8 +10,8 @@ class World { public framerate: number private personCount: number private persons: any - private graphData: any = []; - public chart: Chart; + private graphData: any = [] + public chart: Chart constructor(width: number, height: number, denisty: number, framerate: number) { this.width = width @@ -24,7 +24,7 @@ class World { } init() { let body = document.getElementsByTagName("body")[0] - let canvasChart = document.createElement('canvas') + let canvasChart : any = document.createElement('canvas') canvasChart.id = "chart" canvasChart.width = 700 canvasChart.height = 700 @@ -34,36 +34,39 @@ class World { canvasChart.style.marginLeft = this.width + "px" body.appendChild(canvasChart) this.chart = new Chart(canvasChart, { - type: 'bar', + type: 'line', data: { - labels: ["0", "1", "3"], datasets: [{ barPercentage: 1, + pointRadius: 0, label: 'uninfected', - data: [1, 2, 3], + data: [], backgroundColor: '#0000ff' }, { barPercentage: 1, + pointRadius: 0, label: 'infected', - data: [2, 3, 4], + data: [], backgroundColor: '#ffff00' }, { barPercentage: 1, + pointRadius: 0, label: 'deceased', - data: [4, 5, 6], + data: [], backgroundColor: '#ff0000' }, { barPercentage: 1, + pointRadius: 0, label: 'recovered', - data: [6, 7, 8], + data: [], backgroundColor: '#00ff00' }] }, - options: { + options: { tooltips: { enabled: false }, hover: { mode: null }, animation: { @@ -72,7 +75,6 @@ class World { responsiveAnimationDuration: 0, responsive: false, scales: { - xAxes: [{ stacked: true, }], @@ -102,12 +104,12 @@ class World { this.animationStep() } animationStep() { - let runAnimation = false; + let runAnimation = false // - let uninfected = 0; - let infected = 0; - let deceased = 0; - let recovered = 0; + let uninfected = 0 + let infected = 0 + let deceased = 0 + let recovered = 0 // var canvas: any = document.getElementById("canvas") var ctx = canvas.getContext("2d") @@ -115,7 +117,7 @@ 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; + 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) { if (this.persons[b].state == "uninfected") { @@ -125,28 +127,28 @@ class World { } } if (this.persons[a].state == "uninfected") { - uninfected++; + uninfected++ } if (this.persons[a].state == "infected") { - infected++; + infected++ } if (this.persons[a].state == "deceased") { - deceased++; + deceased++ } if (this.persons[a].state == "recovered") { - recovered++; + recovered++ } } - this.graphData.push({ "uninfected": uninfected, "infected": infected, "deceased": deceased, "recovered": recovered }); + this.graphData.push({ "uninfected": uninfected, "infected": infected, "deceased": deceased, "recovered": recovered }) //convert data - let labels = []; - let uninfectedArray = []; - let infectedArray = []; - let deceasedArray = []; - let recoveredArray = []; + let labels = [] + let uninfectedArray = [] + let infectedArray = [] + let deceasedArray = [] + let recoveredArray = [] for (let a = 0; a < this.graphData.length; a++) { - labels.push(a + ""); + labels.push(a + "") uninfectedArray.push(this.graphData[a].uninfected) infectedArray.push(this.graphData[a].infected) deceasedArray.push(this.graphData[a].deceased) @@ -159,12 +161,12 @@ class World { deceasedArray = convertArrayLenght(deceasedArray,20) recoveredArray = convertArrayLenght(recoveredArray,20) - this.chart.data.labels = labels; - this.chart.data.datasets[0].data = uninfectedArray; - this.chart.data.datasets[1].data = infectedArray; - this.chart.data.datasets[2].data = deceasedArray; - this.chart.data.datasets[3].data = recoveredArray; - this.chart.update(); + this.chart.data.labels = labels + this.chart.data.datasets[0].data = uninfectedArray + this.chart.data.datasets[1].data = infectedArray + this.chart.data.datasets[2].data = deceasedArray + this.chart.data.datasets[3].data = recoveredArray + this.chart.update() for (let a: number = 0; a < this.persons.length; a++) { this.persons[a].stateChange() @@ -177,11 +179,18 @@ class World { }, this.framerate) } } +} +class Controls{ + } class Infection { public duration: number public mortality: number public reach: number + + //public state : string + //public exposure: number + constructor(duration: number, mortality: number, reach: number) { this.duration = duration this.mortality = mortality @@ -206,10 +215,10 @@ class Person { public state: string private infectionCounter: number = 0 - private moveStep: number = 0; + private moveStep: number = 0 private size: number = 5 - private xMove: number; - private yMove: number; + private xMove: number + private yMove: number constructor(xPosition: number, yPosition: number, xPositionMax: number, yPositionMax: number, infection: Infection, mobility: Mobility, state: string = "uninfected") { this.xPosition = xPosition @@ -241,20 +250,20 @@ class Person { stateChange() { // if target is reached create a new target if (this.moveStep == 0) { - let angle = Math.random() * Math.PI * 2; - this.xMove = Math.sin(angle) * this.mobility.speed; - this.yMove = Math.cos(angle) * this.mobility.speed; + let angle = Math.random() * Math.PI * 2 + this.xMove = Math.sin(angle) * this.mobility.speed + this.yMove = Math.cos(angle) * this.mobility.speed } - this.moveStep++; + this.moveStep++ if (this.moveStep > this.mobility.distance / this.mobility.speed) { - this.moveStep = 0; + this.moveStep = 0 } // if (this.infectionCounter > this.infection.duration) { this.state = "recovered" } if (this.state == "infected") { - this.infectionCounter++; + this.infectionCounter++ let d = Math.random() if (d < this.infection.mortality / this.infection.duration) { this.state = "deceased" @@ -294,6 +303,7 @@ function randomIntFromInterval(min: number, max: number) { // min and max includ function convertArrayLenght(inputArray: any, length: number):any { + //return inputArray let myNewArray : any = [] for (let a=0; a Minimalistic infection simulation based on very few variables. - + diff --git a/package-lock.json b/package-lock.json index 7a94bcc..42643d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,9 +64,9 @@ "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==" }, "typescript": { - "version": "3.9.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.3.tgz", - "integrity": "sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==" + "version": "3.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz", + "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==" } } } diff --git a/package.json b/package.json index 60215ee..e5ebdc4 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,6 @@ "dependencies": { "@types/chart.js": "^2.9.21", "chart.js": "^2.9.3", - "typescript": "^3.9.3" + "typescript": "^3.9.5" } }