• Buktal
    用纯原生 HTML5 Canvas 写一个零依赖单文件交互作品《候鸟 · MIGRATION》:
    一群纸质感几何候鸟沿一条无限延伸的迁徙航线飞行,世界、镜头、音乐、诗句
    全部程序化生成,永不循环重复。
    
    【世界:风格是地理属性】
    
    俯瞰大地程序化无限生成:田块网格、双正弦蜿蜒河流、欧洲老城临河联排屋
    (共用山墙、高低错落、偶发教堂尖塔)、后排散屋、烟囱、树木
    5 种场景风格 = 5 段地理气候,沿飞行方向分段轮换(每段约 8600 世界单位):
    暖纸 WARM / 雾境 MIST / 暮粉 DUSK / 雪境 SNOW / 夜航 NIGHT
    风格锋面参差不齐、带长过渡带:地面、天空、雾、粒子、鸟的配色
    全部在两种风格间连续插值,绝不硬切
    风格细节:雪境针叶树+屋脊积雪;夜航窗户亮灯、星星浮现、河面反光熄灭;
    晨昏锋面处地平线出现太阳光晕和地面光池(不画太阳圆盘)
    粒子随风格换型:尘絮 / 雪花(最多约240颗)/ 花瓣 / 萤火,参与深度排序
    【鸟群:30 只独立弹簧(触屏 22 只)】
    
    金角螺旋铺满椭圆盘 + 分层高度;每只鸟独立刚度、独立相位、
    胆量按幂律分布(少数头鸟敢冲很远)
    几何纸鸟造型:鸟头、龙骨、双翼、尾,三角面拼成,带地面投影
    Boids 分离力(平方衰减+力上限+速度阻尼,滑开而不是弹开)
    左侧 60% 屏幕软引力边界:越靠边推动衰减越强,每只鸟边界呼吸相位不同
    鸟色随场景冷暖偏移 10-20%(保持纸白主调,夜航转月光蓝灰),
    过渡带内每只鸟按自身位置采样,群体可同时带两端色
    【镜头:无剪辑的自动运镜系统】
    
    16 个命名镜位库(正俯视、俯冲、贴河掠水、沿河前推、侧向轨道、
    低空宽景、环绕、拉远揭示、正背面、迎面、高空漂移……)
    每圈约 96 秒,每镜 16-19 秒,段内前半保持、后半平滑滑向下一镜,
    全程连续无切换;跨圈无缝衔接
    每圈按规则重排变奏:骨架固定(俯视→下降→中景→压轴→回升),
    高圈/低圈交替,压轴背面/迎面隔圈轮换,相邻镜偏航差≥30°防跳剪,
    距离近/中/远三档随机抽卡;左上角实时显示镜位名与变奏号(如 VAR 02)
    自动/自主镜头切换:自主模式下拖拽转镜头(俯仰+偏航)、滚轮或双指捏合真缩放
    每圈按规则重排变奏:骨架固定(俯视→下降→中景→压轴→回升),
    高圈/低圈交替,压轴背面/迎面隔圈轮换,相邻镜偏航差≥30°防跳剪,
    距离近/中/远三档随机抽卡;左上角实时显示镜位名与变奏号(如 VAR 02)
    自动/自主镜头切换:自主模式下拖拽转镜头(俯仰+偏航)、滚轮或双指捏合真缩放
    【交互:鼠标 = 风】
    
    全程连续无切换;跨圈无缝衔接
    每圈按规则重排变奏:骨架固定(俯视→下降→中景→压轴→回升),
    高圈/低圈交替,压轴背面/迎面隔圈轮换,相邻镜偏航差≥30°防跳剪,
    距离近/中/远三档随机抽卡;左上角实时显示镜位名与变奏号(如 VAR 02)
    自动/自主镜头切换:自主模式下拖拽转镜头(俯仰+偏航)、滚轮或双指捏合真缩放
    【交互:鼠标 = 风】
    
    光标偏移引航鸟群(越靠屏幕边缘漂移越快),带微抖死区;
    光标越快响应越缓(反向 1€ 滤波),松手后风势缓缓消散、纸飞机自己滑回航线
    自动模式下滚轮 = 轻微观察偏移(拉远/抬高),停手 2 秒缓慢回归
    手机:触摸即风眼;竖拿时整页 CSS 旋转 90° 强制横向体验;按 DPR 渲染防糊
    【声音】
    
    两首内嵌 base64 配乐交替循环(曲间停 2.4 秒),开场 5 秒淡入
    WebAudio 程序化环境声三层:风(低通噪声+LFO 起伏)、
    河水(窄带噪声,镜头低且贴近河道才浮现)、纸翼簌簌(高频,贴近才可闻)
    音乐开关按钮
    【诗句层】
    
    13 段候鸟主题短诗随旅程轮播,逐字淡入 + 一条横线展开;
    白天墨色、夜航转白,颜色随世界换装渐变;可开关
    【开场与 UI】
    
    「开始迁徙 →」按钮:请求全屏 + 锁横屏 + 防息屏
    开局场景选择(暖纸/暮粉/夜航/雾/雪)= 选择起飞地点,之后仍沿同一航线飞
    米纸底色 #f6f2e9、墨字 #3a362c,UI 墨色随场景自动变色
    大屏适配:≥2200px UI 文字约 1.5 倍,≥3200px 约 2 倍;小屏不变。
    主楼
  • WolfHolo

    图片

    用web端的6-pro尝试中

    #1
  • WolfHolo

    图片

    刚刚发现你这代码块还藏了点话 ^-^

    #2
  • Uniseem

    在跑了,codex 使用 astra xhigh,网页端使用 5.6 pro,家宽环境

    #3
  • 还是不懂

    我也来蹲一个结果!

    羡慕你们有额度的! 现在根本不够瞪啊 ^-^ (百分之一周限苦苦支撑

    #4
  • Huaaa

    重置卡到账了,先看看啥效果,观望一下

    #5
  • WolfHolo

    MIGRATION.html.txt (1.2 MB)

    来了

    #6
  • 大傻

    migration.zip (851.6 KB)

    图片

    #7
  • AndyYan123

    想知道现在 plus 上 gpt6 了吗?我这边 app 和网页都没有,codex 上了吗

    #8
  • 新

    migration.html.txt (1.3 MB)

    拿网页pro跑的 ^-^

    #9
  • Uniseem

    Astra xhigh:

    migration.htm.txt (759.5 KB)

    5.6 pro 网页版:

    MIGRATION_canvas_single_file(1).html.txt (2.6 MB)

    网页版完胜

    #10

发表回复

登录后回复