跳到正文
网页珍奇柜Web Curio

程序生成的鱼类图谱

fishdraw,Lingdong Huang,2021 年

正在布展…

原作直展:这是 Lingdong Huang 的原始作品,按 MIT 许可证收录(版本 a514372)。fishdraw.js 原样展出,未作任何修改;本柜的宿主页只调用它公开的 main() 和 draw_svg_anim(),把鱼一笔一笔画出来。点击画面换一条。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步随机参数决定体型曲线、鳍的数量与位置、眼睛和嘴的形状。
  2. 第 2 步鳞片沿体表网格逐行铺设,并按光照方向画排线阴影。
  3. 第 3 步所有形状最终都转为折线并做遮挡裁剪。
  4. 第 4 步输出 SVG,可用于绘图仪。

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Define a fish body as two spline curves (top and bottom profile) driven by random parameters for length, depth and taper. Generate fins as fans of polylines with rays, place an eye and mouth at proportional positions, then tile scale arcs along a curvilinear grid inside the body. Shade by adding hatch lines whose density depends on distance from the belly. Implement polygon clipping so nearer parts hide strokes behind them, and export everything as plain polylines in SVG.

档案

交互

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Live page loads (HTTP 200, inline HTML with floralwhite body); gh api: MIT, created 2021-08-11.