{ const width = document.getElementById("fullScreen").clientWidth * 0.7; const height = 550; //width * (550/650); const fx = 950/width; const fy = 800/height; const context = DOM.context2d(width, height); //top dashboard const pFood = html`

`; (async () => { let sum = 0; let n = 10000; let s = 5000; let k = s; while(true){ let t = between(10, 10000); if(s < t){ for (k = s; k < t; ++k){ sum += k * k; let p = (k / n) * 100; pFood.style.width = p + "%"; if(p < 20) pFood.style.background = "red"; else pFood.style.background = "green"; await new Promise(requestAnimationFrame); } } else { for (k = s; k > t; --k){ sum -= k * k; let p = (k / n) * 100; pFood.style.width = p + "%"; if(p < 20) pFood.style.background = "red"; else pFood.style.background = "green"; await new Promise(requestAnimationFrame); } } s = k; } pFood.value = sum; pFood.dispatchEvent(new CustomEvent("input")); pFood.style.background = "green"; })(); const pExer = html`

`; (async () => { let sum = 0; let n = 10000; let s = 0; let k = s; while(true){ let t = between(10, 10000); if(s < t){ for (k = s; k < t; ++k){ sum += k * k; let p = (k / n) * 100; pExer.style.width = p + "%"; if(p < 20) pExer.style.background = "red"; else pExer.style.background = "green"; await new Promise(requestAnimationFrame); } } else { for (k = s; k > t; --k){ sum -= k * k; let p = (k / n) * 100; pExer.style.width = p + "%"; if(p < 20) pExer.style.background = "red"; else pExer.style.background = "green"; await new Promise(requestAnimationFrame); } } s = k; } pExer.value = sum; pExer.dispatchEvent(new CustomEvent("input")); pExer.style.background = "green"; })(); const pQuar = html`

`; (async () => { let sum = 0; let n = 10000; let s = 10000; let k = s; while(true){ let t = between(10, 10000); if(s < t){ for (k = s; k < t; ++k){ sum += k * k; let p = (k / n) * 100; pQuar.style.width = p + "%"; if(p < 20) pQuar.style.background = "red"; else pQuar.style.background = "green"; await new Promise(requestAnimationFrame); } } else { for (k = s; k > t; --k){ sum -= k * k; let p = (k / n) * 100; pQuar.style.width = p + "%"; if(p < 20) pQuar.style.background = "red"; else pQuar.style.background = "green"; await new Promise(requestAnimationFrame); } } s = k; } pQuar.value = sum; pQuar.dispatchEvent(new CustomEvent("input")); pQuar.style.background = "green"; })(); const pHosp = html`

`; (async () => { let sum = 0; let n = 10000; let s = 5000; let k = s; while(true){ let t = between(10, 10000); if(s < t){ for (k = s; k < t; ++k){ sum += k * k; let p = (k / n) * 100; pHosp.style.width = p + "%"; if(p < 50) pHosp.style.background = "green"; else pHosp.style.background = "red"; await new Promise(requestAnimationFrame); } } else { for (k = s; k > t; --k){ sum -= k * k; let p = (k / n) * 100; pHosp.style.width = p + "%"; if(p < 50) pHosp.style.background = "green"; else pHosp.style.background = "red"; await new Promise(requestAnimationFrame); } } s = k; } pHosp.value = sum; pHosp.dispatchEvent(new CustomEvent("input")); pHosp.style.background = "green"; })(); document.getElementById("food").innerHTML = ""; document.getElementById("exer").innerHTML = ""; document.getElementById("quar").innerHTML = ""; document.getElementById("hospCap").innerHTML = ""; document.getElementById("hour").innerHTML = ""; document.getElementById("day").innerHTML = ""; document.getElementById("week").innerHTML = ""; document.getElementById("food").appendChild(pFood); document.getElementById("exer").appendChild(pExer); document.getElementById("quar").appendChild(pQuar); document.getElementById("hospCap").appendChild(pHosp); //right dashboard let sldMask = slider({ title: '1. Wear Masks! 😷 : Percentage of population wearing masks', desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 100, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#1f9aad', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 10 ? '😰' : objs.value < 30 ? '☹️' : objs.value < 50 ? '😐' : objs.value < 70 ? '🙂' : objs.value < 90 ? '😄' : objs.value < 99 ? '😷' : '💯'; 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: '2. Wash Hands 👏 : Percentage of population washing hands', desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 100, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#40f5ce', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 10 ? '😰' : objs.value < 30 ? '☹️' : objs.value < 50 ? '😐' : objs.value < 70 ? '🙂' : objs.value < 90 ? '😄' : objs.value < 99 ? '👏' : '💯'; 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: '3. Social Distance: How many feet of distance do you maintain?', descStyle: { 'pointer-events': 'none' }, min: 0, max: 6, step: 1, value: 0, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#1f9aad', '#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!" : d3.range(objs.value) .map(d => d == 5 ? (d + 1) + '!' : (d + 1) + '...') .reduce((a, b) => a + ' ' + b, ''); }}); let radius = sldSD.value * 3; sldSD.onchange = function() { radius = this.value * 3; } let sldBds = slider({ titleStyle: { 'font-size': '11px' }, min: 0, max: 20, step : 1, divStyle: { 'display': 'inline-block', 'text-align': 'center', 'margin-left': '3.5px' }, sliderStyle: { 'width': '100px', 'background': '#FFA5D0' }, theme: 'white-round', oninput: objs => { mutable HOSPITAL_BEDS = Array(+objs.value + 1).join('🛌'); } }); let sldResA = slider({ title: 'Resources Available', desc: "", min: 0, max: 100, step: 1, divAttrs: { id: 'slider1' }, divStyle: { display: 'inline-block' }, sliderStyle: { width: '200px' }, theme: 'white-round', //or default-round oninput: objs => { let secondSlider = d3.select('#slider2'); if (!secondSlider.empty()) { secondSlider.node().update(100 - objs.value); secondSlider.select('input').node().style.background = d3.interpolateCool(1 - objs.progress); objs.slider.style.background = d3.interpolateCool(objs.progress); if (objs.value >= 50) { objs.output.textContent = '💃'; secondSlider.select('span').node().textContent = '🕺'; } else { objs.output.textContent = '🕺'; secondSlider.select('span').node().textContent = '💃'; } } else { objs.slider.style.background = d3.interpolateCool(objs.progress); objs.output.textContent = '💃'; }; }}); let sldResU = slider({ title: 'Resources Used', desc: '', min: 0, max: 100, step: 1, value: 50, divAttrs: { id: 'slider2' }, divStyle: { display: 'inline-block' }, sliderStyle: { width: '200px' }, theme: 'white-round', //or `default-round oninput: objs => { let secondSlider = d3.select('#slider1'); if (!secondSlider.empty()) { secondSlider.node().update(100 - objs.value); secondSlider.select('input').node().style.background = d3.interpolateCool(1 - objs.progress); objs.slider.style.background = d3.interpolateCool(objs.progress); if (objs.value <= 50) { objs.output.textContent = '🕺'; secondSlider.select('span').node().textContent = '💃'; } else { objs.output.textContent = '💃'; secondSlider.select('span').node().textContent = '🕺'; }; } else { objs.slider.style.background = d3.interpolateCool(objs.progress); objs.output.textContent = '🕺'; }; }}); document.getElementById("masks").innerHTML = ""; document.getElementById("hands").innerHTML = ""; document.getElementById("socialDist").innerHTML = ""; // document.getElementById("resources").innerHTML = ""; document.getElementById("masks").appendChild(sldMask); document.getElementById("hands").appendChild(sldHnds); document.getElementById("socialDist").appendChild(sldSD); // document.getElementById("resources").appendChild(sldResA); // document.getElementById("resources").appendChild(sldResU); context.canvas.onmousemove = (e) => { mutable mousePos = {x: e.offsetX, y: e.offsetY}; } context.lineJoin = "round"; context.lineCap = "round"; const places = [{name: 'school', x1: 29/fx, y1: 155/fy, x2: 185/fx, y2: 13/fy, x3: 303/fx, y3:138/fy, x4: 156/fx, y4: 225/fy}, {name: 'cafe', x1: 354/fx, y1: 140/fy, x2: 345/fx, y2: 9/fy, x3: 685/fx, y3:120/fy, x4: 504/fx, y4: 225/fy}, {name: 'phar', x1: 196/fx, y1: 296/fy, x2: 319/fx, y2: 175/fy, x3: 453/fx, y3:299/fy, x4: 323/fx, y4: 372/fy}, {name: 'bank', x1: 701/fx, y1: 126/fy, x2: 820/fx, y2: 18/fy, x3: 925/fx, y3:114/fy, x4: 806/fx, y4: 186/fy}, {name: 'hosp', x1: 32/fx, y1: 490/fy, x2: 197/fx, y2: 339/fy, x3: 308/fx, y3:477/fy, x4: 155/fx, y4: 564/fy}, {name: 'poli', x1: 601/fx, y1: 290/fy, x2: 718/fx, y2: 176/fy, x3: 924/fx, y3:319/fy, x4: 795/fx, y4: 398/fy}, {name: 'gas', x1: 364/fx, y1: 428/fy, x2: 543/fx, y2: 312/fy, x3: 649/fx, y3:383/fy, x4: 471/fx, y4: 486/fy}, {name: 'cremH', x1: 30/fx, y1: 705/fy, x2: 169/fx, y2: 632/fy, x3: 290/fx, y3:721/fy, x4: 171/fx, y4: 786/fy}, {name: 'redH', x1: 245/fx, y1: 583/fy, x2: 371/fx, y2: 504/fy, x3: 488/fx, y3:607/fy, x4: 383/fx, y4: 665/fy}, {name: 'fire', x1: 608/fx, y1: 489/fy, x2: 762/fx, y2: 401/fy, x3: 865/fx, y3:487/fy, x4: 733/fx, y4: 563/fy}, {name: 'mgH', x1: 401/fx, y1: 731/fy, x2: 589/fx, y2: 594/fy, x3: 652/fx, y3: 699/fy, x4: 500/fx, y4: 787/fy}, {name: 'shop', x1: 667/fx, y1: 675/fy, x2: 798/fx, y2: 553/fy, x3: 926/fx, y3:682/fy, x4: 800/fx, y4: 753/fy}] 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: 'blue' })); for (let i = 0; i < n; i++){ let iSrc = tadpoles[i].src = between(0, 11); let iDst = tadpoles[i].dst = between(0, 11); 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 (true) { context.clearRect(0, 0, width, height); context.drawImage(img, 0, 0, width, height); let td = 0 for (let t of tadpoles) { // console.log("tadpole: ", td); if (reachedDst(t)){ // return 0; tadpoles[td].src = t.src = t.dst; tadpoles[td].px = t.px; //= t.dsx tadpoles[td].py = t.py; //= t.dsy tadpoles[td].dst = t.dst = between(0, 11); 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; } let dx = t.vx = tadpoles[td].vx = ((t.dsx - t.px)/t.dsx) * v; let dy = t.vy = tadpoles[td].vy = ((t.dsy - t.py)/t.dsy) * 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 = 'red'; } } // 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); } // Head 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(); context.beginPath(); context.arc(t.px[0], t.py[0], radius, 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++; } cycle++; yield context.canvas; document.getElementById("mainScene").innerHTML = ""; document.getElementById("mainScene").appendChild(context.canvas); if(cycle == 100) // return 0; cycle = 0; } }