{ // sizes let picW = 800; let picH = 200; let gridH = cellSize * cellRows; let graphRatioH = 100; let marginH = 40; let graphFrameMultiHits_oneLevel_H = 10; let multiHits_levelsReserved = 6; let graphFrameMultiHits_levelsReserved_H = multiHits_levelsReserved * graphFrameMultiHits_oneLevel_H; let calculatedPicH = gridH + marginH + graphRatioH + marginH + graphFrameMultiHits_levelsReserved_H + marginH; if (picH < calculatedPicH) { picH = calculatedPicH; } // frame render graphs X let graphsRenderW = 700; // colors let fillEraser = "#ffffff"; // fafafa let fillDart = "#ff0000"; let fillGrid = "rgba(0, 0, 0, 0.2)"; let fillGridBG = "#eeeeff"; let fillGraphBG = "#eeeeff"; let fillGraphData = "#ff0000"; let fillTextColor = "#bbbbdd"; let fillMultiCell = "rgba(255, 0, 0, 0.4)"; let simulationSpeed_framesCountdown = 0; // simulationSpeed let simulationSpeed_framesCountdown_max = 0; // simulationSpeed var ctx = DOM.context2d(picW, picH); //------------------------------------------------------------ //------------------------------------------------------------ class Drawer { //----------------------------------- constructor() { // counters this.frameNum = 0; // num of simulated frames this.totalMultiHitsNum = 0; // total number of frames with multi-hits this.multiHitsRatio = 0; // prob calculated //console.log("this.frameNum ", this.frameNum); this.setup(); } //----------------------------------- setup() { // Initial graphics //bg two charts ctx.fillStyle = fillGraphBG; ctx.fillRect(0, gridH + marginH, graphsRenderW, graphRatioH); ctx.fillRect(0, gridH + marginH + graphRatioH + marginH, graphsRenderW, graphFrameMultiHits_oneLevel_H); // two charts static captions ctx.font = "13pt Helvetica Neue"; ctx.fillStyle = fillTextColor; ctx.fillText("Calculated Monte-Carlo coefficient", 7, gridH + marginH - 7); ctx.fillText("Events of " + String(minDartsInOneCell) + " or more hits in a single cell", 7, gridH + marginH + graphRatioH + marginH - 7); } //----------------------------------- drawCells() { // white bg around bg to remove outer dart graphics let eraseAroundMargin = dartSize; ctx.fillStyle = fillEraser; ctx.fillRect(0, 0, cellSize * cellColumns + dartSize, cellSize * cellRows + dartSize); // main board bg ctx.fillStyle = fillGridBG; ctx.fillRect(0, 0, cellSize * cellColumns, cellSize * cellRows); // grid ctx.fillStyle = fillGrid; // vert for (let i = 1; i < cellColumns; i++) { ctx.fillRect(cellSize * i, 0, 1, cellSize * cellRows); } // horiz for (let i = 1; i < cellRows; i++) { ctx.fillRect(0, cellSize * i, cellSize * cellColumns, 1); } } //----------------------------------- showMultiCell(cell_ix, cell_iy) { // show multi-hit cell ctx.fillStyle = fillMultiCell; ctx.fillRect(cell_ix * cellSize, cell_iy * cellSize, cellSize, cellSize); } //----------------------------------- generateDarts() { let dartsData = []; let xMin = 0; let yMin = 0; let xMax = cellSize * cellColumns; let yMax = cellSize * cellRows; let xRange = xMax - xMin; let yRange = yMax - yMin; //console.log("xRange ", xRange, " yRange ", yRange); for (let i = 0; i < numDartsSalvo; i++) { let xNew = xMin + Math.random() * xRange; let yNew = yMin + Math.random() * yRange; let cellXNew = Math.floor(xNew / cellSize); let cellYNew = Math.floor(yNew / cellSize); // eliminate the possibility of exceeding max, when range==maximum if (cellXNew > (cellColumns - 1)) { cellXNew = cellColumns - 1; } if (cellYNew > (cellRows - 1)) { cellYNew = cellRows - 1; } // make a dart shot let dartOne = { x: xNew, y: yNew, cellX: cellXNew, cellY: cellYNew } //console.log("dartOne ", dartOne); dartsData.push(dartOne); } return dartsData; } //----------------------------------- drawDarts(dartsData) { for (let i = 0; i < dartsData.length; i++) { let dartOne = dartsData[i]; //ctx.fillStyle = fillDart; //ctx.fillRect(dartOne.x - dartSize/2, dartOne.y - dartSize/2, dartSize, dartSize); ctx.beginPath(); ctx.fillStyle = fillDart; ctx.arc(dartOne.x, dartOne.y, dartSize / 2, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); } } //----------------------------------- drawGraph_multiHitsRatio(dartsData) { // graph settings // coord let drawBottomY = gridH + marginH + graphRatioH; // simulated probability value this.multiHitsRatio = this.totalMultiHitsNum / this.frameNum; // this frame ratio let drawH = this.multiHitsRatio * graphRatioH; let drawYTop = drawBottomY - drawH; // bg for this moment ctx.fillStyle = fillGraphBG; ctx.fillRect(graphsRenderW - 1, drawBottomY - graphRatioH, 1, graphRatioH); // prob graph for this moment ctx.fillStyle = fillGraphData; ctx.fillRect(graphsRenderW - 1, drawYTop, 1, drawH); // erase placeholder for caption ctx.fillStyle = fillEraser; ctx.fillRect(graphsRenderW + 1, drawBottomY - graphRatioH, picW - graphsRenderW - 2, graphRatioH); // caption let strCoef = String(Math.round(this.multiHitsRatio * 100000) / 100000); // rounded let strX = graphsRenderW + 7; let strY = drawYTop; // limit for erasing areas let strYHigh = gridH + marginH + 20; let strYLow = gridH + marginH + graphRatioH - 5; if (strY < strYHigh) { strY = strYHigh; } if (strY > strYLow) { strY = strYLow; } // computed number ctx.font = "16pt Helvetica Neue"; ctx.fillStyle = fillGraphData; ctx.fillText(strCoef, strX, strY); } //----------------------------------- addTotalMultiHits() { this.totalMultiHitsNum += 1; } //----------------------------------- drawGraph_multiHits(dartsData) { // how many multi-hits found for this frame let multiHitsNum_thisFrame = 0; // hits for this frame, fill matrix with zeroes let hitsMatrix_thisFrame = []; for (let i = 0; i < cellRows; i++) { // create rows let oneRow = []; for (let i = 0; i < cellColumns; i++) { // create columns oneRow.push(0); } hitsMatrix_thisFrame.push(oneRow); } // hit every dart for (let i = 0; i < dartsData.length; i++) { let dartOne = dartsData[i]; hitsMatrix_thisFrame[dartOne.cellY][dartOne.cellX] += 1; } // check every cell for (let cell_ix = 0; cell_ix < cellColumns; cell_ix++) { for (let cell_iy = 0; cell_iy < cellRows; cell_iy++) { let valueOne = hitsMatrix_thisFrame[cell_iy][cell_ix]; // hits in this cell if (valueOne >= minDartsInOneCell) { multiHitsNum_thisFrame += 1; // there can be more than one multi-hit in one frame // show multi-hit cell overlay this.showMultiCell(cell_ix, cell_iy); } } } if (multiHitsNum_thisFrame > 0) { // are there multi hits on this frame this.addTotalMultiHits(); } // DRAW HITS GRAPH // line size from number of multi-hits let hitsH = multiHitsNum_thisFrame * graphFrameMultiHits_oneLevel_H; // coord let lineTop = gridH + marginH + graphRatioH + marginH; // erasing bg for this frame ctx.fillStyle = fillEraser; ctx.fillRect(graphsRenderW - 1, lineTop, 1, graphFrameMultiHits_levelsReserved_H + marginH); // visual bg for this frame ctx.fillStyle = fillGraphBG; ctx.fillRect(graphsRenderW - 1, lineTop, 1, graphFrameMultiHits_oneLevel_H); // hits graph for this frame ctx.fillStyle = fillGraphData; ctx.fillRect(graphsRenderW - 1, lineTop, 1, hitsH); } //----------------------------------- shiftGraphs() { /* window.devicePixelRatio var dpr = window.devicePixelRatio || 1; var PIXEL_RATIO = (function () { var ctx = document.createElement("canvas").getContext("2d"), dpr = window.devicePixelRatio || 1, bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; return dpr / bsr; })(); */ let dpr = window.devicePixelRatio || 1; let copyW = graphsRenderW - 1; // ratio let copyH1 = graphRatioH; let copyTop1 = gridH + marginH; let imgData1 = ctx.getImageData(1 * dpr, copyTop1 * dpr, copyW * dpr, copyH1 * dpr); ctx.putImageData(imgData1, 0, copyTop1 * dpr); // multi-hit events let copyH2 = graphFrameMultiHits_levelsReserved_H + marginH; let copyTop2 = gridH + marginH + graphRatioH + marginH; let imgData2 = ctx.getImageData(1 * dpr, copyTop2 * dpr, copyW * dpr, copyH2 * dpr); ctx.putImageData(imgData2, 0, copyTop2 * dpr); // + Math.random() * 10 } //----------------------------------- showNumbers() { // frames multi-hits input_hitsNum.value = "Multi-hit frames: " + this.totalMultiHitsNum; // frames total input_frameNum.value = "Total frames: " + this.frameNum; // show probability input_probMonteCarlo.value = "Calculated coef: " + Math.round(this.multiHitsRatio * 100000) / 100000; } //----------------------------------- drawLoop() { this.frameNum += 1; this.drawCells(); // INTERESTING EFFECT WITHOUT CELLS REDRAW let dartsData = this.generateDarts(); this.drawDarts(dartsData); this.drawGraph_multiHitsRatio(dartsData); this.drawGraph_multiHits(dartsData); this.shiftGraphs(); this.showNumbers(); } //----------------------------------- } // end drawer //------------------------------------------------------------ //------------------------------------------------------------ const drawer = new Drawer(); while (true) { let simulationSpeedInput = simulationSpeed.getElementsByTagName('input')[0]; let simulationSpeedValue = simulationSpeedInput.value; if (simulationSpeedValue == 0) { // pause simulationSpeed_framesCountdown = simulationSpeed_framesCountdown_max; } // delay length simulationSpeed_framesCountdown_max = Math.round((100 - simulationSpeedValue) / 5); if (simulationSpeed_framesCountdown > 0) { // delay simulationSpeed_framesCountdown -= 1; // wait till zero } else { // action! simulationSpeed_framesCountdown = simulationSpeed_framesCountdown_max; // reset counter to max drawer.drawLoop(); } //console.log("simulationSpeed_framesCountdown ", simulationSpeed_framesCountdown); yield ctx.canvas; } }