2c:null 2d:["$","title",null,{"children":"Boba Science | Krist Wongsuphasawat | Observable"}] 32:Td9b,viewof params = { const form = html`

Cup dimension
Top radius		${unit}
Bottom radius		${unit}
Height		${unit}
What you put in the cup
Tea volume		${unit}³
Ice volume		${unit}³
Boba volume		${unit}³
Boba radius		${unit}
How you drink it
Tea consumption		% of normal
Boba consumption		% of normal
Ice melted per sip		%

`; form.oninput = () => { const fields = [ 'cupTopRadius', 'cupBottomRadius', 'cupHeight', 'teaVolume', 'bobaVolume', 'bobaRadius', 'iceVolume', 'teaEfficiency', 'bobaEfficiency', 'iceMeltRatio', ]; form.value = fields.reduce((acc, curr) => { const value = form[curr].valueAsNumber; acc[curr] = value; const label = form.querySelector(`.${curr}`); if (label) { label.innerText = value; } return acc; }, {}); }; form.oninput(); return form; }33:T4b1,md`## Credits and Disclaimer This interactive article was heavily inspired by this lighthearted yet informative [Facebook post](https://www.facebook.com/chatrielsan/photos/pcb.654554488278536/655169598217025/?type=3&theater) about bubble tea by [ME สาระ with Chatriel さん](https://www.facebook.com/chatrielsan). (The original post was in Thai language.) I adopted the idea for computing the volume of tea and boba in each sip. This article uses its own calculation for simulation, cup volume and drink height, as well as includes ice melting into the simulation. Please keep in mind that these simulations are still not verified with real human drinking experiments. (Not that I have any budget or IRB to run them.) On the bright side, no humans were harmed during the development of this project. However, if you would like to sponsor me a few cups of bubble tea, I will gladly volunteer myself as the participant. If you are looking for more strategies to drink your bubble tea like a pro, I highly recommend [this thread on Quora](https://www.quora.com/How-can-I-drink-bubble-tea-to-ensure-that-I-finish-the-bubbles-and-the-tea-at-around-the-same-time). A lot of boba wisdom awaits.`34:T1082,class BubbleTea { constructor({ cup = new Cup(), straw = new Straw(), boba = new Boba(), ice = new IceCube(), teaVolume = 450, numBobas, bobaVolume = 110, numIce, iceVolume = 100, } = {}) { this.cup = cup; this.straw = straw; this.boba = boba; this.ice = ice; this.teaVolume = teaVolume; const bobaBallVolume = boba.volume(); if (numBobas !== undefined) { this.numBobas = numBobas; } else { this.numBobas = Math.floor(bobaVolume / bobaBallVolume); } this.bobaVolume = this.numBobas * bobaBallVolume; const iceCubeVolume = ice.volume(); if (numIce !== undefined) { this.numIce = numIce; } else { this.numIce = Math.floor(iceVolume / iceCubeVolume); } this.iceVolume = this.numIce * iceCubeVolume; this.cached = {}; } volume() { return this.teaVolume + this.bobaVolume + this.iceVolume; } drinkHeight() { if (this.cached.drinkHeight !== undefined) { return this.cached.drinkHeight; } const value = this.cup.drinkHeightFromVolume(this.volume()); this.cached.drinkHeight = value; return value; } bobaHeight() { if (this.cached.bobaHeight !== undefined) { return this.cached.bobaHeight; } const value = this.countBobaLayers() * this.boba.radius * 2; this.cached.bobaHeight = value; return value; } iceHeight() { if (this.cached.iceHeight !== undefined) { return this.cached.iceHeight; } const value = this.countIceLayers() * this.ice.width; this.cached.iceHeight = value; return value; } teaHeight() { const bobaHeight = this.bobaHeight(); const volumeUpToBoba = this.cup.volumeFromDrinkHeight(bobaHeight); const volumeAroundBoba = volumeUpToBoba - this.bobaVolume; if (this.teaVolume >= volumeAroundBoba) { const iceHeight = this.iceHeight(); const volumeUpToIce = this.cup.volumeFromDrinkHeight(bobaHeight + iceHeight); const volumeAroundIce = volumeUpToIce - volumeUpToBoba - this.iceVolume; const remainingTea = this.teaVolume - volumeAroundBoba; if(remainingTea >= volumeAroundIce) { return this.drinkHeight(); } else { return remainingTea / volumeAroundIce * iceHeight + bobaHeight; } } else { return this.teaVolume / volumeAroundBoba * bobaHeight; } } createBobaLayers() { if (this.cached.bobaLayers) { return this.cached.bobaLayers; } let numBobas = this.numBobas; const layers = []; while(numBobas > 0) { const h = this.boba.radius * (1 + 2 * layers.length); const drinkRadius = this.cup.radiusAtDrinkHeight(h); const circles = new Circle({ radius: drinkRadius }).placeCirclesInside(this.boba.radius); const diff = circles.length - numBobas; const positions = diff > 1 ? circles.slice(diff / 2, diff / 2 + numBobas) : circles; positions.forEach(p => { p.x += Math.random() * 0.3 - 0.15; // add jitter p.y += Math.random() * 0.1 - 0.05; // add jitter p.z = this.cup.height - h; }); layers.push(positions); numBobas -= positions.length; } this.cached.bobaLayers = layers; return layers; } countBobaLayers() { return this.createBobaLayers().length; } createIceLayers() { if (this.cached.iceLayers) { return this.cached.iceLayers; } const numBobaLayers = this.countBobaLayers(); const bobaHeight = numBobaLayers * this.boba.radius * 2; let numIce = this.numIce; const layers = []; while(numIce > 0) { const h = bobaHeight + this.ice.width / 2 * (1 + 2 * layers.length); const drinkRadius = this.cup.radiusAtDrinkHeight(h); const squareCounts = new Circle({ radius: drinkRadius }).computeNumSquaresToFit(this.ice.width); layers.push(Math.min(numIce, squareCounts)); numIce -= squareCounts; } this.cached.iceLayers = layers; return layers; } countIceLayers() { return this.createIceLayers().length; } hasEnoughTeaToDrink() { const estimatedTeaHeight = this.teaHeight(); return estimatedTeaHeight > this.straw.radius * 1.5; } }35:T691,class Drinker { constructor({ teaEfficiency = [1, 1], bobaEfficiency = [1, 1], iceMeltRatio = 0.01, } = {}) { this.teaEfficiency = d3.scaleLinear().range(teaEfficiency); this.bobaEfficiency = d3.scaleLinear().range(bobaEfficiency); this.iceMeltRatio = iceMeltRatio; } drink(bubbleTea) { const { cup, straw, boba, ice, teaVolume, bobaVolume, iceVolume } = bubbleTea; const oneBobaVolume = boba.volume(); const strawArea = straw.area(); const baselineNumBoba = bubbleTea.countBobaLayers(); const baselineTeaToDrink = Math.max( 0, // cannot be negative (bubbleTea.drinkHeight() * strawArea) - baselineNumBoba * oneBobaVolume ); const actualNumBoba = Math.min( bubbleTea.numBobas, // cannot eat more than total Math.round(this.bobaEfficiency(Math.random()) * baselineNumBoba) ); const extraNumBoba = Math.max(0, actualNumBoba - baselineNumBoba); const extraTeaPerBoba = boba.radius * 2 * strawArea - oneBobaVolume; const minTeaToDrink = baselineTeaToDrink + (extraNumBoba * extraTeaPerBoba); const actualTeaToDrink = Math.max( minTeaToDrink, baselineTeaToDrink * this.teaEfficiency(Math.random()), ); const meltedIce = iceVolume * this.iceMeltRatio; const newTeaVolume = Math.max(0, teaVolume - actualTeaToDrink); return new BubbleTea({ cup, straw, boba, ice: ice.melt(+this.iceMeltRatio), // do not consider pure water as tea any more teaVolume: newTeaVolume > 0 ? newTeaVolume + meltedIce : 0, numBobas: bubbleTea.numBobas - actualNumBoba, iceVolume: Math.max(0, iceVolume - meltedIce), }); } }36:T950,class Circle { constructor({ x, y, radius }) { this.x = x; this.y = y; this.radius = radius; } placeCirclesInside(radius) { const rLarge = this.radius; const rSmall = radius; let count = 0; if (rSmall > rLarge) { throw new Error('Inside smaller diameters larger than outside diameter!'); } else if (rLarge < 2 * rSmall){ return [new Circle({ x: 0, y: 0, radius: rSmall })]; } else { const circles = []; const rc = rLarge - rSmall; function makeCircles(rc) { let no = Math.floor((2 * Math.PI * rc) / (2 * rSmall)); const x0 = rc * Math.cos(0 * 2 * Math.PI / no); const y0 = rc * Math.sin(0 * 2 * Math.PI / no); const x1 = rc * Math.cos(1 * 2 * Math.PI / no); const y1 = rc * Math.sin(1 * 2 * Math.PI / no); const dist = Math.pow((Math.pow((x0 - x1),2) + Math.pow((y0 - y1),2)),0.5); if (dist < 2 * rSmall) no--; for (let i = 0; i < no; i++){ const x = rc * Math.cos(i * 2 * Math.PI / no); const y = rc * Math.sin(i * 2 * Math.PI / no); circles.push(new Circle({ x, y, radius: rSmall })); count++; } const rcNext = rc - (2 * rSmall); if (rcNext >= rSmall) { makeCircles(rcNext); } else if (rc > 2 * rSmall){ circles.push(new Circle({ x: 0, y: 0, radius: rSmall })); count++; } } makeCircles(rc); return circles; } } // https://www.quora.com/How-many-squares-of-size-a%C3%97a-can-be-packed-into-a-circle-of-radius-R computeNumSquaresToFit(squareWidth) { const w = squareWidth; const r_a = this.radius / w; const r_a_square = r_a * r_a; // odd rows let count1 = 0; let n1 = 0; const fixedBase = 4 * r_a_square - 1; let base1 = fixedBase - (4 * n1 * n1) - (2 * n1); while(base1 > 0) { if (n1 > 0) { count1 += 2 * Math.floor(Math.sqrt(base1)); } else { count1 += Math.floor(Math.sqrt(base1)); } n1++; base1 = fixedBase - (4 * n1 * n1) - (2 * n1); } // even rows let count2 = 0; let n2 = 1; let base2 = r_a_square - n2 * n2; while(base2 > 0) { count2 += 2 * Math.floor(Math.sqrt(base2)); n2++; base2 = r_a_square - n2 * n2; } return Math.max(count1, count2); } }37:T6cd,class Renderer { constructor(states, { step = 40, ...rest } = {}) { this.states = states; this.options = { ...rest, step }; this.frameSvgs = states.map(state => drawBubbleTea(state.bubbleTea, this.options)) .map(svg => svg.node()) .map(svg => { svg.style.verticalAlign = 'top'; svg.style.display = 'inline-block'; return svg; }); this.animationFrames = this.frameSvgs; this.thumbnailSvgs = this.frameSvgs .filter((svg, i) => (i % step === 0 || i === states.length - 1)) .map(svg => svg.cloneNode(true)); } renderThumbnails() { const { step } = this.options; const block = document.createElement('div'); block.style.display = 'inline-block'; block.style.marginLeft = '20px'; this.thumbnailSvgs.forEach((frame, i) => { const index = Math.min(i * step, this.states.length - 1); const container = document.createElement('div'); container.style.display = 'inline-block'; container.style.textAlign = 'center'; container.style.verticalAlign = 'top'; const isEnd = index === this.states.length - 1; const caption = document.createElement('div'); caption.innerHTML = `t=${index}${isEnd ? '*' : ''}`; container.appendChild(frame); container.appendChild(caption); block.appendChild(container); }); return block; } renderSummary(timer, maxRound = this.states.length) { const index = Math.min(timer % maxRound, this.states.length - 1); const div = document.createElement('div'); div.style.verticalAlign = 'top'; div.appendChild(this.animationFrames[index]); div.appendChild(this.thumbnails); return div; } }38:T970,class GroupRenderer { constructor(statesArray, { step = 30, ...rest } = {}) { const options = { ...rest, step }; this.options = options; this.renderers = statesArray.map(states => new Renderer(states, options)); } renderTable() { const maxRound = d3.max(this.renderers, r => r.states.length); } render(timer, previous) { const maxRound = d3.max(this.renderers, r => r.states.length); const { step } = this.options; if (previous) { const trs = Array.prototype.slice.call(previous.querySelectorAll('tr')); trs .filter((tr, i) => i > 0) .forEach((tr, i) => { const r = this.renderers[i]; const index = Math.min(timer % maxRound, r.states.length - 1); const td = tr.querySelector('td'); td.innerHTML = ''; td.appendChild(r.animationFrames[index]); }); return previous; } const numColumns = Math.ceil(maxRound / step); const table = document.createElement('table'); table.style.width = 'auto'; const headerRow = html``; for (let i = 0; i < numColumns; i++) { headerRow.appendChild(html`t=${i * step}`); } headerRow.appendChild(html` { const index = Math.min(timer % maxRound, r.states.length - 1); const tr = document.createElement('tr'); const cell1 = document.createElement('td'); cell1.style.verticalAlign = 'top'; cell1.style.textAlign = 'center'; cell1.style.paddingRight = '20px'; cell1.appendChild(r.animationFrames[index]); tr.appendChild(cell1); for (let i = 0; i < numColumns + 1; i++) { const td = document.createElement('td'); const div = html`

`; if (i < r.thumbnailSvgs.length) { div.appendChild(r.thumbnailSvgs[i]); } td.appendChild(div); td.style.verticalAlign = 'top'; td.style.textAlign = 'center'; tr.appendChild(td); if (i === r.thumbnailSvgs.length - 1) { div.appendChild(html`

t=${r.states.length}*

`); } } table.appendChild(tr); }); return table; } }39:Tfa3,function drawBubbleTea(bubbleTea, { zoom = 4, paddingTop = 8, paddingLeft = 2, paddingRight = 2, paddingBottom = 2, } = {}) { const { cup, straw, boba, ice, bobaVolume, iceVolume, teaVolume } = bubbleTea; const drinkHeight = bubbleTea.drinkHeight(); const drinkRadius = cup.radiusAtDrinkHeight(drinkHeight); const bobaLayers = bubbleTea.createBobaLayers(); const numBobaLayer = bobaLayers.length; const bobas = [].concat(...bobaLayers); const iceStartY = Math.max(bubbleTea.bobaHeight(), bubbleTea.teaHeight() - bubbleTea.iceHeight()) + ice.width / 2; const halfIceWidth = ice.width / 2; const numIceLayer = bubbleTea.countIceLayers(); const ices = []; if (ice.width > 0) { for(let i = 0; i < numIceLayer; i++) { const h = iceStartY + ice.width * i; const r = cup.radiusAtDrinkHeight(h); const numIcePerLayer = Math.floor(2 * r / ice.width); const gap = (2 * r - numIcePerLayer * ice.width) / (numIcePerLayer + 1); const startX = -r + gap; const y = cup.height - h - ice.width/2 - 0.1; for(let j = 0; j < numIcePerLayer; j++) { ices.push({ x: startX + (gap + ice.width) * j, y, }); } } } const innerWidth = (cup.topRadius + 1) * 2 * zoom; const innerHeight = straw.height * zoom; const width = innerWidth + paddingLeft + paddingRight; const height = innerHeight + paddingTop + paddingBottom; const svg = d3.select(DOM.svg(width, height)) .attr('xmlns', 'http://www.w3.org/2000/svg'); const g = svg.append('g') .attr('transform', `translate(${width/2}, ${height/2})scale(${zoom})`) .style('opacity', teaVolume > 0 ? 1 : 0.3); const offsetG = g.append('g') .attr('transform', `translate(${0},${(straw.height-cup.height)/2})`); const cupG = offsetG.append('g') .attr('transform', `translate(${0},${-cup.height/2})`); // tea const teaY = cup.height - bubbleTea.teaHeight(); cupG.append('path') .attr('d', `M${-drinkRadius},${teaY} L${-cup.bottomRadius},${cup.height} L${cup.bottomRadius},${cup.height} L${drinkRadius},${teaY} z`) .style('fill', '#D2B799') // bobas cupG.append('g') .selectAll('circle') .data(bobas) .enter().append('circle') .attr('cx', d => d.x) .attr('cy', d => d.z) .attr('r', boba.radius) .style('opacity', 0.5) .style('fill', '#222') // ices const drawnIceWidth = Math.round(ice.width * 0.95 * 1000) / 1000; cupG.append('g') .selectAll('g') .data(ices) .enter().append('g') .attr('transform', d => `translate(${d.x + halfIceWidth}, ${d.y + halfIceWidth})`) .append('g') .attr('transform', d => `rotate(${Math.random() * 20 - 10})`) .append('rect') .attr('x', - halfIceWidth) .attr('y', - halfIceWidth) .attr('rx', 0.5) .attr('ry', 0.5) .attr('width', drawnIceWidth) .attr('height', drawnIceWidth) .style('fill', '#a5f2f3') .style('opacity', 0.85); // cup cupG.append('path') .attr('d', `M${-cup.topRadius},0 L${-cup.bottomRadius},${cup.height} L${cup.bottomRadius},${cup.height} L${cup.topRadius},0`) .style('fill', 'none') .style('stroke-width', 2.5) .style('stroke', '#222') .style('vector-effect', 'non-scaling-stroke'); // lid cupG.append('line') .attr('x1', -cup.topRadius - 1) .attr('x2', cup.topRadius + 1) .style('stroke-width', 3) .style('stroke', '#222') .style('vector-effect', 'non-scaling-stroke'); if (teaVolume > 0) { // straw const strawY = cup.height - straw.height; cupG.append('path') .attr('d', `M${- straw.radius},${strawY} L${-straw.radius},${cup.height-.4} L${straw.radius},${cup.height - straw.radius * 2 - .4} L${straw.radius},${cup.height - straw.height} z `) .style('fill', '#4F91CB') .style('stroke-width', 1) .style('stroke', '#222') .style('opacity', 0.75) .style('vector-effect', 'non-scaling-stroke'); } return svg; }3a:[] 30:{"id":"917325816a2b9876","slug":"boba-science","title":"Boba Science","thumbnail":"8b1dd7a5100cf34f864a83dcab1a87f93cfc14c78a42acafe22ed219090bd776","access_level":"public","create_time":"$D2018-09-02T19:09:38.334Z","update_time":"$D2018-10-09T17:07:08.697Z","view_time":null,"first_public_time":"$D2018-09-13T20:16:08.319Z","has_unpublished_edits":null,"fork":false,"stars":78,"starred":false,"owner":{"type":"team","id":"a0890581602b48bd","login":"kristw","name":"Krist Wongsuphasawat","avatar_url":"https://avatars-next.observableusercontent.com/e07ddb900020304d276cc13279b1ccb35c728c94e51115b39f576eef60fa1b2d","tier":"starter_2024","bio":"Visualize data during the day. Code random stuffs at night."},"version":1897,"publish_version":1897,"role":null,"authored":false,"authors":[{"type":"individual","id":"eb9b626688d73244","login":"kristw","name":"Krist Wongsuphasawat","avatar_url":"https://avatars-next.observableusercontent.com/e07ddb900020304d276cc13279b1ccb35c728c94e51115b39f576eef60fa1b2d","tier":null,"bio":"Visualize data during the day. Code random stuffs at night."}],"members":[{"type":"individual","id":"eb9b626688d73244","login":"kristw","name":"Krist Wongsuphasawat","avatar_url":"https://avatars-next.observableusercontent.com/e07ddb900020304d276cc13279b1ccb35c728c94e51115b39f576eef60fa1b2d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":{"id":"936bb5e9815c44d2","slug":"explorables","title":"Explorables","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Boba Science","cells":[{"id":0,"value":"md`# Boba Science\n### How can I drink bubble tea to ensure that I don't finish the tea before the bobas?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"md`Have you ever feel frustrated when you finish all the tea in [bubble tea](https://en.wikipedia.org/wiki/Bubble_tea) before the bobas (tapioca balls)? I am pretty sure you are not alone.\n\nOne greedy strategy is to **maximize boba consumption in every sip**. Try to get the maximum amount of boba while getting minimum amount of tea possible. But what are the maximum and minimum?` \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"md`This article simulates an **optimized sip** based on amount of boba and tea in the straw before sipping (method adopted from this [post](https://www.facebook.com/chatrielsan/photos/pcb.654554488278536/655169598217025/?type=3&theater)). The simulation assumes that all bobas sit in the bottom of the cup and stack on top of each other nicely. If you put a straw straight down when there are \\`n\\` layers of bobas, you will get \\`n\\` bobas in the straw. The rest of the straw up to the drink's height is tea. The drinker sips until all \\`n\\` bobas are in his/her mouth then stop. After each sip these \\`n\\` bobas and tea inside the straw are gradually reduced from the cup.\n\nThere are several factors that can affect your drinking experience and affects whether you can finish the bobas before the tea or not:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"md`## 1. Cup dimension\nThe shape of the cup affects how well bobas can stack up. If cup is wider, the bobas spread more and you get less boba for each sip.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1769,"value":"groupRenderers[0].render(timer, this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"md`## 2. What you put in the cup\n- *Tea*: Of course, if more tea, more chance of success.\n- *Boba*: More bobas mean less space for tea and more bobas to finish.\n- *Ice*: Takes up space, but also melts and gradually increases tea volume.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"groupRenderers[1].render(timer, this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"md`## 3. How you drink it\nNot everybody drink like the optimized sip. If you have a habit of consuming more tea per sip, or aggressively sucking bobas, or drinking so slow that all the ice melts, these can affect the results. See the comparison of these three cases below:\n- Optimized sip\n- Consume more tea per sip (200% of tea in an optimized sip)\n- Consume more bobas per sip (200% of bobas in an optimized sip)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"groupRenderers[2].render(timer, this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"md`## Customize your own simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"md`Use the controls below to simulate how long it may take to finish a cup of bubble tea in your own style. Let's see if you can finish the bobas before the tea.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"customSimulationRenderer.render(timer, this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"drawChart(customSimulationStates)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1871,"value":"md`## Recommendations\nBased on the simulations above, here are a few things to keep in mind:\n- **Better use slim cup than fat cup.** Can create taller layer of bobas and there is less area to catch the bobas when they are a few remaining.\n- **Don't add too much ice. If you add ice, make them melt early** to add volume to the tea. \nI usually shake my cup before drinking, which also ensures the entire drink is cold in case the shop just drop the ice on top without shaking or stirring. \nThe trade-off is it may dilute the tea.\n- **Better do a powerful sip than a weak sip.** Powerful sips ensure you get the bobas and maybe some more while weak sips may only give you the tea. Just don't be too aggressive and end up choking yourself.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"md`## Debug`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"unit = 'cm'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"INCH_TO_CM = 2.54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"md`### Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"timer = Math.floor(now / 100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"simulations = ({\n original: new Simulation(),\n fatCup: new Simulation({\n bubbleTea: new BubbleTea({ \n cup: new Cup({ topRadius: 6, bottomRadius: 5, height: 13 }), \n }),\n }),\n noIce: new Simulation({\n bubbleTea: new BubbleTea({ \n iceVolume: 0, \n }),\n }),\n noIceExtraBoba: new Simulation({\n bubbleTea: new BubbleTea({ \n bobaVolume: 220,\n iceVolume: 0, \n }),\n }),\n teaDrinker: new Simulation({\n drinker: new Drinker({\n teaEfficiency: [2, 2],\n }),\n }),\n bobaDrinker: new Simulation({\n drinker: new Drinker({\n bobaEfficiency: [2, 2],\n }),\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"simulationStates = _.mapValues(simulations, s => s.run())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"groupRenderers = [\n new GroupRenderer([\n simulationStates.original, \n simulationStates.fatCup,\n ]),\n new GroupRenderer([\n simulationStates.noIce,\n simulationStates.noIceExtraBoba,\n simulationStates.original,\n ]),\n new GroupRenderer([\n simulationStates.original,\n simulationStates.teaDrinker,\n simulationStates.bobaDrinker,\n ]),\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"customSimulationStates = new Simulation({\n drinker: new Drinker({\n teaEfficiency: [params.teaEfficiency / 100, params.teaEfficiency / 100],\n bobaEfficiency: [params.bobaEfficiency / 100, params.bobaEfficiency / 100],\n iceMeltRatio: params.iceMeltRatio / 100,\n }),\n bubbleTea: new BubbleTea({ \n cup: new Cup({ \n height: params.cupHeight,\n topRadius: params.cupTopRadius,\n bottomRadius: params.cupBottomRadius,\n }), \n straw: new Straw(), \n boba: new Boba({ radius: params.bobaRadius }), \n ice: new IceCube(), \n teaVolume: params.teaVolume, \n bobaVolume: params.bobaVolume, \n iceVolume: params.iceVolume, \n }),\n}).run()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"customSimulationRenderer = new GroupRenderer([customSimulationStates])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"md`### Models`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"class Cup { \n constructor({ height = 15.5, topRadius = 4.75, bottomRadius = 3.75 } = {}) {\n this.height = height;\n this.topRadius = topRadius;\n this.bottomRadius = bottomRadius;\n }\n \n radiusAtDrinkHeight(h) {\n return this.topRadius + (h - this.height) / this.height * (this.topRadius - this.bottomRadius);\n }\n \n volumeFromDrinkHeight(h) {\n const r = this.radiusAtDrinkHeight(h);\n return frustumVolume(r, this.bottomRadius, h);\n }\n \n drinkHeightFromVolume(v) {\n const MARGIN_OF_ERROR = 0.0001;\n const r = (this.topRadius + this.bottomRadius) / 2;\n const area = Math.PI * r * r;\n let estimateHeight = v / area;\n let diff = v - this.volumeFromDrinkHeight(estimateHeight);\n let counter = 0;\n while(counter < 100 && Math.abs(diff) > MARGIN_OF_ERROR) {\n estimateHeight += diff / area;\n diff = v - this.volumeFromDrinkHeight(estimateHeight);\n counter++;\n }\n return estimateHeight;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"class Straw {\n constructor({ radius = 0.25 * INCH_TO_CM, height = 8 * INCH_TO_CM } = {}) {\n this.radius = radius;\n this.height = height;\n }\n area() {\n return Math.PI * this.radius * this.radius;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"class Boba extends Sphere {\n constructor({ radius = 0.6 } = {}) {\n super({ radius });\n }\n area() {\n return Math.PI * this.radius * this.radius;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"class IceCube {\n constructor({ width = 1.75 } = {}) {\n this.width = width;\n this.cached = { volume: this.width * this.width * this.width };\n }\n volume() {\n return this.cached.volume;\n }\n melt(meltRatio) {\n const newVolume = (1 - meltRatio) * this.volume();\n return new IceCube({ width: newVolume >= 0.008 ? Math.cbrt(newVolume) : 0 });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"class Simulation {\n constructor({ \n drinker = new Drinker(), \n bubbleTea = new BubbleTea()\n } = {}) {\n this.drinker = drinker;\n this.bubbleTea = bubbleTea;\n }\n run() {\n const states = [{ t: 0, bubbleTea: this.bubbleTea }];\n let state = states[0];\n let counter = 0;\n while(counter < 200 && state.bubbleTea.hasEnoughTeaToDrink()) {\n counter++;\n const nextState = { t: counter, bubbleTea: this.drinker.drink(state.bubbleTea) };\n state = nextState;\n states.push(nextState);\n }\n state.bubbleTea.teaVolume = 0;\n return states;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"class Sphere {\n constructor({ radius }) {\n this.radius = radius;\n }\n volume() {\n return 4 / 3 * Math.PI * this.radius * this.radius * this.radius;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"md`### Computation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"// http://jwilson.coe.uga.edu/emt725/Frustum/Frustum.cone.html\nfunction frustumVolume(r1, r2, h) {\n return Math.PI * h / 3 * (r1 * r1 + r1 * r2 + r2 * r2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"md`### Rendering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"// function drawAnimation(states, { zoom = 10 } = {}) {\n// return drawBubbleTea(states[Math.floor(now/200)%states.length].bubbleTea, { zoom }).node();\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"function drawComparison(renderers, timer, maxRoundIn){\n const maxRound = maxRoundIn || d3.max(renderers, r => r.states.length);\n return Promise.all(renderers.map(renderer => renderer.renderSummary(timer, maxRound)))\n .then(elements => {\n const div = document.createElement('div');\n elements.forEach(element => div.appendChild(element));\n return div;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"function drawChart(states) {\n return vegalite({\n data: {values: _.flatMap(states, state => [\n { t: state.t, field: 'tea', value: state.bubbleTea.teaVolume },\n { t: state.t, field: 'boba', value: state.bubbleTea.bobaVolume },\n { t: state.t, field: 'ice', value: state.bubbleTea.iceVolume },\n ])},\n mark: {type: \"area\", interpolate: \"step\"},\n width,\n height: 200,\n autosize: \"fit\",\n encoding: {\n x: {\n field: \"t\",\n type: \"quantitative\",\n axis: {tickCount: 5, title: \"No. of sips\"}\n },\n y: {\n \"aggregate\": \"sum\",\n field: \"value\",\n type: \"quantitative\",\n axis: {format: \"f\", title: \"Volume (ml)\"}\n },\n color: {\n field: \"field\",\n type: \"nominal\",\n scale: {\n domain: ['tea', 'boba', 'ice'],\n range: ['#D2B799', '#222', '#54CAD2']\n },\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1659,"value":"function domNodeToString(domNode) {\n\tvar element = document.createElement(\"div\");\n\telement.appendChild(domNode);\n\treturn element.innerHTML;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"function convertSvgToImageUrl(svg) {\n // http://bl.ocks.org/armollica/99f18720eb9762351febd64236bb1b9e\n const DOMURL = window.URL || window.webkitURL || window;\n\tconst svgString = domNodeToString(svg.node());\n\tconst svgBlob = new Blob([svgString], { type: \"image/svg+xml;charset=utf-8\" });\n return DOMURL.createObjectURL(svgBlob);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"function convertSvgToCanvas(svg) {\n // http://bl.ocks.org/armollica/99f18720eb9762351febd64236bb1b9e\n const DOMURL = window.URL || window.webkitURL || window;\n\tconst svgString = domNodeToString(svg.node());\n\tconst svgBlob = new Blob([svgString], { type: \"image/svg+xml;charset=utf-8\" });\n const url = DOMURL.createObjectURL(svgBlob);\n const canvas = document.createElement('canvas');\n canvas.setAttribute('width', svg.attr('width'));\n canvas.setAttribute('height', svg.attr('height'));\n const context = canvas.getContext('2d');\n const image = new Image();\n return new Promise((resolve, reject) => {\n image.onload = function() {\n console.log('image', image);\n context.drawImage(image, 0, 0);\n DOMURL.revokeObjectURL(url);\n resolve(canvas);\n }\n image.src = url;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"md`### Experiments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"// packedBubbles = {\n// const paddingLeft = 10;\n// const paddingRight = 10;\n// const paddingBottom = 10;\n// const paddingTop = 10;\n// const zoom = 10;\n// const innerWidth = 14 * zoom;\n// const innerHeight = 14 * zoom;\n// const width = innerWidth + paddingLeft + paddingRight;\n// const height = innerHeight + paddingTop + paddingBottom;\n// const svg = d3.select(DOM.svg(width, height));\n// const g = svg.append('g')\n// .attr('transform', `translate(${width/2}, ${height/2})scale(${zoom})`);\n\n// g.append('circle')\n// .attr('r', 6)\n// .style('fill', '#D2B799')\n \n// g.append('g').selectAll('circle')\n// .data(circles)\n// .enter().append('circle')\n// .attr('cx', d => d.x)\n// .attr('cy', d => d.y)\n// .attr('r', d => d.radius);\n// return svg.node()\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"// drawBubbleTea(simulationStates.original[0].bubbleTea, {zoom: 10}).node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1663,"value":"// canv = convertSvgToCanvas(drawBubbleTea(simulationStates.original[0].bubbleTea, {zoom: 10}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"vegalite = require(\"@observablehq/vega-lite\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1"}} 31:"$30:body"