绿叶清舟 发表于 2024-5-7 20:22

Earth Spirit - Karunesh


<style>
    #papa { margin: 20px 0 20px calc(50% - 693px); width: 1200px; height: 700px; background: url('https://p.upyun.com/demo/tmp/5TD8f3hP.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; pointer-events: none; position: relative; }
    #papa::after, #vid { position: absolute; left: calc(50% - 125px); top: 285px; width: 200px; height: 200px; border-radius: 0 40%; transform: rotate(45deg); }
    #papa::after { content: ''; cursor: pointer; pointer-events: auto; box-shadow: 0 0 8px rgba(255, 255, 255, .2); }
    #canv { position: absolute; top: 255px;}
    #vid { object-fit: cover; mix-blend-mode: luminosity; filter: hue-rotate(300deg) opacity(.5); top: 285px; }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=408532724" loop autoplay></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/83/5b4abcfb3acff.mp4" loop muted></video>
    <canvas id="canv" width="1200" height="500"></canvas>
</div>

<script>
var ctx = canv.getContext('2d', {willReadFrequently: true});
var ww = canv.width, hh = canv.height, pixels = [];

for (var x = -400; x < 400; x += 5) {
    for (var z = -250; z < 250; z += 5) {
      pixels.push({ x: x, y: 100, z: z });
    }
}

let render = (ts) => {
    var imageData = ctx.getImageData(0, 0, ww, hh), len = pixels.length, fov = 250;
    var pixel, scale, x2d, y2d, c;
    for (var i = 0; i < len; i++) {
      pixel = pixels[ i ];
      scale = fov / (fov + pixel.z);
      x2d = pixel.x * scale + ww / 2;
      y2d = pixel.y * scale + hh / 2;
      if (x2d >= 0 && x2d <= ww && y2d >= 0 && y2d <= hh) {
            c = (Math.round(y2d) * imageData.width + Math.round(x2d)) * 4;
            imageData.data = 700;
            imageData.data = 200;
            imageData.data = 200;
            imageData.data = 255;
      }
      pixel.z -= 0.4;
      pixel.y = hh / 14 + Math.sin(i / len * 15 + (ts / 450)) * 10;
      if (pixel.z < -fov) pixel.z += 2 * fov;
    }
    ctx.putImageData(imageData, 0, 0);
};

(function drawFrame(ts) {
    requestAnimationFrame(drawFrame);
    if(!aud.paused) {
      ctx.clearRect(0, 0, ww, hh);
      render(ts);
    }
})();

aud.onplaying = aud.onpause = () => aud.paused ? vid.pause() : vid.play();
papa.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

愤怒的葡萄 发表于 2024-5-7 20:25

进来欣赏一下。

樵歌 发表于 2024-5-7 20:50

玄幻的画面，域外文明的感觉。想象奇特，实在厉害！

绿叶清舟 发表于 2024-5-7 21:07

愤怒的葡萄 发表于 2024-5-7 20:25
进来欣赏一下。

谢谢葡萄，晚上好

小辣椒 发表于 2024-5-7 21:07

清舟这粒子颜色配了背景颜色漂亮{:4_178:}

绿叶清舟 发表于 2024-5-7 21:07

樵歌 发表于 2024-5-7 20:50
玄幻的画面，域外文明的感觉。想象奇特，实在厉害！

没准俺就是外星来的呢{:4_189:}

小辣椒 发表于 2024-5-7 21:08

欣赏清舟的异域风情，背景图图配的好{:4_199:}

绿叶清舟 发表于 2024-5-7 21:12

小辣椒 发表于 2024-5-7 21:07
清舟这粒子颜色配了背景颜色漂亮

辣椒上来了啊，晚上好

愤怒的葡萄 发表于 2024-5-7 21:16

绿叶清舟 发表于 2024-5-7 21:07
没准俺就是外星来的呢

我相信宇宙中不只有人类是智慧生命，有可能TA们都隐藏起来了，宇宙太浩瀚了。

愤怒的葡萄 发表于 2024-5-7 21:16

小辣椒 发表于 2024-5-7 21:08
欣赏清舟的异域风情，背景图图配的好

小辣椒也来了啊。

小辣椒 发表于 2024-5-7 22:41

愤怒的葡萄 发表于 2024-5-7 21:16
小辣椒也来了啊。

葡萄晚上好，小辣椒上来比较迟

小辣椒 发表于 2024-5-7 22:42

绿叶清舟 发表于 2024-5-7 21:12
辣椒上来了啊，晚上好

清舟，上来迟了，看了一下就快10点了

红影 发表于 2024-5-7 23:47

这颜色调配得特别好，看着很惊艳。欣赏清舟好帖{:4_199:}

樵歌 发表于 2024-5-8 20:14

绿叶清舟 发表于 2024-5-7 21:07
没准俺就是外星来的呢

八九不离十吧{:4_172:}

绿叶清舟 发表于 2024-5-10 20:18

愤怒的葡萄 发表于 2024-5-7 21:16
我相信宇宙中不只有人类是智慧生命，有可能TA们都隐藏起来了，宇宙太浩瀚了。

感觉宇宙中人类应该不是最智慧的

绿叶清舟 发表于 2024-5-10 20:18

樵歌 发表于 2024-5-8 20:14
八九不离十吧

真的啊，不知道是火星还是金星呢

绿叶清舟 发表于 2024-5-10 20:19

红影 发表于 2024-5-7 23:47
这颜色调配得特别好，看着很惊艳。欣赏清舟好帖

谢谢影，晚上好啊

绿叶清舟 发表于 2024-5-10 20:19

小辣椒 发表于 2024-5-7 22:42
清舟，上来迟了，看了一下就快10点了

发现现在这时间过得太快了，一晃一天就过了

愤怒的葡萄 发表于 2024-5-10 20:47

绿叶清舟 发表于 2024-5-10 20:18
感觉宇宙中人类应该不是最智慧的

宇宙最起码已经一百三十七亿年的历史了，只不过宇宙实在是太浩瀚了，文明之间的距离太远了，而且高等文明有可能隐藏自己的。

绿叶清舟 发表于 2024-5-10 21:14

愤怒的葡萄 发表于 2024-5-10 20:47
宇宙最起码已经一百三十七亿年的历史了，只不过宇宙实在是太浩瀚了，文明之间的距离太远了，而且高等文明 ...

怕被低等文明消蚀了？
页: [1] 2
查看完整版本: Earth Spirit - Karunesh