{ "choices": [ { "finish_reason": "stop", "index": 0, "message": { "role": "assistant", "content": "\n\n\n\nVolcano Eruption Simulator\n\n\n\n

VOLCANO ERUPTION SIMULATOR

Eruption Power 1.0\n

Wind (\u2190 / \u2192) 0.15\n

Particle Amount 1.0\n

\n\n\n\n\n", "reasoning_content": "Create a volcano eruption simulation using canvas. Single HTML file. Sliders (power, wind, particle count), pressure meter, lava particles using gravity physics, slope collision, cooling color, ash particles, FPS counter, particle count counter.\n\nDesign:\n- Canvas size probably 900x500, responsive.\n- Volcano: mountain shape with a crater in the middle. Two slopes from the edges to the crater rim. Simple polygon: ground at y = H, peak (crater) at (W/2, topY). Crater opening between peakX-30 and peakX+30.\n- Pressure builds over time; when it reaches max, erupt: spawn N lava particles with random velocities mostly upward; reset pressure.\n- Lava particle: x, y, vx, vy, life, temperature. Gravity g = 0.15. Collision with slopes: defined as line segments of the triangle. When it lands, it flows downhill: along the slope, with velocity influenced by wind? Gravity along the slope, keep flowing along the slope surface. Settle once velocity is low. Cooling: lifetime-based color: yellow \u2192 orange \u2192 red \u2192 dark grey. Settle duration, then fade.\n- Slope function: height at x: left slope is from (0, H) to (craterLeftX, craterTopY)... actually simpler: volcano defined as piecewise: left slope from (0,H) to (cx - craterHalfW, topY), right slope from (cx+craterHalfW, topY) to (W,H). Crater between them at topY: particles spawned inside crater fall out and land. Use slope surface: surfaceY(x). height at x: left slope from (0,H) to (cx-craterHalfW, topY), right slope from (cx+craterHalfW, topY) to (W,H). Crater between is at topY: particles spawned inside crater exit crater and land. Use surfaceY(x): if x between crater edges return crater bottom (topY + some depth? maybe make crater floor slightly lower). If x < craterL: H - (H - topY) * (x - 0)/(craterL - 0)? slope from ground on left to peak at left edge of crater. Actually the slope from ground to peak... left slope from (0,H) to (craterL, topY). So surfaceY = H - (H - topY)*(x)/(craterL). Outside craterL..craterR it's H, but topY inside crater.\n\nLava landed: if particle crosses surfaceY, snap to it, velocity along slope proportional to tan. On slopes there's gravity along slope. Slope: left slope angle \u2014 surface decreases with x... slope s = (topY - H)/(craterL - 0), negative (higher as x increases). Particle on left slope flows downhill to left (decreasing x). On right slope to right. So tangential acceleration = g * sin(theta)* direction toward base. Compute per side.\n\nSimplify: when on surface, vx += slopeAccel*dir, position y = surfaceY(x). Friction. If |velocity| tiny, settle: vy component stops \u2014 set landed=true, keep sliding with friction, then when speed < eps stop, becoming \"rock\", fade after coolTime.\n\nAsh: spawn from crater during eruption (also small ambient?), rise, get random walk, drift with wind, expand, fade.\n\nWind slider: -1 to 1 (arbitrary units). Power slider: eruption strength. Particle amount slider: density multiplier for eruption density and ash.\n\nPressure meter: bar on screen, drawn in canvas or HTML. HTML panel: draw in top corner on canvas. Simpler: canvas draw.\n\nFPS: compute per second.\n\nCap particles at some max like 4000 for performance. Use simple arrays.\n\nColors: glow via composite \"lighter\" for hot lava. Avoid per-particle shadowBlur (slow). Precompute? Draw radial gradient sprite once offscreen and drawImage \u2014 fast. Make sprite of white circle gradient, colorize with globalAlpha and... colorization cost. Approach: draw lava as circles with fillStyle chosen from palette buckets via fillRect \u2014 decent. For glow, draw a bigger circle of low alpha on top. To keep fast, precompute offscreen canvases: e.g., 6 sprites (different colors) of radial gradient, and drawImage with scale. Colors: interpolate along cooling palette but sprite per color bucket (e.g., 8 buckets). Sprites generated at load time.\n\nStructure: Lava particle holds temperature t (0..1 decreasing over lifetime). Color bucket = floor(t*7). Draw sprite accordingly with \"lighter\". Settle rocks drawn normal dark fill, no lighter \u2014 maybe fade.\n\nSimpler approach: keep all lava particles drawn with \"lighter\" additive. Settle rocks fade out, dark rock color is barely visible with additive. Hmm additive of dark red is fine. Use two passes: hot particles (t>0.15) additive, cooled ones drawn normally as dark rock. Good.\n\nAsh: grey circle drawn with globalAlpha, normal composite, drawn after lava? Ash behind (first)? Ash rises from crater, drawn before lava \u2014 drawn after? Draw ash below (first) then lava on top. Ash rises up so overlap minimal. Draw ash then lava. Also draw ash on top of volcano shape. Ash behind lava.\n\nVolcano drawing: sky gradient background, then ash cloud, then volcano cone (polygon) drawn on top of landed lava? Landed lava should be on top of cone. Draw order: sky, ash, volcano, lava (rock then hot with additive), UI.\n\nWait, ash should drift across sky \u2014 draw after volcano is behind volcano. Fine: ash behind cone looks fine (smoke behind cone visible above crater). Good.\n\nPressure: builds at rate, eruption occurs when pressure==1: burst spawn, plus continuous spawn during short eruption duration for realism: eruptionTimer, rate depends on particle amount. After timer ends, pressure resets to 0 and starts building again.\n\nWind affects ash: vx += wind*0.02; affects lava slightly? In flight only affect ash (realistic).\n\nCounter: text at top-left: \"Particles: N FPS: F\".\n\nSliders: HTML input range below canvas in a controls div, dark styling.\n\nCanvas size: fixed 960x540, scale by CSS.\n\nCode specifics:\n\n```js\nconst W=960,H=540; groundY = H (bottom). volcano: cx=W/2, craterHalf=34, topY=140; baseY=H (ground). Left slope from (0,H) to (cx-craterHalf, topY)? then slopes reach ground at edges. Might add a second smaller peak. Simple cone with wide base is fine: baseY = H+? Ground level for lava settling: groundY=430 with ground rectangle below. Actually side view: ground line at y=430, below it is earth-brown ground fill. Volcano cone from groundY to topY.\n\nsurfaceY(x):\nif x < craterL: if x<=0 return groundY (but slope reaches at x=0) \u2014 cone base spans entire width. surfaceY = groundY + (topY - groundY) * (x - 0)/(craterL - 0) \u2192 at x=0 groundY, at craterL topY. Clamp.\nif x within crater: return craterFloorY = topY+14.\nif x > craterR: mirror. Beyond cone base (x out of [0,W]) still fine.\n```\n\nLava physics: while in flight, vy += G; vx += wind*0.005 (tiny air drag on lava too, small). If y >= surfaceY(x): landed. If inside crater (x within craterX range) settle there. Compute slope s (surfaceY derivative): left slope sL = (topY-groundY)/craterL (negative). Tangential gravity: on slope, acceleration along x = G * s * something... For surface y = a + m*x, gravity along slope acceleration = g*m/sqrt(1+m\u00b2)*... direction: particle accelerates in direction of downhill = if m<0 downhill means decreasing x. Use ax = -G*m / (1+m\u00b2)?? For 1D sliding with slope y = m x, acceleration along x = g\u00b7sin \u03b8\u00b7cos \u03b8 direction downhill = -g\u00b7m/(1+m\u00b2)... check: downhill = decreasing y. If m negative (left slope: y decreases as x increases? left slope: as x increases toward peak y decreases (upward)). Downhill side: toward x=0. So acceleration should be negative. With m negative, -g\u00b7m/(1+m\u00b2): -g\u00b7m is positive \u2192 wrong. Use ax = g\u00b7m/(1+m\u00b2): negative \u2192 leftward. Hmm derivation: acceleration along slope: ax = -g\u00b7m/(1+m\u00b2)? Test: m=0 flat \u2192 0 good. Steep negative m: should accelerate left (negative). ax = g\u00b7m/(1+m\u00b2) \u2192 negative \u2713. For positive m (right side slope rises as x increases then... right slope: from peak (craterR, topY) to (W, groundY): m = (groundY-topY)/(W-craterR) positive) downhill = increasing x \u2192 positive ax \u2713 with ax = g\u00b7m/(1+m\u00b2). Wait but left slope in y-down coords: y = groundY at x=0, y=topY at craterL: m = (topY-groundY)/craterL <0 since topY=1: erupting=true, eruptTimer = 90 + power*... frames; }\nwhile erupting: spawn per frame = particleAmount scaled count; if timer done: erupting=false; pressure=0;\n```\n\nEruption spawn: from crater: x = cx + rand*craterHalf, y = topY+10; vx = (rand-0.5)*2 * spread*powerFactor... vx = (Math.random()-0.5)*4, vy = -(6 + Math.random()*6)*power. Power slider 0.3..2.\n\nCap: if lava array length > MAX (like 6000) remove oldest.\n\nFPS: frame counter, update every 500ms.\n\nDraw UI: pressure meter: bar at top-left, vertical or horizontal. Draw horizontal bar labeled with gradient.\n\nLet me also add slight glow in crater before eruption when pressure high.\n\nVolcano shape draw: path polygon (0,groundY)\u2192(craterL,topY)\u2192(craterR,topY)\u2192(W,groundY) plus below to bottom corners, filled with mountain gradient. Ground rect below groundY. Crater glow: when erupting or high pressure, draw radial at crater.\n\nAlso small background mountains optional; skip, keep sky gradient + maybe sun? Keep sky gradient simple + ground.\n\nLava draw: hot ones additive pass. Cooled rock (settled, dark): draw dark grey sprite normal. Manage: each lava p has settled flag, temp. Bucket: temp>0.05 \u2192 hot sprite (bucket = clamp(floor(temp*8))). Else rock.\n\nLava draw size: r = p.size (2..5) \u2192 drawImage(sprite, x-s,y-s,2s,2s) where sprite is soft circle; hot core brighter.\n\nAsh draw sprite grey.\n\nNow HTML/CSS: dark page, centered canvas, slider row with labels showing values.\n\nLet me write code.\n\nPerformance: with \"lighter\" drawImage for up to ~2000 particles fine.\n\nAlso prevent ash buildup from eating memory: cap ash at 800.\n\nLet me write it.\n\nCounter text at top-left: \"Particles: N FPS: F\".\n\nLet me code now.\n\nsurfaceY(x) function:\n\n```js\nconst groundY=430, topY=140, craterHalf=34, cx=W/2;\nconst craterL=cx-craterHalf, craterR=cx+craterHalf, craterFloor=topY+16;\nconst mLeft=(topY-groundY)/craterL; // per px\nconst mRight=(groundY-topY)/(W-craterR);\nfunction surfaceY(x){\n if(x<=0)return groundY; // slope extends to edge; if x<0 offscreen\n if(x= surfaceY(p.x): landed = true. y=surfaceY(x). Keep tangential: keep vx but constrain.\n\nAlso during flight don't check collision below ground bottom.\n\nAsh spawn from crater: x = cx \u00b1 craterHalf*rand, y=topY+4.\n\nWind slider label shows left/right.\n\nUpdate pressure meter drawing: rectangle with border, fill proportion, glow when near full.\n\nDraw text.\n\nMain loop via requestAnimationFrame; fixed-ish dt per frame (assume 60). Could use dt scale = min(2, delta/16.67). Simpler: assume 60fps.\n\nFPS compute: frames++, every 500ms fps = frames*1000/elapsed.\n\nAlso \"at least 1000 active particles\" needs to hold: with particle amount slider to max, eruption spawns like 40/frame for 150 frames \u2192 6000 \u2192 cap MAX 5000. Performance: 5000 drawImages might be heavy but with sprite draws okay. Set MAX_LAVA=4000.\n\nAlso ambient smoke from crater between eruptions: light seeping to show pressure: spawn rate proportional to pressure^3 * small. Nice.\n\nWrite final HTML.\n\nColor palette hot (t near 1 \u2192 white/yellow; low t \u2192 dark red):\npalette[i] i=0..7 from cool to hot:\n0: (60,20,10) ... build: t=1 bright yellow (255,240,150). Sprite: radial gradient, center color bright, edge transparent-ish.\n\nDefine palette from t=0..1 (8 buckets):\nbucketColors = [ [70,15,8],[120,25,10],[170,40,12],[200,60,15],[220,90,20],[240,140,30],[255,190,70],[255,240,140] ]\n\nSprite creation: radial gradient, center color rgba(r,g,b,1) \u2192 mid rgba*0.6 \u2192 edge transparent. Size 40px.\n\nRock sprite: dark grey soft blob.\n\nAsh sprite: grey soft blob, size 64.\n\nDraw ash with globalAlpha = p.alpha, drawImage scaled by r.\n\nUI text and sliders. Slider ids: power (0.3\u20132 step .05 default 1), wind (-1\u20131 default 0.15), amount (0.2\u20132 default 1). Value displays.\n\nErupt spawn count per frame: base = Math.round(14*amount) plus power influence on velocity.\n\nAsh spawn during eruption: ~4*amount per frame; ambient: pressure>0.5 \u2192 pressure^3*2 per frame.\n\nOK let me code it.\n\nAlso draw stars? Daytime, skip.\n\nEdge case: particle below canvas if past W+50 etc. remove.\n\nRemoval: settled rocks: after settled, fade: p.alpha -= 0.002. When alpha<=0 remove. Actually keep rocks visible for a while: alpha starts at 1 after settling, fade after cooldownTimer.\n\nSimplify: temperature keeps dropping even in flight; when landed cooling doubles (contact). temp decreases: flight coolRate 0.0009 + landed 0.0025. temp <= 0.02 \u2192 rock fade: alpha decreases 0.0015 \u2192 remove at <=0.\n\nHot draw condition temp > 0.12, else rock.\n\nSettled condition: landed && |vx|<0.03 \u2192 settled=true, vx=0.\n\nSlide on landed while not settled: vx += g*m/(1+m\u00b2)*2 (2x more dramatic), friction 0.99, then y = surfaceY(x).\n\nLava in crater with m=0: vx *= 0.9 \u2192 quickly settles. Good.\n\nLet me code it.\n\nAlso add subtle background hills for aesthetics: 2 dark triangles. Optional; add cheaply.\n\nLet me generate final HTML.\n" } } ], "created": 1787805570, "model": "~/.cache/huggingface/hub/models--unsloth--Qwen3.8-Flash-Next-GGUF/snapshots/178b998806b7b406c311a3e6174aa99cf6304eaf/UD-Q2_K_XL/Qwen3.8-Flash-Next-UD-Q2_K_XL-00001-of-00003.gguf", "system_fingerprint": "b10667-213df585b", "object": "chat.completion", "usage": { "completion_tokens": 8435, "prompt_tokens": 236, "total_tokens": 8671, "prompt_tokens_details": { "cached_tokens": 0 } }, "id": "chatcmpl-9CZGPWCd54zvCcaT525kRz0L3d5VLbNp", "timings": { "cache_n": 0, "prompt_n": 236, "prompt_ms": 1585.248, "prompt_per_token_ms": 6.717152542372881, "prompt_per_second": 148.87260542199076, "predicted_n": 8435, "predicted_ms": 363654.76, "predicted_per_token_ms": 43.11770927199431, "predicted_per_second": 23.192326700192236 } }