31:T4cfa,{ // GRAPHICS ====================================== // Margins around graph, for captions + spacing let marginT = 26; // top for graph caption let marginB = 0; // bottom for some visual spacing let marginL = 0; // not needed yet let marginR = 100; // for floating updating value const ROUNDER = 1000; // 100 or 1000 // frame size let frameW = slider_frameW; // slider_frameW; radio_frameSize let frameWSpacing = frameW * 0.75; let frameWfull = frameW + frameWSpacing; let frameX = 0; let frameY = 0; let doorH = 12; let doorHSpacing = 3; let doorEmptyW = frameW * 0.5; let doorEmptyW_min = 1; if (doorEmptyW < doorEmptyW_min) { doorEmptyW = doorEmptyW_min; } let doorBasicW = frameW * 1; // 0.75 let doorBasicW_min = 1; if (doorBasicW < doorBasicW_min) { doorBasicW = doorBasicW_min; } // Stages let stagesNum = 5; let stageMarginT = 24; // for stage caption let stageMarginB = 12; // spacing under stage let stageGraphH = doorH * slider_initialNumOfDoors + doorHSpacing * (slider_initialNumOfDoors - 1); // stage doors graphics let stageH_full = stageMarginT + stageGraphH + stageMarginB; let strStageHeader_keep = "Step 4: Player keeps initial choice"; let strStageHeader_switch = "Step 4: Player always switches choice"; let stageHeaderFontName = "12pt Helvetica Neue"; let arr_strStageHeaders = [ "Step 1: Bracket shows the door with a car behind it", "Step 2: Player picks a door", "Step 3: Host opens another door, removing it from the game", strStageHeader_keep, "Step 5: Result and cumulative win ratio" ]; // result graph tick let cumulativeRatioThickness = 2; // graph size let graphH = stageH_full * stagesNum; // H min let graphH_min = 100; if (graphH < graphH_min) { graphH = graphH_min; } // graph width - increase to some let graphW = 0; let graphW_max = 900; let framesVisibleOnGraph = 0; // count visible do { graphW += frameWfull; framesVisibleOnGraph += 1; } while ((graphW + frameWfull) <= graphW_max); console.log("framesVisibleOnGraph ", framesVisibleOnGraph); // canvas size let picW = marginL + graphW + marginR; let picH = marginT + graphH + marginB; // colors let fillEraser = "#ffffff"; let fillBGClear = "#ffffff"; let fillBGWin = "#ddddff"; let fillBGLoose = "#eeeeee"; let fillDoorWin = "#9999ff"; let fillDoorLoose = "#ff6666"; let fillBGWinTotal = "#000000"; let fillGraphEmptyDoor = "rgba(0, 0, 0, 0.3)"; let fillInitialWinDoor = "rgba(0, 0, 0, 0.4)"; let fillStageHeader = "#999999"; let fillHoverAdd = "rgba(0, 0, 0, 0.3)" // strY INERTIA for text caption coord let arr_strY = []; let arr_strY_lengthMax = 10; // number of steps to ease caption movement // canvas context let ctx = DOM.context2d(picW, picH); let hoverRectW = 1; let hoverDataPrev = { //mx: 0, // mouseX //my: 0, // mouseY //stageIndex: 0, //frameIndex: 0, // from the start of full simulation columnIndex: 0 // visual on canvas }; let hoverDataCurrent = { //mx: 0, // mouseX //my: 0, // mouseY //stageIndex: 0, //frameIndex: 0, // from the start of full simulation columnIndex: 0 // visual on canvas }; // SIMULATION ====================================== // total counters let currentFrameWins = 0; // number of wins in the current frame let totalFrames = 0; // num of simulated frames let totalWins = 0; // total number of Wins let totalWinsPerFrame = 0; // Wins per frame let frameData = { step1_totalDoors: 0, step2_winDoorIndex: 0, step3_playerSelectDoorIndex_first: 0, step4_judgeOpenWrongDoorIndex: 0, step5_playerSelectDoorIndex_last: 0, step6_playerWin: 0 }; //------------------------------------------------------------ //------------------------------------------------------------ class Simulator { //----------------------------------- constructor() { this.setup_ctx(); } //----------------------------------- drawStageHeader_common(stageIndex, fillStyle, strHeader) { // stage settings let stageY = marginT + stageIndex * stageH_full; // static caption ctx.font = stageHeaderFontName; ctx.fillStyle = fillStyle; ctx.fillText(strHeader, marginL + 2, stageY + stageMarginT - 10); } //----------------------------------- setup_ctx() { // Initial graphics // graph bg ctx.fillStyle = fillBGClear; ctx.fillRect(marginL, marginT, graphW, graphH); // static captions ctx.font = "13pt Helvetica Neue"; ctx.fillStyle = fillStageHeader; //fillTextColor; ctx.fillText("Game rounds →", marginL + 2, 14); // prepare context dependent header if (radio_tactic == 1) { // switch, must change default header arr_strStageHeaders[3] = strStageHeader_switch; } // stage static headers for (let stageIndex = 0; stageIndex < stagesNum; stageIndex++) { this.drawStageHeader_common(stageIndex, fillStageHeader, arr_strStageHeaders[stageIndex]); } ctx.canvas.onmousemove = (e) => { let currentSimulationSpeed = this.get_currentSimulationSpeed(); if (currentSimulationSpeed == 0) { this.onMouseMove(e); //mutable mousePos = {x: e.offsetX, y: e.offsetY}; } } } //----------------------------------- onMouseMove(e) { //console.log("onMouseMove ", e.offsetX, e.offsetY); this.hoverErasePrev(e); this.hoverDrawCurrent(e); } //----------------------------------- hoverErasePrev(e) { for (let i = 0; i < 10; i++) { // paint several times to clear bitmap smoothed rect edges this.drawHoverLine_at_columnIndex(hoverDataPrev.columnIndex, fillBGClear); // erase - fillBGClear } } //----------------------------------- get_columnIndex_fromMouseXY(x, y) { let x_noMarginL = x - marginL; return Math.floor(x_noMarginL / frameWfull); } //----------------------------------- drawHoverLine_at_columnIndex(columnIndex, fillStyle) { ctx.fillStyle = fillStyle; for (let stageIndex = 0; stageIndex < stagesNum; stageIndex++) { // all stages let hoverX = marginL + columnIndex * frameWfull - hoverRectW; let stageY = this.getStageY_byStageIndex(stageIndex); let stageHoverY = stageY + stageMarginT; ctx.fillRect(hoverX, stageHoverY, hoverRectW, stageGraphH); } } //----------------------------------- hoverDrawCurrent(e) { let columnIndex = this.get_columnIndex_fromMouseXY(e.offsetX, e.offsetY); this.drawHoverLine_at_columnIndex(columnIndex, fillHoverAdd); // erase - fillBGClear hoverDataCurrent.columnIndex = columnIndex; hoverDataPrev.columnIndex = columnIndex; } //----------------------------------- getRandomDoorIndex() { return Math.floor(Math.random() * frameData.step1_totalDoors); // 0 <= index < total number } //----------------------------------- currentFrame_calcValues() { // set win door index frameData.step1_totalDoors = slider_initialNumOfDoors; // set win door index frameData.step2_winDoorIndex = this.getRandomDoorIndex(); // player selects a door frameData.step3_playerSelectDoorIndex_first = this.getRandomDoorIndex(); // judge opens another door, NOT step2! NOT step 3! do { frameData.step4_judgeOpenWrongDoorIndex = this.getRandomDoorIndex(); } while ((frameData.step4_judgeOpenWrongDoorIndex == frameData.step2_winDoorIndex) || (frameData.step4_judgeOpenWrongDoorIndex == frameData.step3_playerSelectDoorIndex_first)); // player does not switch by default frameData.step5_playerSelectDoorIndex_last = frameData.step3_playerSelectDoorIndex_first; // switch or not? if (radio_tactic == 1) { // radio_tactic // slider_tacticSwitch // player switch! NOT step3! NOT step 4! do { frameData.step5_playerSelectDoorIndex_last = this.getRandomDoorIndex(); } while ((frameData.step5_playerSelectDoorIndex_last == frameData.step3_playerSelectDoorIndex_first) || (frameData.step5_playerSelectDoorIndex_last == frameData.step4_judgeOpenWrongDoorIndex)); } // Win or not? if (frameData.step5_playerSelectDoorIndex_last == frameData.step2_winDoorIndex) { frameData.step6_playerWin = 1; } else { frameData.step6_playerWin = 0; } currentFrameWins = frameData.step6_playerWin; } //----------------------------------- getStageY_byStageIndex(stageIndex) { return marginT + stageIndex * (stageH_full); } //----------------------------------- getDoorY_byStageAndDoorIndex(stageIndex, doorIndex) { return stageMarginT + this.getStageY_byStageIndex(stageIndex) + doorIndex * (doorH + doorHSpacing); } //----------------------------------- drawGraph_emptyDoors_atStage(stageIndex, stageY) { ctx.fillStyle = fillGraphEmptyDoor; for (let doorIndex = 0; doorIndex < frameData.step1_totalDoors; doorIndex++) { let doorY = this.getDoorY_byStageAndDoorIndex(stageIndex, doorIndex); ctx.fillRect(frameX, doorY, doorEmptyW, doorH); } } //----------------------------------- draw_strokedRect(x, y, w, h) { // crisp stroked rect //vert ctx.fillRect(x, y, 1, doorH); //ctx.fillRect(x + doorBasicW - 1, y, 1, doorH); //horiz ctx.fillRect(x, y, doorBasicW, 1); ctx.fillRect(x, y + doorH - 1, doorBasicW, 1); } //----------------------------------- drawStage_common(stageIndex, doorIndex, doorFillStyle, boolStroke) { // show the right door in the beginning // stage settings let stageY = marginT + stageIndex * stageH_full; // show win bg if win //this.drawStage_winBG_ifWin(stageIndex); // empty doors this.drawGraph_emptyDoors_atStage(stageIndex, stageY); // stage data let doorY = this.getDoorY_byStageAndDoorIndex(stageIndex, doorIndex); if (boolStroke) { ctx.fillStyle = doorFillStyle; this.draw_strokedRect(frameX, doorY, doorBasicW, doorH); // crisp stroked rect } else { ctx.fillStyle = doorFillStyle; ctx.fillRect(frameX, doorY, doorBasicW, doorH); } } //----------------------------------- drawStage1_initialWinDoor(stageIndex) { // show the right door in the beginning this.drawStage_common(stageIndex, frameData.step2_winDoorIndex, fillInitialWinDoor, true); } //----------------------------------- drawStage2_playerFirst(stageIndex) { // show let fillDoor = fillDoorLoose; if (frameData.step3_playerSelectDoorIndex_first == frameData.step2_winDoorIndex) { fillDoor = fillDoorWin; } this.drawStage_common(stageIndex, frameData.step3_playerSelectDoorIndex_first, fillDoor, false); // add initial win door display let doorY = this.getDoorY_byStageAndDoorIndex(stageIndex, frameData.step2_winDoorIndex); ctx.fillStyle = fillInitialWinDoor; this.draw_strokedRect(frameX, doorY, doorBasicW, doorH); // crisp stroked rect } //----------------------------------- drawStage_eraseByJudge(stageIndex) { // erase the door picked by judge // add door erased by host // stage settings let stageY = marginT + stageIndex * stageH_full; // add stage data overlay - eraser (empty bg or win-bg) let doorY = this.getDoorY_byStageAndDoorIndex(stageIndex, frameData.step4_judgeOpenWrongDoorIndex); // overlay color ctx.fillStyle = fillBGClear; /*if (frameData.step5_playerSelectDoorIndex_last == frameData.step2_winDoorIndex) { ctx.fillStyle = fillBGWin; }*/ ctx.fillRect(frameX - 1, doorY, frameW + 1, doorH); // with some overlap! } //----------------------------------- drawStage3_judgeOpen(stageIndex) { // show // repeat player's pick this.drawStage2_playerFirst(stageIndex); // erase the door picked by judge this.drawStage_eraseByJudge(stageIndex); } //----------------------------------- drawStage4_playerLast(stageIndex) { // show let fillDoor = fillDoorLoose; if (frameData.step5_playerSelectDoorIndex_last == frameData.step2_winDoorIndex) { fillDoor = fillDoorWin; } this.drawStage_common(stageIndex, frameData.step5_playerSelectDoorIndex_last, fillDoor, false); // erase the door picked by judge this.drawStage_eraseByJudge(stageIndex); // add initial win door display let doorY = this.getDoorY_byStageAndDoorIndex(stageIndex, frameData.step2_winDoorIndex); ctx.fillStyle = fillInitialWinDoor; this.draw_strokedRect(frameX, doorY, doorBasicW, doorH); // crisp stroked rect } //----------------------------------- drawStage_winBG_ifWin(stageIndex) { // win bg for this frame? if (currentFrameWins > 0) { let stageY = marginT + stageIndex * stageH_full; ctx.fillStyle = fillBGWin; ctx.fillRect(frameX, stageY + stageMarginT, frameW, stageGraphH); } } //----------------------------------- drawStage5_totalResult(stageIndex) { // stage settings let stageY = marginT + stageIndex * stageH_full; // win or loose graph for this frame let fill_win_or_loose = fillDoorLoose; let fill_win_or_loose_bg = fillBGLoose; // win or loose graph for this frame if (currentFrameWins > 0) { fill_win_or_loose = fillDoorWin; fill_win_or_loose_bg = fillBGWin; } ctx.fillStyle = fill_win_or_loose_bg; ctx.fillRect(frameX, stageY + stageMarginT, frameW, stageGraphH); // NOW SHOW TOTAL RATIO let totalH = totalWinsPerFrame * stageGraphH; if (totalH < cumulativeRatioThickness) { totalH = cumulativeRatioThickness; } let totalY = stageY + stageMarginT + stageGraphH - totalH; // show graph bar for Total Ratio ctx.fillStyle = fill_win_or_loose; ctx.fillRect(frameX, totalY, frameW, cumulativeRatioThickness); // erase placeholder for floating caption ctx.fillStyle = fillEraser; ctx.fillRect(marginL + graphW + 1, 0, marginR - 2, picH); // ctx.fillRect(x, y, width, height); // floating caption let strResult = String(Math.round(totalWinsPerFrame * ROUNDER) / ROUNDER); // rounded let strX = marginL + graphW + 7; let strY = totalY; // MAKE DYNAMIC // limit??? let strYHigh = marginT + 20; let strYLow = marginT + graphH - 5; if (strY < strYHigh) { strY = strYHigh; } if (strY > strYLow) { strY = strYLow; } // strY floating caption 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 floating caption ctx.font = "11pt Helvetica Neue"; ctx.fillStyle = fillDoorWin; ctx.fillText("win ratio", strX, strY_eased - 24); // show floating value ctx.font = "16pt Helvetica Neue"; ctx.fillStyle = fillDoorWin; ctx.fillText(strResult, strX, strY_eased); } //----------------------------------- currentFrame_drawGraph() { // graph settings frameX = marginL + graphW - frameWfull; frameY = marginT; // prepare clean bg for current frame ctx.fillStyle = fillBGClear; ctx.fillRect(frameX, frameY, frameWfull, graphH); // stages this.drawStage1_initialWinDoor(0); this.drawStage2_playerFirst(1); this.drawStage3_judgeOpen(2); this.drawStage4_playerLast(3); this.drawStage5_totalResult(4); // result + floating caption } //----------------------------------- currentFrame_updateTotals() { // calculate updated result after this frame totalWins += currentFrameWins; totalWinsPerFrame = totalWins / totalFrames; } //----------------------------------- currentFrame_showValuesInInputs() { input_totalFrames.value = "Game rounds: " + totalFrames; input_totalWins.value = "Player wins: " + totalWins; input_totalWinsPerFrame.value = "Win ratio: " + Math.round(totalWinsPerFrame * ROUNDER) / ROUNDER; } //----------------------------------- shiftStage_byIndex(stageIndex, dpr) { // what to copy let stageY = marginT + stageIndex * stageH_full; // stage graph without margins let copyLeft = frameWfull * dpr; let copyTop = stageY + stageMarginT; let copyW = (graphW - frameWfull) * dpr; let copyH = stageGraphH * dpr; // copy let imgData1 = ctx.getImageData(copyLeft, copyTop, copyW, copyH); // shift left and paste ctx.putImageData(imgData1, 0, copyTop); } //----------------------------------- currentFrame_shiftGraph() { // Pixel aspect is critically important for canvas bitmap operations let dpr = window.devicePixelRatio || 1; for (let stageIndex = 0; stageIndex < stagesNum; stageIndex++) { // shift all stages graphs this.shiftStage_byIndex(stageIndex, dpr); } } //----------------------------------- mainSimulation_currentFrame() { totalFrames += 1; // shoot a salvo this.currentFrame_calcValues(); // calculate updated result after this frame this.currentFrame_updateTotals(); // show results - numbers this.currentFrame_showValuesInInputs(); // shift the graph to the left for the next frame this.currentFrame_shiftGraph(); // show results - graph this.currentFrame_drawGraph(); } //----------------------------------- get_currentSimulationSpeed() { // Not viewOf to make slider work continuously let simulationSpeedInput = simulationSpeed.getElementsByTagName('input')[0]; let simulationSpeedValue = simulationSpeedInput.value; return simulationSpeedValue; } //----------------------------------- } // end Simulator //------------------------------------------------------------ //------------------------------------------------------------ const simulator = new Simulator(); while (true) { let currentSimulationSpeed = simulator.get_currentSimulationSpeed(); // MAIN ACTION for (let iterationInFrame = 0; iterationInFrame < currentSimulationSpeed; iterationInFrame++) { simulator.mainSimulation_currentFrame(); } // output yield ctx.canvas; } }32:[] 2f:{"title":"Monty Hall Simulator","cells":[{"id":0,"value":"md`# Monty Hall Simulator\nSuppose you're on a game show, and you're given the choice of three doors: Behind one door is a car; behind the others, goats. You pick a door, say No. 1, and the host, who knows what's behind the doors, opens another door, say No. 3, which has a goat. He then says to you, \"Do you want to pick door No. 2?\" Is it to your advantage to switch your choice?\nhttps://en.wikipedia.org/wiki/Monty_Hall_problem\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"viewof radio_tactic = radio({\n title: 'Player Tactic',\n //description: 'Select your tactic',\n options: [\n { label: 'Keep selected door', value: 0 },\n { label: 'Always switch', value: 1 }\n ],\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"simulationSpeed = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 1, \n title: \"Simulation speed\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"viewof slider_frameW = slider({\n min: 4, \n max: 12, \n step: 4, \n value: 4, \n title: \"Frame display size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"viewof slider_initialNumOfDoors = slider({\n min: 3, \n max: 10, \n step: 1, \n value: 3, \n title: \"Number of doors\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":" input_totalFrames = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"input_totalWins = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"input_totalWinsPerFrame = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {slider, color, radio, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}