V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
kylebing
V2EX  ›  分享创造

发呆页面 canvas 随机连线 数字混沌艺术

  •  1
     
  •   kylebing ·
    KyleBing · 2023-06-16 11:14:28 +08:00 · 4985 次点击
    这是一个创建于 525 天前的主题,其中的信息可能已经有所发展或是发生改变。

    闲着弄了个发呆页面:从屏幕中随机取点,连线。

    https://kylebing.cn/test/animate-canvas-lost

    参数说明

    • @param title string 自定义点位的标题,默认为屏幕坐标值
    • @param titleFontSize number 标题文字大小
    • @param isShowLine number 1 画线 0 不画线
    • @param isShowTitle number 1 显示标题 0 不显示标题
    • @param lineWidth number 线条宽度 默认:2
    • @param bgColor string 背景颜色 RGB 等颜色格式均可

    这些参数都可以直接在浏览器地址栏的参数中使用

    以下是一些例子

    https://kylebing.cn/test/animate-canvas-lost/?isShowLine=1&titleFontSize=50&lineWidth=10&isShowTitle=0

    download (1)

    千千万万个我 https://kylebing.cn/test/animate-canvas-lost/?isShowLine=0&titleFontSize=50&lineWidth=10&isShowTitle=1&bgColor=black&title=%E6%88%91

    image

    https://kylebing.cn/test/animate-canvas-lost/

    download (2)

    第 3 条附言  ·  2023-06-16 17:14:53 +08:00
    第 4 条附言  ·  2023-06-16 18:13:50 +08:00
    https://kylebing.cn/test/animate-canvas-lost/?isShowLine=1&titleFontSize=50&lineWidth=25&isShowTitle=0

    近视的打开这个,把屏幕全屏,然后把眼镜摘下来盯着看,挺有意思的
    44 条回复    2023-06-20 17:13:13 +08:00
    vitovan
        1
    vitovan  
       2023-06-16 13:09:08 +08:00
    非常好,应该加个背景音乐。
    vitovan
        2
    vitovan  
       2023-06-16 13:31:54 +08:00
    给你做了个极其智障的背景音乐:

    https://transfer.sh/ef4hhpvVfb/jatahohey.wav
    goodryb
        3
    goodryb  
       2023-06-16 14:18:47 +08:00
    太快了反而显得有点杂乱

    或者可以把速度降低的很慢,5s 一根
    FreeEx
        4
    FreeEx  
       2023-06-16 14:31:57 +08:00
    很有创意
    ql562482472
        5
    ql562482472  
       2023-06-16 14:33:21 +08:00
    好 真不错
    ql562482472
        6
    ql562482472  
       2023-06-16 14:33:53 +08:00
    @vitovan #2 这音乐也不错 好
    Livid
        7
    Livid  
    MOD
       2023-06-16 14:36:13 +08:00
    想起来了以前 Windows 95 时代的屏保。
    Livid
        8
    Livid  
    MOD
       2023-06-16 14:38:26 +08:00
    换成 emoji 的效果,然后全屏,真的可以当屏保用了:

    kylebing
        9
    kylebing  
    OP
       2023-06-16 14:48:27 +08:00
    @Livid #8 我是放笑脸😆,你这放粑粑就有点过分了,把字体放大点会更好。
    Martens
        10
    Martens  
       2023-06-16 15:07:20 +08:00
    反馈一个问题,mac 系统上浏览器全屏时,鼠标移动到最上面显示系统状态栏会重新画
    kile
        11
    kile  
       2023-06-16 15:23:57 +08:00
    太快了,建议能配置时间
    kylebing
        12
    kylebing  
    OP
       2023-06-16 15:24:05 +08:00
    @Martens #10 应该是触发了屏幕尺寸变化的事件了。我是听的那个事件。
    registerrr
        13
    registerrr  
       2023-06-16 15:30:12 +08:00   ❤️ 1
    本来想说可以再进一步延伸延伸, 看似散乱的线最后能生成一个画像的轮廓, 搜了下居然真的有人已经做过了
    https://halfmonty.github.io/StringArtGenerator/
    uiosun
        14
    uiosun  
       2023-06-16 15:30:33 +08:00
    Cool!
    zhumengyang
        15
    zhumengyang  
       2023-06-16 15:41:41 +08:00
    nb
    Akitora
        16
    Akitora  
       2023-06-16 15:57:14 +08:00
    如果能接入 twitter stream api 的话,可以打印来自世界各地的实时推文,那样感觉还挺有意思的

    可惜马应龙把这功能收费了
    hu1e
        17
    hu1e  
       2023-06-16 16:13:55 +08:00
    挺有意思的,不过打开页面放几个小时我 cpu 是不是会炸
    296727
        18
    296727  
       2023-06-16 16:19:23 +08:00
    写的很好,但是已经被我 down 到本地,魔改了
    296727
        19
    296727  
       2023-06-16 16:20:32 +08:00
    @hu1e 按照道理来说应该不会,相当于一直在 windows 画板上画画
    dj721xHiAvbL11n0
        20
    dj721xHiAvbL11n0  
       2023-06-16 16:25:51 +08:00
    我眼睛瞎了,快赔钱
    hu1e
        21
    hu1e  
       2023-06-16 16:26:29 +08:00
    @296727 后面肯定会炸的,每一帧都是实时渲染的,而且不停歇
    hu1e
        22
    hu1e  
       2023-06-16 16:29:50 +08:00
    @296727 如果每隔一段时间生成当前画面的快照,后面直接通过 drawImage 之前的图片,那样应该就还行
    tyrone2333
        23
    tyrone2333  
       2023-06-16 16:53:11 +08:00
    一直渲染会内存溢出吗
    kylebing
        24
    kylebing  
    OP
       2023-06-16 16:56:43 +08:00
    @tyrone2333 #23 不会,没有内存占用,就是在一张 canvas 上一直画,画面也没有切换。
    kylebing
        25
    kylebing  
    OP
       2023-06-16 17:01:37 +08:00
    @registerrr #13 好东西
    kylebing
        26
    kylebing  
    OP
       2023-06-16 17:02:34 +08:00
    @hu1e #17 不会,没有内存占用,就是在一张 canvas 上一直画,画面也没有切换。
    leadfast
        27
    leadfast  
       2023-06-16 17:11:02 +08:00
    送你个 star
    joyce95
        28
    joyce95  
       2023-06-16 17:19:19 +08:00
    这好像是我从小就会做的一个噩梦。有一些几何的东西在空间里无限膨胀,但是无能为力。
    liu10240
        29
    liu10240  
       2023-06-16 17:35:27 +08:00
    挺好玩的
    wann
        30
    wann  
       2023-06-16 17:44:46 +08:00
    有意思的,但是作为一个干眼症患者,你不如让我去死,闪瞎我拉!
    lilei2023
        31
    lilei2023  
       2023-06-16 17:57:24 +08:00
    看的我头晕目眩的!
    LeeReamond
        32
    LeeReamond  
       2023-06-16 17:58:02 +08:00
    老哥,建议专门面向屏保设计一个,就比较有实用性了。图案针对屏保专门优化一下,然后优化性能,加一行代码点进去以后自动全屏之类的。
    kokdemo
        33
    kokdemo  
       2023-06-16 18:10:21 +08:00
    挺有意思的,好玩
    cooper2020
        34
    cooper2020  
       2023-06-16 18:42:28 +08:00
    有趣的页面
    w88975
        35
    w88975  
       2023-06-16 21:36:54 +08:00
    @hu1e canvas 如果不去管理虚拟 node 的话,本身就是每次覆盖上一次的绘制,所以不存在内存 CPU 要炸的情况
    shui14
        36
    shui14  
       2023-06-16 22:04:50 +08:00
    以前做过抽取 bing n 张壁纸做特征分组,然后按照 emoji 给人群分组,同一个 group 可以按 j ,玩过 cs 的应该知道按 j 是什么
    因为拓扑组是动态的,所以上一轮你嘲讽别人下一轮也被嘲讽
    XieBoCai
        37
    XieBoCai  
       2023-06-16 22:13:32 +08:00
    做成屏保就牛逼了,是不是可以让文字随机旋转一定角度?
    codehz
        38
    codehz  
       2023-06-16 23:56:46 +08:00
    能不能考虑增加个不同色彩模型的随机颜色(比如 HSV 里固定明度,改色相和饱和度
    chaoschick
        39
    chaoschick  
       2023-06-17 07:23:57 +08:00 via Android
    https://alcyonides.gitee.io/blog/mic-anims 可以根据声音的频率脉动
    QingquanBaby
        40
    QingquanBaby  
       2023-06-17 12:52:22 +08:00 via Android
    @chaoschick 小孩喜欢这个,突然想起来了那种老式的长方条,声音大了变高
    dioxide
        41
    dioxide  
       2023-06-17 17:03:25 +08:00
    有意思, 如果能加入系统的音频信号作为输入源,实现可视化. 就更 cool 了
    dioxide
        42
    dioxide  
       2023-06-17 17:05:21 +08:00
    建议, 加入和鼠标的互动, 更有可玩性
    maxssy
        43
    maxssy  
       2023-06-20 14:07:27 +08:00
    请问附言是怎么发的? 为啥我创建的主题没找到哪里能发附言吖?
    kylebing
        44
    kylebing  
    OP
       2023-06-20 17:13:13 +08:00
    @maxssy #43 一段时间之后才能附言,刚开始是可以直接修改的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1022 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:24 · PVG 03:24 · LAX 11:24 · JFK 14:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.