slice stretch brush
A free image processing demo — play it in your browser, no install. 把图片切一刀，拖出胶囊，沿轨迹弯曲当笔刷写字 · single-file HTML5 Canvas demo
Vote and save it — continue with GitHub or sign in free
Made this, @AppApp777? See how many people played it → or use email
GitHub asks to share your profile and email with us. We never post anything.
No account needed to save ♥ or react 🔥: they’re under the game. Or vote with email.
Open the live demo Source on GitHubFrom the README
当前版本 v0.5 · 最后一次代码改动 2026-05-20 · 全部产品就是一个 index.html，1330 行。
把源图绕切割中点旋转 -cutAngle，存到一个 diag × diag 的内部 canvas（diag = 原图对角线）。关键不变量：在这个内部 canvas 里，切割线一定是水平线 y = diag/2，之后所有渲染都基于这个不变量。
路径每 1.5 px 采样一点。中段不是“相邻两点画一片”，而是沿路径每 STAMP_STEP = 0.4 px 盖一个 W × 2 px 的矩形 stamp，drawImage(midRow, …) 配合 ctx.rotate(切线方向)——相邻 stamp 沿切线重叠 1.6 px，密铺无空隙。
绕这么大弯是被逼的：早期版本用 ctx.clip() 裁梯形（后来换 affine 三角形）拼接，而 clip path 本身是 1-bit 栅格化——浮点端点四舍五入到不同像素，相邻段的公共边永远漏出白色细缝，重叠量调多大都没用。stamp 方案彻底不碰 clip、不碰 affine 变换，也就不存在栅格化边界。三轮踩坑的完整过程见 BUGS.md。
横截面 + 上下半截高度按 scale 缩放，中段长度始终等于鼠标拖距——这样调粗细不会影响“拉多长”的手感。
Built something like this? Submit your vibe — free account, takes a minute. How listing works.
More like this
Swarm
🦟 Interactive swarm simulation where pointer swarms follow your cursor - WebGL / threejs
make or break
A canvas simulation where a builder and breaker compete. Change speed, chaos, and time to watch the grid behave differently.
WebCrawlerMY
A cyber-mechanical Web Crawler & spider interactive simulation with inverse kinematics (IK), radar scanning, and audio synthesis.
pixel stretch
ブラウザで動作する画像をドラッグして引き伸ばすグリッチ加工ツール。. Drag to stretch. Break the image. A glitch tool that runs entirely in your browser. → Open the tool — no install…
halftone cloud
Images rebuilt as a halftone of flying shapes. One HTML file, no dependencies.
webnix particles
Interactive particle-based typography experiment built with vanilla HTML, CSS and JavaScript.
Made this?
Claim it: create a free account, then press CLAIM THIS in the cruiser. Put the badge below in your README or on your demo page first; that link is how we know it's yours.
Your project is on the cruise, loaded live from your own site. Put the badge in your README or on the demo page: it shows your live play count, it links back to this page, and everyone who lands here is one click from running the real thing.
