diff --git a/frontend/js/labs/organic.js b/frontend/js/labs/organic.js index 22e4673..d215779 100644 --- a/frontend/js/labs/organic.js +++ b/frontend/js/labs/organic.js @@ -1437,10 +1437,16 @@ class OrganicSim { ctx.lineTo(x + w - 4, y); ctx.stroke(); - // clip to tube for liquid + // clip to the tube interior (straight sides + rounded bottom) so the + // liquid never spills past the glass outline + const rBot = w/2 - 4; ctx.beginPath(); - ctx.rect(x + 4, liqY, w - 8, liqH - 8); - ctx.arc(x + w/2, y + h - (w/2 - 4), w/2 - 4, 0, Math.PI); + ctx.moveTo(x + 4, liqY); + ctx.lineTo(x + 4, y + h - rBot); + ctx.arcTo(x + 4, y + h, x + w/2, y + h, rBot); + ctx.arcTo(x + w - 4, y + h, x + w - 4, y + h - rBot, rBot); + ctx.lineTo(x + w - 4, liqY); + ctx.closePath(); ctx.clip(); // base liquid (reagent color)