鹈鹕骑车

Prompt

# Role & Objective 你是一名享誉国际的 Creative Technologist、WebGL/Canvas 动效专家与高级前端艺术家。 你的目标是交付一个独立、完整、令人惊艳的单文件前端交互程序（单个 HTML 页面，内联 CSS 与 JS），主题为“一只鹈鹕在骑自行车（Pelican Riding a Bicycle）”。 该作品将用于参与顶级数字创意前端评审，必须具备极高的艺术审美、数学驱动的物理骨骼联动、细腻的环境视差以及高阶交互。 --- ## 1. 艺术风格与视觉叙事 (Visual & Art Direction) * **视觉美学**：采用“复古绘本混搭蒸汽朋克（Whimsical Vintage-Storybook / Cyber-Pastel）”风格。拒绝粗糙色块，采用细腻的矢量渐变、柔和光影阴影与微噪点质感。 * **主角设计（鹈鹕）**： * 头戴复古飞行员护目镜（镜片有环境反光）或英伦报童帽，系着一条随风飘动的丝巾。 * 夸张的下喙喉囊（Pouch）：半透明果冻胶质感，里面隐约可见一条随骑行动态颠簸晃动的发光小金鱼。 * 翅膀自然搭在车把手上，脚掌是细腻的蹼足，牢牢扣在脚踏板上。 * **载具（自行车）**： * 精致的英式复古巡洋舰自行车（或古典高轮车 Penny-Farthing），包含金属光泽车架、黄铜车铃、弹簧皮质坐垫、旋转链条与高频转动的辐条。 * **环境舞台（Parallax World）**： * 采用至少 4 层视差滚动的梦幻背景：远景渐变天际线与动态星月/太阳、中景低多边形浮动云彩或海港灯塔剪影、近景带有里程标的无尽路面与扬尘粒子。 --- ## 2. 机械动力学与骨骼联动 (Kinematics & Physics Motion) 必须使用纯数学函数（Trigonometric Functions & Kinematics）驱动骨骼关节，坚决杜绝生硬的 CSS 定位位移： 1. **踏板曲柄联动（Crank-Pedal System）**： * 设定全局角速度 `angle`，曲柄以 `(cos(angle), sin(angle))` 旋转，左右脚踏板呈 180° 相位差。 2. **腿部反向动力学（Pelican Leg IK/Rigging）**： * 蹼足精确锁死在踏板旋转轨迹上；基于髋关节（坐垫位置）与踏板坐标，通过两段关节几何算法实时解算大腿、小腿的屈伸与膝关节摆动。 3. **躯干与细节二次震颤（Secondary Motion）**： * 坐垫受重力与弹簧阻尼影响产生微小的上下颠簸（Damping Spring）。 * 鹈鹕的喉囊基于加速度产生滞后的惯性摆动（Jiggle Physics）。 * 围巾末端使用正弦波叠加噪声模拟气流迎风卷动。 * 车轮高速旋转时产生运动模糊辐条特效。 --- ## 3. 互动设计与听觉反馈 (Interactivity & Sound) * **动态调速**： * 支持键盘 `ArrowUp` / `ArrowDown` 或鼠标滚轮加速/减速。速度加快时，鹈鹕身体前倾、围巾摆动频率暴增、背景视差速度线性提升，路面摩擦产生粒子火星。 * **物理颠簸**： * 按空格键 `Space` 让自行车原地轻盈起跳（Jump），落地时产生悬挂回弹挤压动效（Squash and Stretch）。 * **车铃与声音合成（Web Audio API）**： * 点击车铃或按 `B` 键，车铃弹簧晃动，同时使用纯代码原生的 Web Audio API（无需外部音频文件）实时合成清脆悦耳的双音黄铜铃声（Brass Bell Synth）。 * **昼夜/氛围切换**： * 页面右上角提供极具质感的复古拨杆开关，支持一键切换“暖阳落日漫游”与“霓虹赛博夜骑”两种完整色板系统。 --- ## 4. 技术实现要求 (Technical Specifications) 1. **单一文件交付**：所有 HTML、CSS、JavaScript 必须完整合并在同一个 `index.html` 中，开箱即用，无任何外部构建依赖。 2. **渲染架构**： * 核心动画优先采用高性能 **HTML5 Canvas 2D API** 或精致编排的 **SVG + GSAP (如需引用，请使用官方公共 CDN)**，确保 60FPS 满帧流畅度。 3. **响应式自适应**： * Canvas/视口必须自适应窗口大小（Resize Observer），在各种分辨率下保持居中与高清比例（支持 `window.devicePixelRatio` 视网膜渲染）。 4. **代码纯度与质量**： * 模块化代码结构，包含清晰的状态机：物理引擎更新循环 (`update`)、图层渲染分发 (`draw`)、输入捕获控制器 (`input`)。 * 拒绝一切占位符注释（严禁出现 `// TODO: implement logic here`），必须输出 100% 完整运行的代码。 请直接生成完整的、生产级别的可执行代码。 先前已经让你生成过一次，都无法直接运行。这次仔细分析思考并生成，要能直接运行的那种；此外，还需要考虑到色彩管理，生成出来的内容要符合人类的视觉审美，尽量避免使用模糊色彩进行搭配

A system prompt was added to support web rendering