// color scheme: red: '#ff6e6e' | aqua green : '#40f5ce' | blue :#03d3fc | teel green : #1f9aad | #3399ff { let wearMaskColor = "#1f9aad"; let washHandsColor = "#40f5ce"; // let popColorMap = { notInfected: "#03d3fc", infectedWithoutSymp: '#ff6e6e', infectedWithSymp: '#ff6e6e'}; let popInfColorMap = ["#03d3fc", '#ff6e6e'] let start = false; // let infectionCnt = getInfectionDistribution("US"); //replace with actual dataset let infectionCnt = between(10, 90); let ageDistribution = between(5, 90); let numDays = 7; let foodAmount = 5; let exercise = 5; let hospitalBeds = 100; //random assignment let probInfection = 1; let probInfectionMask = 0.7; let probInfectionHands = 0.5; let probInfectionSD = 0.2; let shutdownLevel = 4; let indMask = 0; let indHnds = 0; let indSD = 0; let sldPopMasks = 0; let sldPopHnds = 0; const width = document.getElementById("fullScreen").clientWidth * 0.7; const height = 550; //width * (550/650); const fx = 660/width; const fy = 550/height; const context = DOM.context2d(width, height); //top Bar // let startButton = document.getElementById("start"); // startButton.onclick = function() { // start = !start; // if(start) this.innerHTML = "Pause"; // else this.innerHTML = "Start"; // console.log(start); // } //right dashboard //Width and height var w = document.getElementById("rightDB").clientWidth; var h = 200; var dataset = [];//new Array(numDays).fill(0); var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, w]) .paddingInner(0.05); var yScale = d3.scaleLinear() .domain([0, 100]) .range([0, h]); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Create bars svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return h - yScale(d); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d); }) .attr("fill", function(d) { return "rgb(0, 0, " + Math.round(d * 10) + ")"; }); //Create labels svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; }) .attr("y", function(d) { return h - yScale(d) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); document.getElementById("barChart").innerHTML = ""; document.getElementById("barChart").appendChild(svg.node()); //bottom dashboard -------------------------------------------------------------------------- // define the individual sliders ---------- let sldIndMask = slider({ title: '😷 Do you want to you use a mask?', // desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 1, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#1f9aad', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 0.25 ? 'No 😰' : objs.value < 0.5 ? 'Maybe 😐' : 'Yes 😷'; // objs.desc.textContent = objs.value + ''; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 0.1 ? 0.05 : objs.value > 1 ? -0.05 : 0) + 'px'; }}); let sldIndHnds = slider({ title: '👏 Do you want to wash your hands?', // desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 1, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#40f5ce', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 0.10 ? 'No 😰' : objs.value < 0.50 ? 'Maybe 😐' : 'Yes 👏'; // objs.desc.textContent = objs.value + ''; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 10 ? 5 : objs.value > 99 ? -5 : 0) + 'px'; }}); let sldIndSD = slider({ title: '👬 How many feet of social distance do you maintain?', // descStyle: { // 'pointer-events': 'none' // }, min: 0, max: 6, step: 1, value: 0, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#03d3fc', '#F2F2F2'] }, oninput: objs => { // objs.output.textContent = objs.value == 6 // ? 'Congrats, you did it! 🚶---🚶' // : 'Only ' + (6 - objs.value) + ' more ft to go!'; //Not enough distance yet 👬. // objs.desc.textContent = objs.value == 0 // ? "LET'S COUNT TO 6 ft!" // : d3.range(objs.value) // .map(d => d == 5 ? (d + 1) + '!' : (d + 1) + 'ft...') // .reduce((a, b) => a + ' ' + b, ''); }}); let sldIndAge = slider({ title: '👨‍👦 What is your age group?', // descStyle: { // 'pointer-events': 'none' // }, min: 18, max: 80, step: 5, value: 32, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#787878', '#F2F2F2'] }, oninput: objs => { objs.output.textContent = objs.value < 18 ? 'below 18' : objs.value < 21 ? '18-20yrs' : objs.value < 31 ? '20-30yrs' : objs.value < 41 ? '30-40yrs' : objs.value < 51 ? '40-50yrs' : objs.value < 61 ? '50-60yrs' : objs.value < 71 ? '60-70yrs' : 'Above 70 yrs'; // objs.desc.textContent = objs.value + 'yrs'; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 10 ? 5 : objs.value > 99 ? -5 : 0) + 'px'; }}); sldIndMask.onchange = function() { indMask = this.value; } sldIndHnds.onchange = function() { indHnds = this.value; } sldIndMask.onchange = function() { indMask = this.value; } sldIndSD.onchange = function() { indSD = this.value * 3; } // let indradius = sldIndSD.value * 3; // sldIndSD.onchange = function() { // indradius = this.value * 3; // } // define the community sliders ---------- let sldMask = slider({ title: '😷 What % of population wears masks?', // desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 98, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#1f9aad', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 11 ? '10% 😰' : objs.value < 21 ? '20% ☹️' : objs.value < 31 ? '30% ☹️' : objs.value < 41 ? '40% 😐' : objs.value < 51 ? '50% 😐' : objs.value < 61 ? '60% 😐' : objs.value < 71 ? '70% 🙂' : objs.value < 81 ? '80% 😄' : objs.value < 91 ? '90% 😷' : '💯'; // objs.desc.textContent = objs.value + '%'; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 10 ? 5 : objs.value > 99 ? -5 : 0) + 'px'; }}); let sldHnds = slider({ title: '👏 What % of population washes hands?', // desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 98, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#40f5ce', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 11 ? '10% 😰' : objs.value < 21 ? '20% ☹️' : objs.value < 31 ? '30% ☹️' : objs.value < 41 ? '40% 😐' : objs.value < 51 ? '50% 😐' : objs.value < 61 ? '60% 😐' : objs.value < 71 ? '70% 🙂' : objs.value < 81 ? '80% 😄' : objs.value < 91 ? '90% 👏' : '💯'; // objs.desc.textContent = objs.value + '%'; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 10 ? 5 : objs.value > 99 ? -5 : 0) + 'px'; }}); let sldSDPer = slider({ title: '🚶-🚶 What % of population is socially distant?', descStyle: { 'pointer-events': 'none' }, min: 0, max: 98, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#03d3fc', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 11 ? '10% 😰' : objs.value < 21 ? '20% ☹️' : objs.value < 31 ? '30% ☹️' : objs.value < 41 ? '40% 😐' : objs.value < 51 ? '50% 😐' : objs.value < 61 ? '60% 😐' : objs.value < 71 ? '70% 🙂' : objs.value < 81 ? '80% 😄' : objs.value < 91 ? '90% 🚶-🚶' : '💯'; // objs.desc.textContent = objs.value + '%'; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 10 ? 5 : objs.value > 99 ? -5 : 0) + 'px'; }}); let sldSD = slider({ title: '👬 How many feet of social distance does population maintain?', descStyle: { 'pointer-events': 'none' }, min: 0, max: 6, step: 1, value: 0, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#03d3fc', '#F2F2F2'] }, oninput: objs => { // objs.output.textContent = objs.value == 6 // ? 'Congrats, you did it! 🚶---🚶' // : 'Only ' + (6 - objs.value) + ' more ft to go!'; //Not enough distance yet 👬. // objs.desc.textContent = objs.value == 0 // ? "LET'S COUNT TO 6 ft!" // : d3.range(objs.value) // .map(d => d == 5 ? (d + 1) + '!' : (d + 1) + 'ft...') // .reduce((a, b) => a + ' ' + b, ''); }}); let sldLD = slider({ title: 'What is the level of shutdown?', descStyle: { 'pointer-events': 'none' }, min: 1, max: 4, step: 1, value: 1, theme: 'white-round', background: { type: 'progress', colors: ['#787878', '#F2F2F2', '#787878'] }, oninput: objs => { objs.output.textContent = objs.value == 3? 'Stage 3' : objs.value == 2? 'Stage 2' : objs.value == 1? 'Stage 1' : 'Stage 4'; //Not enough distance yet 👬. objs.desc.textContent = objs.value == 1? "COMPLETE SHUTDOWN! - Only Essentials: Pharmacy, Hospital and Grocery Stores Open" : objs.value == 2? 'SECONDARY BUSINESSES OPEN! - Essentials + Banks, Open!' : objs.value == 3? 'TERTIARY BUSINESSES OPEN! - Secondary Businesses + Schools Open!' : 'EVERYTHING NORMAL!!!'; }}); sldMask.onchange = function() { sldPopMasks = this.value; } sldHnds.onchange = function() { sldPopHnds = this.value; } let sldPopSD = 0; sldSDPer.onchange = function(){ sldPopSD = this.value; } let radius = sldSD.value * 3; sldSD.onchange = function() { radius = this.value * 3; } //getElementById for sliders ---------- document.getElementById("indmasks").innerHTML = ""; document.getElementById("indhands").innerHTML = ""; document.getElementById("indsocialDist").innerHTML = ""; document.getElementById("indAge").innerHTML = ""; document.getElementById("masks").innerHTML = ""; document.getElementById("hands").innerHTML = ""; document.getElementById("socialDistPer").innerHTML = ""; document.getElementById("socialDist").innerHTML = ""; document.getElementById("shutdown").innerHTML = ""; document.getElementById("mylegend").innerHTML = ""; document.getElementById("worstCase").innerHTML = ""; document.getElementById("indmasks").appendChild(sldIndMask); document.getElementById("indhands").appendChild(sldIndHnds); document.getElementById("indsocialDist").appendChild(sldIndSD); document.getElementById("indAge").appendChild(sldIndAge); document.getElementById("masks").appendChild(sldMask); document.getElementById("hands").appendChild(sldHnds); document.getElementById("socialDistPer").appendChild(sldSDPer); document.getElementById("socialDist").appendChild(sldSD); document.getElementById("shutdown").appendChild(sldLD); document.getElementById("mylegend").appendChild(legend); worstCaseChart.width = 284; worstCaseChart.height = 180; document.getElementById("worstCase").appendChild(worstCaseChart); // let tempData = new Array(10).fill().map(() => ({ // name: "day", // value: between(0, 100), // })); // document.getElementById("barChart").appendChild(plotBarChart(tempData)); //END of bottom dashboard -------------------------------------------------------------------------- context.canvas.onmousemove = (e) => { mutable mousePos = {x: e.offsetX, y: e.offsetY}; } context.lineJoin = "round"; context.lineCap = "round"; //exposureIntensity: 0.1 for parks const places = [{name: 'h1', x1: 0/fx, y1: 115/fy, x2: 55/fx, y2: 77/fy, x3: 127/fx, y3:124/fy, x4: 42/fx, y4: 162/fy, exposureIntensity: 2}, {name: 'h2', x1: 2/fx, y1: 338/fy, x2: 32/fx, y2: 369/fy, x3: 64/fx, y3:396/fy, x4: 4/fx, y4: 425/fy, exposureIntensity: 2}, {name: 'h3', x1: 16/fx, y1: 341/fy, x2: 111/fx, y2: 294/fy, x3: 147/fx, y3: 337/fy, x4: 86/fx, y4: 374/fy, exposureIntensity: 2}, {name: 'h4', x1: 116/fx, y1: 290/fy, x2: 185/fx, y2: 255/fy, x3: 231/fx, y3: 297/fy, x4: 175/fx, y4: 326/fy, exposureIntensity: 2}, {name: 'h5', x1: 197/fx, y1: 249/fy, x2: 266/fx, y2: 213/fy, x3: 321/fx, y3: 255/fy, x4: 245/fx, y4: 294/fy, exposureIntensity: 2}, {name: 'h6', x1: 0/fx, y1: 504/fy, x2: 34/fx, y2: 484/fy, x3: 63/fx, y3: 521/fy, x4: 19/fx, y4: 546/fy, exposureIntensity: 2}, {name: 'h7', x1: 34/fx, y1: 473/fy, x2: 107/fx, y2: 442/fy, x3: 136/fx, y3: 483/fy, x4: 73/fx, y4: 518/fy, exposureIntensity: 2}, {name: 'h8', x1: 114/fx, y1: 433/fy, x2: 182/fx, y2: 397/fy, x3: 224/fx, y3: 442/fy, x4: 155/fx, y4: 477/fy, exposureIntensity: 2}, {name: 'h9', x1: 189/fx, y1: 395/fy, x2: 260/fx, y2: 353/fy, x3: 309/fx, y3: 400/fy, x4: 238/fx, y4: 438/fy, exposureIntensity: 2}, {name: 'h10', x1: 595/fx, y1: 169/fy, x2: 667/fx, y2: 112/fy, x3: 666/fx, y3: 161/fy, x4: 663/fx, y4: 206/fy, exposureIntensity: 2}, {name: 'h11', x1: 133/fx, y1: 545/fy, x2: 216/fx, y2: 482/fy, x3: 255/fx, y3: 544/fy, x4: 208/fx, y4: 549/fy, exposureIntensity: 2}, {name: 'h12', x1: 435/fx, y1: 538/fy, x2: 474/fx, y2: 519/fy, x3: 510/fx, y3: 547/fy, x4: 473/fx, y4: 549/fy, exposureIntensity: 2}, {name: 'h13', x1: 478/fx, y1: 516/fy, x2: 542/fx, y2: 482/fy, x3: 595/fx, y3: 531/fy, x4: 546/fx, y4: 549/fy, exposureIntensity: 2}, {name: 'phar', x1: 300/fx, y1: 180/fy, x2: 395/fx, y2: 105/fy, x3: 455/fx, y3:165/fy, x4: 375/fx, y4: 220/fy, exposureIntensity: 1}, {name: 'hosp', x1: 430/fx, y1: 250/fy, x2: 550/fx, y2: 130/fy, x3: 630/fx, y3:230/fy, x4: 500/fx, y4: 295/fy, exposureIntensity: 1}, {name: 'shop', x1: 385/fx, y1: 375/fy, x2: 375/fx, y2: 305/fy, x3: 535/fx, y3:370/fy, x4: 460/fx, y4: 420/fy, exposureIntensity: 1}, {name: 'bank', x1: 300/fx, y1: 340/fy, x2: 375/fx, y2: 270/fy, x3: 435/fx, y3:300/fy, x4: 375/fx, y4: 375/fy, exposureIntensity: 1}, {name: 'poli', x1: 175/fx, y1: 110/fy, x2: 235/fx, y2: 50/fy, x3: 340/fx, y3:100/fy, x4: 305/fx, y4: 180/fy, exposureIntensity: 1}, {name: 'fire', x1: 75/fx, y1: 205/fy, x2: 155/fx, y2: 140/fy, x3: 235/fx, y3:195/fy, x4: 140/fx, y4: 240/fy, exposureIntensity: 1}, {name: 'gas', x1: 70/fx, y1: 55/fy, x2: 165/fx, y2: 0/fy, x3: 240/fx, y3:45/fy, x4: 139/fx, y4: 98/fy, exposureIntensity: 1}, {name: 'school', x1: 287/fx, y1: 461/fy, x2: 377/fx, y2: 377/fy, x3: 458/fx, y3:458/fy, x4: 375/fx, y4: 505/fy, exposureIntensity: 1}, {name: 'cafe', x1: 465/fx, y1: 425/fy, x2: 590/fx, y2: 350/fy, x3: 655/fx, y3:428/fy, x4: 582/fx, y4: 482/fy, exposureIntensity: 1}, {name: 'cafe2', x1: 433/fx, y1: 78/fy, x2: 590/fx, y2: 340/fy, x3: 685/fx, y3:120/fy, x4: 504/fx, y4: 225/fy, exposureIntensity: 1}] //indices of places according to level of shutdown let homeInds = 12; let level1ShutdownInds = homeInds + 3; let level2ShutdownInds = level1ShutdownInds + 4; let level3ShutdownInds = level2ShutdownInds + 1; let level4ShutdownInds = level3ShutdownInds + 2; let levelShutdownInds = [homeInds, level1ShutdownInds, level2ShutdownInds, level3ShutdownInds, level4ShutdownInds] //people properties let tadpoles = new Array(n).fill().map(() => ({ vx: (Math.random() - 0.5),// * v, vy: (Math.random() - 0.5),// * v, px: new Array(m), py: new Array(m), dsx: new Array(m), dsy: new Array(m), src: 0, dst: 11, count: 0, color: '#03d3fc', //dark blue: '#3399ff or light blue color: #03d3fc infected: false, age: between(18, 39), speed: v, //set later to v/log age-16 placesCnt: 6, places: new Array(6), homeIndex: between(0, homeInds), visitedCnt: 0, show: true, susceptibility: 0, wearingMask: false, washingHands: false, socialDistance: 0, totalDailyExposure: 0, chanceOfInfection: 0, totalDailyExposureNormal: 0, chanceOfInfectionNormal: 0, infectedNormal: false, colorNormal: "#03d3fc", })); let above40 = Math.ceil(0.4*n); // console.log(tadpoles); for (let i = 0; i < n; i++){ if(i < above40) //40% above 40 tadpoles[i].age = between(40, 80); tadpoles[i].susceptibility = getSusceptibility(tadpoles[i].age); //set speed according to age tadpoles[i].speed = v/(Math.log(tadpoles[i].age - 16)/3); tadpoles[i].vx *= tadpoles[i].speed; tadpoles[i].vy *= tadpoles[i].speed; } tadpoles = shuffle(tadpoles); let infected = Math.floor(0.1*n); for (let i = 0; i < n; i ++){ if(i < infected){ tadpoles[i].infected = true; tadpoles[i].color = popInfColorMap[1]; } } tadpoles = shuffle(tadpoles); //assign houses let houseInd = 0; for(let i = 0; i < n; i++){ tadpoles[i].homeIndex = houseInd; if(!((i+1)%4)) houseInd++; } let selfIndex = 0; // swap self to be first array element for (let i = 0; i < n; i ++){ if(!tadpoles[i].infected){ let temp = tadpoles[i]; tadpoles[i] = tadpoles[selfIndex]; tadpoles[selfIndex] = temp; break; } } // let normalTadpoles = [].concat(tadpoles); //start here!!! let cumInfected = 0; let cumInfectedNormal = 0; //days loop for (let day = 0; day < numDays; day++){ document.getElementById("ticker").innerHTML = "Simulating Day "+ (day+1)+"..."; let allCompletedPath = 0; for (let i = 0; i < n; i++){ // reset totalDailyExposure // tadpoles[i].totalDailyExposure = 0; shutdownLevel = sldLD.value; //assign places according to shutdown level tadpoles[i].placesCnt = between(0, shutdownLevel+2); if(tadpoles[i].placesCnt == 0){ allCompletedPath++; console.log("N Completed path: ", allCompletedPath); // tadpoles[i].show = false; } // console.log(tadpoles[i].placesCnt); for (let j = 0; j < tadpoles[i].placesCnt - 1; j++){ tadpoles[i].places[j] = between(0, levelShutdownInds[shutdownLevel]); } tadpoles[i].places[tadpoles[i].placesCnt - 1] = tadpoles[i].homeIndex; tadpoles[i].visitedCnt = 0; //assign start from home, and first destination let iSrc = tadpoles[i].src = tadpoles[i].homeIndex; let iDst = tadpoles[i].dst = tadpoles[i].homeIndex; if(tadpoles[i].placesCnt != 0) iDst = tadpoles[i].dst = tadpoles[i].places[0]; tadpoles[i].px.fill(between((places[iSrc].x1 + places[iSrc].x4)/2, (places[iSrc].x2 + places[iSrc].x3)/2)); tadpoles[i].py.fill(between((places[iSrc].y1 + places[iSrc].y2)/2, (places[iSrc].y3 + places[iSrc].y4)/2)); tadpoles[i].dsx.fill(between((places[iDst].x1 + places[iDst].x4)/2, (places[iDst].x2 + places[iDst].x3)/2)); tadpoles[i].dsy.fill(between((places[iDst].y1 + places[iDst].y2)/2, (places[iDst].y3 + places[iDst].y4)/2)); } let temp = []; let cycle = 0 //debugging loop // for (let t of tadpoles) { // console.log("source: ", t.px, t.py); // console.log("Destination: ", t.dsx, t.dsy); // } while (allCompletedPath < n) { //inside a day loop //if(start) { //freeze while context.clearRect(0, 0, width, height); context.drawImage(img, 0, 0, width, height); let td = 0 //link sliders and variables here ********* for (let t of tadpoles) { if(td == selfIndex){ tadpoles[td].washingHands = t.washingHands = !!sldIndHnds.value; tadpoles[td].wearingMask = t.wearingMask = !!sldIndMask.value; tadpoles[td].socialDistance = t.socialDistance = sldIndSD.value; } else { //population if(td < ((sldHnds.value/100)*n)+1) tadpoles[td].washingHands = t.washingHands = true; else tadpoles[td].washingHands = t.washingHands = false; if(td < ((sldMask.value/100)*n)+1) tadpoles[td].wearingMask = t.wearingMask = true; else tadpoles[td].wearingMask = t.wearingMask = false; if(td < ((sldSDPer.value/100)*n)+1) tadpoles[td].socialDistance = t.socialDistance = sldSD.value; else tadpoles[td].socialDistance = t.socialDistance = 0; } //set params according to input age of user tadpoles[selfIndex].age = sldIndAge.value; tadpoles[selfIndex].susceptibility = getSusceptibility(tadpoles[selfIndex].age); tadpoles[selfIndex].speed = v/(Math.log(tadpoles[selfIndex].age - 16)/3); tadpoles[selfIndex].vx *= tadpoles[selfIndex].speed; tadpoles[selfIndex].vy *= tadpoles[selfIndex].speed; // console.log("tadpole: ", td); if (reachedDst(t) && tadpoles[td].visitedCnt < tadpoles[td].placesCnt){ if(!t.infected){//infection transmission USER CONDITIONS for(let k = 0; k < n; k++){ if(k == td) continue; // let arrivedAtMyDest = tadpoles[k]; let arrivedAtMyDest = {px:0, py:0} arrivedAtMyDest.px = tadpoles[k].px; arrivedAtMyDest.py = tadpoles[k].py; let dstn = places[t.dst]; //infected person at same destination if(isAroundDest(arrivedAtMyDest, dstn) && tadpoles[k].infected){ if(td == selfIndex) console.log("MET INFECTED ", k); let maskFactor = 1; let handsFactor = 1; if(tadpoles[k].wearingMask) maskFactor = 0.8; if(tadpoles[k].washingHands) handsFactor = 0.7; let infOther = maskFactor * handsFactor * (1/((tadpoles[k].socialDistance/2)+1)); // * (1/((getDist(t, tadpoles[k])/15)+1)); include in infec? maskFactor = handsFactor = 1; if(t.wearingMask) maskFactor = 0.8; if(t.washingHands) handsFactor = 0.7; let infSelf = maskFactor * handsFactor * (1/((t.socialDistance/2)+1)); let infectiousness = infSelf * infOther; if(td == selfIndex){ console.log("MET INFECTED ", k, " infOther: ", infOther, " infSelf: ", infSelf); } tadpoles[td].totalDailyExposure += (infectiousness * places[t.dst].exposureIntensity); } } t.totalDailyExposure = tadpoles[td].totalDailyExposure; let chanceOfInfection = 1 - Math.pow(1-t.susceptibility, t.totalDailyExposure); tadpoles[td].chanceOfInfection = t.chanceOfInfection = chanceOfInfection; //if(td == selfIndex) console.log( "Self Infection Chance: ", chanceOfInfection); if(chanceOfInfection >= 0.5){ //transmit infection tadpoles[td].infected = t.infected = true; tadpoles[td].color = t.color = popInfColorMap[1]; } } //----------------------------infection transmission NORMAL CONDITIONS if(!t.infectedNormal){//infection transmission for(let k = 0; k < n; k++){ if(k == td) continue; // let arrivedAtMyDest = tadpoles[k]; let arrivedAtMyDest = {px:0, py:0} arrivedAtMyDest.px = tadpoles[k].px; arrivedAtMyDest.py = tadpoles[k].py; let dstn = places[t.dst]; //infected person at same destination if(isAroundDest(arrivedAtMyDest, dstn) && tadpoles[k].infectedNormal){ //if(td == selfIndex) console.log("MET INFECTED Normal", k); let infectiousness = 1; tadpoles[td].totalDailyExposureNormal += (infectiousness * places[t.dst].exposureIntensity); } } t.totalDailyExposureNormal = tadpoles[td].totalDailyExposureNormal; let chanceOfInfectionNormal = 1 - Math.pow(1-t.susceptibility, t.totalDailyExposureNormal); tadpoles[td].chanceOfInfectionNormal = t.chanceOfInfectionNormal = chanceOfInfectionNormal; //if(td == selfIndex) console.log( "Self Infection Chance: ", chanceOfInfection); if(chanceOfInfectionNormal >= 0.5){ //transmit infection tadpoles[td].infectedNormal = t.infectedNormal = true; tadpoles[td].colorNormal = t.colorNormal = popInfColorMap[1]; } } //---------------------------------------END OF INFECTION TRANSMISSION tadpoles[td].visitedCnt ++; tadpoles[td].src = t.src = t.dst; tadpoles[td].px = t.px; //= t.dsx tadpoles[td].py = t.py; //= t.dsy if(tadpoles[td].visitedCnt == tadpoles[td].placesCnt) { //reached all places allCompletedPath++; // console.log(td, " Completed ", allCompletedPath); // tadpoles[td].show = false; } else{ //if(tadpoles[td].visitedCnt <= tadpoles[td].placesCnt-1) tadpoles[td].dst = t.dst = tadpoles[td].places[tadpoles[td].visitedCnt]; // console.log(tadpoles[td].visitedCnt, tadpoles[td].placesCnt); t.dsx.fill(between((places[t.dst].x1 + places[t.dst].x4)/2, (places[t.dst].x2 + places[t.dst].x3)/2)); tadpoles[td].dsx = t.dsx; t.dsy.fill(between((places[t.dst].y1 + places[t.dst].y2)/2, (places[t.dst].y3 + places[t.dst].y4)/2)); tadpoles[td].dsy = t.dsy; } } // else if(tadpoles[td].visitedCnt > = tadpoles[td].placesCnt){ //people sitting at home currently // if(!t.infected){//infection transmission // for(let k = 0; k < n; k++){ // if(k == td) continue; // // let arrivedAtMyDest = tadpoles[k]; // let arrivedAtMyDest = {px:0, py:0} // arrivedAtMyDest.px = tadpoles[k].px; // arrivedAtMyDest.py = tadpoles[k].py; // let dstn = places[t.dst]; // //infected person at same destination // if(isAroundDest(arrivedAtMyDest, dstn) && tadpoles[k].infected){ // if(td == selfIndex) console.log("MET INFECTED ", k); // let infectiousness = 1; // tadpoles[td].totalDailyExposure += (infectiousness * places[t.dst].exposureIntensity); // } // } // t.totalDailyExposure = tadpoles[td].totalDailyExposure; // let chanceOfInfection = 1 - Math.pow(1-t.susceptibility, t.totalDailyExposure); // tadpoles[td].chanceOfInfection = t.chanceOfInfection = chanceOfInfection; // if(td == selfIndex) console.log( "Self Infection Chance: ", chanceOfInfection); // if(chanceOfInfection >= 0.5){ //transmit infection // tadpoles[td].infected = t.infected = true; // tadpoles[td].color = t.color = popInfColorMap[1]; // } // } // } let dx = t.vx = tadpoles[td].vx = ((t.dsx - t.px)/t.dsx) * t.speed;// v; let dy = t.vy = tadpoles[td].vy = ((t.dsy - t.py)/t.dsy) * t.speed;//v; // console.log("changes: ", dx, dy, "currPos: ", t.px, t.py, "dest: ", t.dsx, t.dsy, "diff: ", t.dsx - t.px, (t.dsy - t.px)); let x = t.px[0] += dx; let y = t.py[0] += dy; let speed = Math.sqrt(dx * dx + dy * dy); const count = speed * 10; const k1 = -5 - speed / 3; // Bounce off the walls. if (x < 0 || x > width) t.vx *= -1; if (y < 0 || y > height) t.vy *= -1; //social distancing for (let i = 0; i < n; ++i){ if (i == td) continue; let p2x = tadpoles[i].px[0]; let p2y = tadpoles[i].py[0]; if (i > td){ p2x += tadpoles[i].vx; p2y += tadpoles[i].vy; } // console.log(t.px); // console.log(p2x); // let dist = Math.sqrt(Math.pow(Math.abs(x-p2x), 2) + Math.pow(Math.abs(y-p2x), 2)) // if (dist < 12){ // t.color = '#ff6e6e'; // } } // Swim! for (var j = 1; j < m; ++j) { const vx = x - t.px[j]; const vy = y - t.py[j]; const k2 = Math.sin(((t.count += count) + j * 3) / 300) / speed; t.px[j] = (x += dx / speed * k1) - dy * k2; t.py[j] = (y += dy / speed * k1) + dx * k2; speed = Math.sqrt((dx = vx) * dx + (dy = vy) * dy); } if(tadpoles[td].show){ // console.log(tadpoles[td].visitedCnt); // Head if(td == selfIndex){ //you look slike a star let x, y, r, n, inset; x = t.px[0]; y = t.py[0]; r = 5; n = 5; inset = 3; context.save(); context.beginPath(); context.translate(x, y); context.moveTo(0,0-r); for (var i = 0; i < n; i++) { context.rotate(Math.PI / n); context.lineTo(0, 0 - (r*inset)); context.rotate(Math.PI / n); context.lineTo(0, 0 - r); } context.closePath(); context.fillStyle = t.color; context.fill(); context.restore(); } else{ // others look like a dot context.save(); context.translate(t.px[0], t.py[0]); context.rotate(Math.atan2(t.vy, t.vx)); context.beginPath(); context.ellipse(0, 0, 5, 5, 0, 0, 2 * Math.PI); context.fillStyle = t.color; context.fill(); context.restore(); } if(t.wearingMask){ //draw mask let temp = context.lineWidth; context.lineWidth = 3; context.beginPath(); context.arc(t.px[0], t.py[0], 7, 0, 2 * Math.PI); context.strokeStyle = wearMaskColor; context.stroke(); context.lineWidth = temp; } if(t.washingHands){ //draw hands let temp = context.lineWidth; context.lineWidth = 3; context.beginPath(); context.arc(t.px[0], t.py[0], 6, 0, 2 * Math.PI); context.strokeStyle = washHandsColor; context.stroke(); context.lineWidth = temp; } //social distancing context.beginPath(); context.arc(t.px[0], t.py[0], t.socialDistance*3, 0, 2 * Math.PI); context.strokeStyle = t.color; context.stroke(); // Body context.beginPath(); context.moveTo(t.px[0], t.py[0]); for (let i = 1; i < 3; ++i) context.lineTo(t.px[i], t.py[i]); context.lineWidth = 4; context.strokeStyle = t.color; context.stroke(); // Tail context.beginPath(); context.moveTo(t.px[0], t.py[0]); for (let i = 1; i < m; ++i) context.lineTo(t.px[i], t.py[i]); context.lineWidth = 2; context.strokeStyle = t.color; context.stroke(); } td++; } //after tadpoles loop cycle++; yield context.canvas; document.getElementById("mainScene").innerHTML = ""; document.getElementById("mainScene").appendChild(context.canvas); if(cycle == 100) // return 0; cycle = 0; }//freeze while end } //inside a day loop end (while) //plot bar chart at the end of the day let tempInf = 0; let tempInfNormal = 0; for(let j = 0; j < n; j++){ if(tadpoles[j].infected) tempInf ++; if(tadpoles[j].infectedNormal) tempInfNormal++; } let newInfections = tempInf - cumInfected - infected; let newInfectionsNormal = tempInfNormal - cumInfectedNormal - infected; console.log("INFECTIONSSS: ", newInfections, newInfectionsNormal ); cumInfected += newInfections; cumInfectedNormal += newInfectionsNormal; let perSaved = (Math.abs(newInfectionsNormal - newInfections)*100)/n //--------------------------add column---------------------------------------------------------------- let perTempInf = (tempInf/n)*100; perTempInf = Number(perTempInf.toPrecision(4)); dataset.push(perTempInf); // dataset.push(perSaved); //Update scale domains xScale.domain(d3.range(dataset.length)); yScale.domain([0, 100]); let maxValue = 50; var bars = svg.selectAll("rect") .data(dataset); bars.enter() .append("rect") .attr("x", w) .attr("y", function(d) { return h - yScale(d); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d); }) .attr("fill", function(d) { return "rgb(3, 211, 255)"; //" + 255 - Math.round(d * 10) + " }) .merge(bars) .transition() .duration(500) .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return h - yScale(d); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d); }); //Update all labels var labels = svg.selectAll("text") .data(dataset); labels.enter() .append("text") .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", function(d) { return "black"; }) .attr("x", function(d, i) { return w + xScale.bandwidth() / 2; }) .attr("y", function(d) { if (d < 0.07 * maxValue){ return h - yScale(d) - 7 } else { return h - yScale(d) + 14; } }) .merge(labels) .transition() .duration(500) .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; }); console.log("End of Day: ", day+1); }//days loop end document.getElementById("ticker").innerHTML = "End of Experience"; }