svg+js实现粒子水母动画效果代码-html代码-BFW代码库

svg+js实现粒子水母动画效果代码

代码语言：html

所属分类：粒子

代码描述：svg+js实现粒子水母动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lora', serif;
}

:root {
    --sky-blue: #0e85b5;
    --dark: #181818;
}

body {
    display: grid;
    font-family: 'Silkscreen', sans-serif;
    color: white;
    background: var(--dark);
    justify-items: center;
    user-select: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

svg {
    justify-self: stretch;
    align-self: stretch;
    background: #181818;
}

.free {
    display: none;
    visibility: hidden;
}
</style>




</head>

<body >
  <svg id="image" viewBox="-0.5 -0.5 1 1">
    <circle class="point" r="5" stroke="aqua" stroke-width="0.005" fill="#181818" />
    <rect fill="none" stroke="#555" stroke-width="0.001" x="-0.3" y="-0.3" width="0.6" height="0.6" />
</svg>

  
      <script type="module">
// Oscar Saharoy 2023


// ======================== math


export const range = (n) =>
Object.keys(Array(n).fill(0)).map(parseFloat);

export function sum(arr) {
  return arr.reduce((acc, val) => acc + val, 0);
}


export const rotateX = (theta) =>
[[1, 0, 0],
[0, Math.cos(theta), -Math.sin(theta)],
[0, Math.sin(theta), Math.cos(theta)]];

export const rotateY = (theta) =>
[[Math.cos(theta), 0, Math.sin(theta)],
[0, 1, 0],
[-Math.sin(theta), 0, Math.cos(theta)]];

export const rotateZ = (theta) =>
[[Math.cos(theta), -Math.sin(theta), 0],
[Math.sin(theta), Math.cos(theta), 0],
[0, 0, 1]];

export const rotate2D = (theta) =>
[[Math.cos(theta), -Math.sin(theta)],
[Math.sin(theta), Math.cos(theta)]];


export const identity = (rows) =>
range(rows).map(x => range(rows).map(y => x == y ? 1 : 0));

export const vec0 = (rows) =>
Array(rows).fill(0);

export const scaleVec = (vec, f) =>
vec.map(x => x * f);

export const addVec = (vecA, vecB) =>
vecA.map((_, i) => vecA[i] + vecB[i]);

export const subVec = (vecA, vecB) =>
vecA.map((_, i) => vecA[i] - vecB[i]);

export const scaleMat = (mat, f) =>
mat.map(row => scaleVec(row, f));

export const dot = (vecA, vecB) =>
vecA.reduce((sum, _, i) => sum + vecA[i] * vecB[i], 0);

export const cross = (vecA, vecB) =>
[
vecA[1] * vecB[2] - vecA[2] * vecB[1],
vecA[2] * vecB[0] - vecA[0] * vecB[2],
vecA[0] * vecB[1] - vecA[1] * vecB[0]];


export const meanVec = (vecs) =>
scaleVec(
vecs.reduce((acc, vec) =>
addVec(acc, vec), vec0(vecs[0].length)),
1 / vecs.length);


export const length2 = (vec) =>
vec.reduce((acc, val) => acc + val * val, 0);

export const length = (vec) =>
Math.sqrt(length2(vec));

export const arg = (vec) =>
Math.atan2(vec[1], vec[0]);

export const normalise = (vec) =>
sca.........完整代码请登录后点击上方下载按钮下载查看