# 把 Logo 式海龟绘图压缩到几十行 JS，在线分享可执行参数化艺术 > 用 Turtletoy 的极简 Turtle API，30 行代码就能生成可交互、可绘图机输出的参数化玫瑰，一键把变量变滑杆，让观众秒变二创作者。 ## 元数据 - 路径: /posts/2025/12/08/minimalist-turtle-graphics-javascript-parametric-art/ - 发布时间: 2025-12-08T21:17:42+08:00 - 分类: [application-security](/categories/application-security/) - 站点: https://blog.hotdry.top ## 正文 > “给任何人 30 行 JavaScript，他就能在浏览器里种下一朵会参数化开花的玫瑰，再点一下 Export，SVG 直接飞进 AxiDraw。”——这就是 Turtletoy 的魔法。 ## 1. 30 行玫瑰：从 0 到可运行 打开 [turtletoy.net/turtle/new](https://turtletoy.net/turtle/new)，清空编辑器，把下面 30 行粘进去，点 Run： ```javascript // 可调节变量——下一节解释 const petals = 7; // min=3 max=13 step=1 const step = 2; // min=0.5 max=5 step=0.5 const k = 0.8; // min=0.1 max=1 step=0.1 const turtle = new Turtle(); turtle.penup(); turtle.goto(0, -40); turtle.pendown(); function walk(i) { const t = i * step; const r = 40 * Math.cos(petals * t * Math.PI / 180); const x = r * Math.cos(t * Math.PI / 180) * k; const y = r * Math.sin(t * Math.PI / 180); turtle.goto(x, y); return i < 360 / step; } ``` 画布立刻出现一朵极坐标玫瑰。代码里没有任何魔法： - `new Turtle()` 给你一只原点朝上的海龟； - `penup / pendown` 控制落笔； - `walk(i)` 是 Turtletoy 的执行引擎——它会被反复调用，直到返回 `false`，每次 `i+1`，约 16 ms 刷新一次，天然动画。 ## 2. 把变量变成滑杆：3 秒暴露参数 想让观众自己“调花”？把注释改成指定格式即可： ```javascript const petals = 7; // min=3 max=13 step=1 花瓣数 const step = 2; // min=0.5 max=5 step=0.5 步长(密度) const k = 0.8; // min=0.1 max=1 step=0.1 扁率 ``` 保存后，页面右侧立刻出现三个滑杆。拖动瞬间重绘，URL 自动同步参数，任何人打开都是“你的版本”。观众点 “Fork” 即可在副本上继续改，社区链式演进就此发生。 ## 3. 导出 SVG：从浏览器到绘图机 点击 **Export SVG**，得到纯路径文件： - 黑白单线，无填充，完美适配笔式绘图机； - 视图框固定 400×400 逻辑单位，可直接缩放成 A4/A3 纸张。 AxiDraw 推荐参数（实测）： - 笔速：30 cm/s - 纸张：160 g 复印黑卡 - 笔：0.3 mm 樱花勾线笔 - 总耗时：约 4 分钟（花瓣=7, step=2，全长 1.8 m）。 线下签名、装框、送人，线上代码仍在云端继续分叉。 ## 4. Fork 链案例：站在别人龟壳上再飞 Turtletoy 每条作品都带“Fork”按钮。以用户 *reinder* 的 [Cubic cityscape #1](https://turtletoy.net/turtle/789cce3829) 为例： - 原始：一次螺旋生成 96 个立方体； - 第一次 Fork：把 `scale` 改成可调节变量，城市密度立刻可玩； - 第二次 Fork：加入 `SimplexNoise`，让楼高随噪声起伏，生成“雾城”； - 第三次 Fork：把 `right(90)` 换成 `right(89.5)`，整体出现超现实倾斜； - 最终版本收获 90+ 点赞、30 多次 Fork，一条螺旋演变成千边形未来都市。 这就是“算法 + 参数 + 社区”滚雪球的最小闭环：代码即素材，参数即交互，Fork 即传播。 ## 5. 小结与彩蛋 Turtletoy 刻意限制在“单龟、单色、单画布”，反而让创作者把注意力放回算法本身：极坐标、噪声、L-System、分形、Truchet……全都能塞进几十行 JS。下一步？ - 把 `noise.js` 贴进全局，2D 噪声地形立刻出现； - 用 `clone()` 生成多只子龟，做群体行为； - 在 `walk` 里塞 `if (i % 3 === 0) turtle.circle(5)`，瞬间给路径加节点装饰。 写完点 Save，世界就多了一份可执行、可把玩、可绘制的微型艺术。现在轮到你，把下一朵玫瑰、下一片城市、下一阵噪音，压缩进 30 行 JavaScript，让海龟替你爬出无限。 --- 参考资料 [1] Turtletoy 官方 API 文档：https://turtletoy.net/syntax [2] Turtletoy 社区作品库：https://turtletoy.net/turtle/browse/newest/ ## 同分类近期文章 ### [Twenty CRM架构解析：实时同步、多租户隔离与GraphQL API设计](/posts/2026/01/10/twenty-crm-architecture-real-time-sync-graphql-multi-tenant/) - 日期: 2026-01-10T19:47:04+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 深入分析Twenty作为Salesforce开源替代品的实时数据同步架构、多租户隔离策略与GraphQL API设计，探讨现代CRM系统的工程实现。 ### [基于Web Audio API的钢琴耳训游戏：实时频率分析与渐进式学习曲线设计](/posts/2026/01/10/piano-ear-training-web-audio-api-real-time-frequency-analysis/) - 日期: 2026-01-10T18:47:48+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 分析Lend Me Your Ears耳训游戏的Web Audio API实现架构，探讨实时音符检测算法、延迟优化与游戏化学习曲线设计。 ### [JavaScript构建工具性能革命：Vite、Turbopack与SWC的架构演进](/posts/2026/01/10/javascript-build-tools-performance-revolution-vite-turbopack-swc/) - 日期: 2026-01-10T16:17:13+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 深入分析现代JavaScript工具链性能革命背后的工程架构：Vite的ESM原生模块、Turbopack的增量编译、SWC的Rust重写，以及它们如何重塑前端开发体验。 ### [Markdown采用度量与生态系统增长分析：构建量化评估框架](/posts/2026/01/10/markdown-adoption-metrics-ecosystem-growth-analysis/) - 日期: 2026-01-10T12:31:35+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 基于GitHub平台数据与Web生态统计，构建Markdown采用率量化分析系统，追踪语法扩展、工具生态、开发者采纳曲线与标准化进程的工程化度量框架。 ### [Tailwind CSS v4插件系统架构与工具链集成工程实践](/posts/2026/01/10/tailwind-css-v4-plugin-system-toolchain-integration/) - 日期: 2026-01-10T12:07:47+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 深入解析Tailwind CSS v4插件系统架构变革，从JavaScript运行时注册转向CSS编译时处理，探讨Oxide引擎的AST转换管道与生产环境性能调优策略。