发呆页面 canvas 随机连线 数字混沌艺术 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
kylebing
V2EX    分享创造

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

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

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

    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 一根
    typeaudit
        4
    typeaudit  
       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
    PRO
       2023-06-16 14:36:13 +08:00
    想起来了以前 Windows 95 时代的屏保。
    Livid
        8
    Livid  
    MOD
    PRO
       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     Solana     2684 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 26ms UTC 14:16 PVG 22:16 LAX 06:16 JFK 09:16
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86