交互式生成艺术代码:定制{填写}视觉效果
提示词描述:
专为创意编程爱好者与网页设计师打造。通过参数化控制与场域交互算法,快速生成具有艺术感的动态背景或互动装置。适用于线上展览、个人主页装饰或数字媒体艺术实验。替换主题词后,AI 会输出开箱即用的 Canvas 单文件代码。
提示语关键词:
AI生成动画代码, JavaScript创意编程, Canvas交互特效制作, 动态视觉效果开发, AI辅助前端设计, 网页艺术生成提示
提示词内容:
你是创意编程专家。请编写一段原生 JavaScript 结合 HTML5 Canvas 的代码,生成具有{填写}主题的动态视觉艺术效果。可参考“鼠标拖拽产生流体涟漪”或“几何图形受重力自然坠落”等交互逻辑。代码需支持实时触控改变形态。
执行路径如下:初始化画布并绑定 resize 事件实现全屏自适应。创建对象池管理图形实例,定义运动轨迹算法,采用数学噪声函数生成有机动效。绑定交互监听器,使光标位置产生场域影响,带动周围元素产生形变或加速。集成 HSL 插值,根据交互强度动态调整色相与透明度。
性能约束部分:单帧渲染上限 800 对象,强制使用 requestAnimationFrame 避免卡顿。代码严格划分为配置参数、物理更新、画面绘制三部分。禁止引入任何第三方库。直接提供完整 HTML 结构内嵌脚本,复制后双击即可在本地浏览器预览。确保移动端触摸兼容。