论坛 › 音乐沙龙 › 《大海之声》（学习黑黑粒子波浪效果）

红影 发表于 2024-5-4 21:54

《大海之声》（学习黑黑粒子波浪效果）

<style>
        #papa { margin: 60px 0 20px calc(50% - 681px); width: 1200px; height: 680px; background: url('https://pic.imgdb.cn/item/6635dd1c0ea9cb1403539ca2.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; pointer-events: none; overflow: hidden; z-index: 1; position: relative; }
        #papa::after, #vid { position: absolute; left: calc(50% - 350px); top: -120px; width: 860px; height: 360px; border-radius: 50%; transform: rotate(-6deg); }
        #papa::after { content: ''; cursor: pointer; pointer-events: auto; box-shadow: 0 0 8px rgba(0, 0, 240, .1); }
        #canv { position: absolute; top: 80px; }
        #vid { object-fit: cover; mix-blend-mode: screen; opacity(.5); }
        #vid1 { position: absolute; left: 0; top: 0; width: 100%; height: 110%; transform: rotate(180deg); opacity(.15); object-fit: cover; mix-blend-mode: screen; }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=408532700" loop autoplay></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/53950850/04/18/11/6472d24fbf06c_10s_big.mp4" loop muted></video>
<video id="vid1" src="https://img.tukuppt.com/video_show/15653652/01/31/09/62d0ffb1878e6_10s_big.mp4" loop muted></video>
        <canvas id="canv" width="1200" height="680"></canvas>
</div>

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

for (var x = -800; x < 800; 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 = 20;
                        imageData.data = 180;
                        imageData.data = 255;
                        imageData.data = 245;
                }
                pixel.z -= 0.6;
                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(), vid1.pause()) : (vid.play(), vid1.play());

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

</script>

红影 发表于 2024-5-4 21:59

又是一个玄幻的效果，就想着朝着玄幻的意境去走了。
天空和视频效果和粒子波浪效果相关联。我们人类也是从海洋里进化出来的，那是亘古的话题。

原本的var x = -400; x < 400; x += 5峰值有点明显，这个帖子里有点对不上，直接在css理右移又让左边缺点，索性改成800，倒是不那么明显了。反正前面试验时都试过，做帖时正好用上，就不知道会不会又其他问题@马黑黑 {:4_173:}

马黑黑 发表于 2024-5-4 22:01

红影 发表于 2024-5-4 21:59
又是一个玄幻的效果，就想着朝着玄幻的意境去走了。
天空和视频效果和粒子波浪效果相关联。我们人类也是从 ...

这些都可以不断尝试的

红影 发表于 2024-5-4 22:04

其实这个帖子我也不知道想表达什么，只是沉醉于迷幻境界。这个曲子实际叫《Voice Of The Sea》不喜欢总是英文名字，就直接用汉语了。
这曲子的女声的哼唱就像凝望那一望无际超出我们想象的大海，深邃而神秘，纯净而威仪，犹如仰望星空，同样的迷幻而漫无边际。是来自灵魂深处的天籁，缥缈绵长，摄人心魄。。。

红影 发表于 2024-5-4 22:09

视频改成椭圆形的了，配合画面用，同时内容换做了倾泻感的，表达空间的相关联。
都是喜欢的粒子效果，只想做个帖子留存。然后自己先被这些效果迷住了{:4_173:}

小辣椒 发表于 2024-5-4 22:10

亲爱的，这个画面的效果感觉有黑黑二个教程吧，反正有时间就抄作业，今天先下了

小辣椒 发表于 2024-5-4 22:11

鲜花，掌声一起送上{:4_204:}{:4_199:}{:4_172:}

红影 发表于 2024-5-4 22:11

我们来自哪里，又将去往何处。如此短暂的人生，为什么要有战争和痛苦，超级生命一定在远处观看并嘲笑着我们

起个网名好难 发表于 2024-5-4 22:25

炫酷！

红影 发表于 2024-5-4 22:58

马黑黑 发表于 2024-5-4 22:01
这些都可以不断尝试的
是的，每变化点数值，效果就不一样了呢{:4_173:}

红影 发表于 2024-5-4 22:59

小辣椒 发表于 2024-5-4 22:10
亲爱的，这个画面的效果感觉有黑黑二个教程吧，反正有时间就抄作业，今天先下了

不是，就黑黑《永恒的瞬间》那个帖子套用的啊{:4_173:}

红影 发表于 2024-5-4 23:00

小辣椒 发表于 2024-5-4 22:11
鲜花，掌声一起送上

谢谢亲爱的{:4_179:}

红影 发表于 2024-5-4 23:00

起个网名好难 发表于 2024-5-4 22:25
炫酷！

谢谢难难鼓励{:4_187:}

马黑黑 发表于 2024-5-5 08:03

红影 发表于 2024-5-4 22:58
是的，没变化点数值，效果就不一样了呢

多做测试

小文 发表于 2024-5-5 09:07

有点害怕这种地方，太阴森了。不过，做得的确是很棒，应该喜欢。{:4_173:}

梦油 发表于 2024-5-5 09:22

哦！感觉好像进入了梦幻的世界。

红影 发表于 2024-5-5 10:43

马黑黑 发表于 2024-5-5 08:03
多做测试

嗯嗯，用测试的结果来匹配帖子想要的效果，也是挺好玩的过程{:4_187:}

马黑黑 发表于 2024-5-5 10:44

红影 发表于 2024-5-5 10:43
嗯嗯，用测试的结果来匹配帖子想要的效果，也是挺好玩的过程

{:4_190:}

红影 发表于 2024-5-5 10:45

小文 发表于 2024-5-5 09:07
有点害怕这种地方，太阴森了。不过，做得的确是很棒，应该喜欢。

这样的地方现实里没有，应该只有梦中的片段吧。试验和学习一下粒子波浪效果，希望没吓到小文{:4_173:}

红影 发表于 2024-5-5 10:45

梦油 发表于 2024-5-5 09:22
哦！感觉好像进入了梦幻的世界。

或者叫魔法世界{:4_173:}

查看完整版本: 《大海之声》（学习黑黑粒子波浪效果）