31:T21c3,{ // Margins around graph, for captions + air let marginT = 40; // top for graph caption let marginB = 40; // bottom for some visual air let marginL = 0; // not needed yet let marginR = 100; // for floating updating value const ROUNDER = 100; const RECURSION_DEPTH_MAX = 20; // graph size let graph_shotH = 3; // size of one arrow shot let graph_shotReservedNum = slider_shotReservedNum; // 100; // max shots displaying let graphH = graph_shotReservedNum * graph_shotH; let graphH_default = 100; if (graphH < graphH_default) { graphH = graphH_default; } // canvas size let picW = 800; let picH = marginT + graphH + marginB; // graph width let graphW = picW - marginL - marginR; // 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 fillGraphDataTotal = "#000000"; //let fillTextColor = "#bbbbdd"; // light text color let fillTextColor = "#aaaacc"; // darker text colo let fillMultiCell = "rgba(255, 0, 0, 0.4)"; let simulationSpeed_framesCountdown = 0; // simulationSpeed let simulationSpeed_framesCountdown_max = 0; // simulationSpeed // strY INERTIA for text caption coord let arr_strY = []; let arr_strY_lengthMax = 10; // number of steps to ease caption movement var ctx = DOM.context2d(picW, picH); //------------------------------------------------------------ //------------------------------------------------------------ class Drawer { //----------------------------------- constructor() { this.thisFrameArrows = 0; // number of arrows shot in the current frame // total counters this.totalFrames = 0; // num of simulated frames this.totalArrows = 0; // total number of arrows shot this.totalArrowsPerFrame = 0; // total //console.log("this.frameNum ", this.frameNum); this.setup(); } //----------------------------------- setup() { // Initial graphics // graph bg ctx.fillStyle = fillGraphBG; ctx.fillRect(marginL, marginT, graphW, graphH); // static captions ctx.font = "13pt Helvetica Neue"; ctx.fillStyle = fillGraphData; //fillTextColor; ctx.fillText("Arrows fired per frame", marginL + 7, marginT - 7); } //----------------------------------- shootArrows() { // main command let arrowsShot = 0; for (let i = 0; i < slider_initialArrowsNum; i++) { // shoot every arrow //arrowsShot += Math.round(Math.random() * 10); arrowsShot += shootOneArrow_recursive(0, RECURSION_DEPTH_MAX, shootOneArrow_recursive); } this.thisFrameArrows = arrowsShot; console.log("thisFrameArrows ", this.thisFrameArrows); } //----------------------------------- updateResultByFrame() { // calculate updated result after this frame this.totalArrows += this.thisFrameArrows; this.totalArrowsPerFrame = this.totalArrows / this.totalFrames; } //----------------------------------- drawGraph_shotsThisFrame() { // graph settings // bg for this thin frame ctx.fillStyle = fillGraphBG; ctx.fillRect(marginL + graphW - 1, marginT, 1, graphH); // DRAW ARROW HITS GRAPH // Number of shots data size let lineH = this.thisFrameArrows * graph_shotH; // Number of shots data top let lineTop = marginT + graphH - lineH; // visual bg for this frame ctx.fillStyle = fillGraphBG; ctx.fillRect(marginL + graphW - 1, marginT, 1, graphH); // erase excess graph up from the top (too many shots to fit in the graph) ctx.fillStyle = fillEraser; ctx.fillRect(marginL + graphW - 1, 0, 1, marginT); // hits graph for this frame ctx.fillStyle = fillGraphData; for (var i = 0; i < this.thisFrameArrows; i++) { // draw single arrow let arrowY = lineTop + i * graph_shotH + 1; ctx.fillRect(marginL + graphW - 1, arrowY, 1, graph_shotH - 1); // +1, -1 in Y means that the real arrow size = (graph_shotH - 1) } // NOW SHOW TOTAL RESULT let totalH = this.totalArrowsPerFrame * graph_shotH; let totalTop = marginT + graphH - totalH; ctx.fillStyle = fillGraphDataTotal; ctx.fillRect(marginL + graphW - 1, totalTop, 1, 1); // erase placeholder for caption ctx.fillStyle = fillEraser; ctx.fillRect(marginL + graphW + 1, marginT, marginR - 2, graphH); // caption let strResult = String(Math.round(this.totalArrowsPerFrame * ROUNDER) / ROUNDER); // rounded let strX = marginL + graphW + 7; let strY = totalTop; // MAKE DYNAMIC // limit??? let strYHigh = marginT + 20; let strYLow = marginT + graphH - 5; if (strY < strYHigh) { strY = strYHigh; } if (strY > strYLow) { strY = strYLow; } // strY INERTIA if (arr_strY.length == 0) { // this is the 1st step for (var i = 0; i < arr_strY_lengthMax; i++) { // initial fill coords Y array arr_strY.push(strY); } } else { // shift array elements for (var i = 0; i < (arr_strY.length - 1); i++) { arr_strY[i] = arr_strY[i + 1]; } // the last = new arr_strY[arr_strY.length - 1] = strY; } // ease var strY_eased = 0; for (var i = 0; i < arr_strY.length; i++) { // initial fill coords Y array strY_eased += arr_strY[i]; } strY_eased = strY_eased / arr_strY.length; // show ctx.font = "11pt Helvetica Neue"; ctx.fillStyle = fillGraphDataTotal; ctx.fillText("expectation", strX, strY_eased - 24); // show ctx.font = "16pt Helvetica Neue"; ctx.fillStyle = fillGraphDataTotal; ctx.fillText(strResult, strX, strY_eased); } //----------------------------------- shiftGraphs() { // Pixel aspect is critically important for canvas bitmap operations let dpr = window.devicePixelRatio || 1; // what to copy let copyLeft = 1 * dpr; let copyTop = marginT * dpr; let copyW = (graphW - 1) * dpr; let copyH = graphH * dpr; // copy let imgData1 = ctx.getImageData(copyLeft, copyTop, copyW, copyH); // shift left and paste ctx.putImageData(imgData1, 0, copyTop); } //----------------------------------- showNumbers() { input_totalArrows.value = "Total arrows: " + this.totalArrows; input_totalFrames.value = "Total frames: " + this.totalFrames; input_totalArrowsPerFrame.value = "Arrows per frame: " + Math.round(this.totalArrowsPerFrame * ROUNDER) / ROUNDER; } //----------------------------------- drawLoop() { this.totalFrames += 1; // shoot a salvo let arrowsShot = this.shootArrows(); // calculate updated result after this frame this.updateResultByFrame(); // show results - numbers this.showNumbers(); // show results - graph this.drawGraph_shotsThisFrame(); //this.drawGraph_shotsTotal(); // shift the graph to the left for the next frame this.shiftGraphs(); } //----------------------------------- } // 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); // output yield ctx.canvas; } }32:[] 2f:{"title":"Monte-Carlo arrows v1.0","cells":[{"id":0,"value":"md`# Monte-Carlo arrows v1.0\nYou have 14 arrows. The probability of hitting a target with an arrow is 0,1. For each successful hit you get 3 more arrows. What is the expectation of the number of arrows fired?\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"simulationSpeed = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 100, \n title: \"Simulation speed\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"viewof slider_shotReservedNum = slider({\n min: 50, \n max: 500, \n step: 1, \n value: 100, \n title: \"Shots display capacity\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"viewof slider_initialArrowsNum = slider({\n min: 1, \n max: 20, \n step: 1, \n value: 14, \n title: \"Initial number of arrows\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof slider_hitProbability = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0.1, \n title: \"Probability of hitting with one arrow\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"viewof slider_addArrowsNum_onHit = slider({\n min: 0, \n max: 20, \n step: 1, \n value: 3, \n title: \"How many arrows added after each hit\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":" input_totalFrames = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"input_totalArrows = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"input_totalArrowsPerFrame = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"//-----------------------------------\n function shootOneArrow_recursive(_recursionDepth, _recursionDepthMax, _shootOneArrow_recursive) { \n \n let arrowsShot = 1; // 1 = this arrow, can have more if hit\n \n let recursionDepth = _recursionDepth + 1;\n if (recursionDepth < _recursionDepthMax) { // can go deeper\n \n let thisShotResult = Math.random();\n if (thisShotResult < slider_hitProbability) { // yes\n for (let i = 1; i <= slider_addArrowsNum_onHit; i++) { // start from 1, because addArrowsNum_onHit can be 0.\n // shoot additional [addArrowsNum_onHit] arrows\n arrowsShot += _shootOneArrow_recursive(recursionDepth, _recursionDepthMax, _shootOneArrow_recursive);\n }\n }\n \n }\n \n return arrowsShot;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {slider, color, checkbox, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}