【黑师代码】听梦（学习黑师20240428《永恒的瞬间》波浪粒子效果）
<style>
#papa { margin: 20px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/za/%E5%B0%8F%E8%BE%A3%E6%A4%92.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden;pointer-events: none; position: relative; }
#papa::after, #vid { position: absolute; right: 230px; top: 325px; width: 620px; height:620px; 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; transform: rotate(135deg);}
#vid { object-fit: cover; mix-blend-mode: screen; filter: hue-rotate(270deg) opacity(.6); }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=17961727" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/01/39/5b4221b08c311.mp4" loop muted></video>
<canvas id="canv" width="1700" height="1300" ></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 = 20;
imageData.data = 200;
imageData.data = 200;
imageData.data = 245;
}
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>
@马黑黑 这个波浪粒子代码效果很是喜欢~~感谢老师妙手帮忙改贴。。{:4_191:} 美得醉人了{:4_199:} 这样设计太美了，视频也用得好 欣赏月月的精彩制作{:4_171:} 这个粒子效果有了斜的度数感觉效果更加完美了 月月会动脑子，出来的效果就不一样啊{:4_199:} 南无月 发表于 2024-5-7 20:28
@马黑黑 这个波浪粒子代码效果很是喜欢~~感谢老师妙手帮忙改贴。。
{:4_191:} 这粒子波浪还能改方向的啊，这太奇特了。而且视频选得也好，和粒子波浪完美匹配，这个帖子太美了{:4_199:} 月儿厉害{:4_199:} 红影 发表于 2024-5-7 23:50
月儿厉害
影子鼓励一直都在，很赞。真
{:4_170:} 红影 发表于 2024-5-7 23:50
这粒子波浪还能改方向的啊，这太奇特了。而且视频选得也好，和粒子波浪完美匹配，这个帖子太美了
影子应该是一眼看出来画布加个角度就行了。{:4_199:}
视频也找了一会，才找到比较合适的。
熊猫内容还是挺多的。 马黑黑 发表于 2024-5-7 21:21
喝一杯睡得香。{:4_170:}{:4_191:} 樵歌 发表于 2024-5-7 20:55
美得醉人了
感谢樵管支持{:4_190:} 绿叶清舟 发表于 2024-5-7 20:55
这样设计太美了，视频也用得好
试着试着就成这样了。。{:4_187:}
不会设计。。 小辣椒 发表于 2024-5-7 21:03
欣赏月月的精彩制作
谢谢小辣椒的支持哦。。{:4_204:} 小辣椒 发表于 2024-5-7 21:04
这个粒子效果有了斜的度数感觉效果更加完美了
没加度数的时候，人有一半在粒子里，调整后觉得比较协调{:4_170:} 小辣椒 发表于 2024-5-7 21:05
月月会动脑子，出来的效果就不一样啊
{:4_170:}小辣椒你的鼓励真是给力。。 南无月 发表于 2024-5-8 22:53
喝一杯睡得香。
但愿如此 马黑黑 发表于 2024-5-8 22:56
但愿如此
美好原望即将实现{:4_170:}