KaiyoLab

I'm我是 Andy.Sharing software development notes and personal projects.

Paint with particles畫一張粒子背景

Move your pointer or drag to gather and scatter particles, then save your picture移動滑鼠或拖曳,讓粒子聚攏、散開,再把畫面存成圖片

This browser does not support Canvas

Reduced motion is on — autoplay is disabled, step through the field Move your pointer or drag on the canvas to attract or repel the particlesFocus the canvas and use arrow keys to move the probe, Enter to toggle force and Esc to release

Advanced settings & export

Same seed, time and input — same trajectories

Mobile displays up to 480 particles. PNG uses the current canvas resolution.

Background settings JSON

Source updates as you change the controls

How it works看看怎麼做的

Particle background generator粒子背景產生器

  • Curl field
  • Fixed timestep
  • PNG + JSON

Structured particle motion有結構的粒子運動

Analytic derivatives of a multiscale potential form the divergence-free base field. Particles follow with inertia, pointer forces add attraction or repulsion, and a seed reproduces initial conditions.多尺度勢函數的解析偏導形成基礎無散度流場,粒子以慣性追隨向量,指標可額外施加吸引或排斥,種子保留可重現的初始條件

Separate rendering from time畫面與時間分開處理

Fixed simulation steps and a bounded accumulator reuse particle buffers. Canvas DPR is capped at two, offscreen and hidden tabs stop work, and reduced motion supports manual stepping.模擬採固定時間步長與有界累積器,重用粒子緩衝區,Canvas 像素比上限為 2,離屏與隱藏分頁停止運算,減少動態模式支援單步查看

Save the image and settings圖片與設定分別保存

PNG saves the current canvas image. JSON saves the seed, particle count and visual parameters; it contains neither a standalone animation nor every particle position.PNG 保存當前 Canvas 畫面,JSON 保存種子、粒子數與外觀參數,設定檔不包含獨立動畫程式或每一顆粒子的即時位置