爱意满满的作品展示区。
kylebing

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

  •  1
     
  •   kylebing ·
    KyleBing · Jun 16, 2023 · 6919 views
    This topic created in 1237 days ago, the information mentioned may be changed or developed.

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

    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)

    Supplement 4  ·  Jun 16, 2023
    https://kylebing.cn/test/animate-canvas-lost/?isShowLine=1&titleFontSize=50&lineWidth=25&isShowTitle=0

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

    https://transfer.sh/ef4hhpvVfb/jatahohey.wav
    goodryb
    goodryb
    Jun 16, 2023
    3
    太快了反而显得有点杂乱

    或者可以把速度降低的很慢,5s 一根
    dushixiang
    dushixiang
    Jun 16, 2023
    4
    很有创意
    ql562482472
    ql562482472
    Jun 16, 2023
    5
    好 真不错
    ql562482472
    ql562482472
    Jun 16, 2023
    6
    @vitovan #2 这音乐也不错 好
    Livid
    Livid
    MOD
    PRO
    Jun 16, 2023
    7
    想起来了以前 Windows 95 时代的屏保。
    Livid
    Livid
    MOD
    PRO
    Jun 16, 2023
    8
    换成 emoji 的效果,然后全屏,真的可以当屏保用了:

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

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