<body>
<canvas></canvas>
<svg>
<defs>
<filter id="gooey">
<feGaussianBlur stdDeviation="40" in="sourceGraphic" result="blur1" />
<feColorMatrix
in="blur1"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -23"
/>
</filter>
</defs>
</svg>
<script type="module" src="./index.js"></script>
</body>위처럼 gooey 이펙트를 줄 때 blur 등 값을 얼마나 줘야 하는지 바로바로 테스트 해보고 싶을때는 dat.GUI를 이용하면 된다.
https://cdnjs.com/libraries/dat-gui
이곳에서 script를 복사해 넣어주면 끝!
js파일에서 새로운 인스턴스로 선언만 해주면 되는데,
value값으로 파라미터를 받아서 바꿔주는 형식으로 하고싶어 아래처럼 코드를 짰다
const feGaussianBlur = document.querySelector("feGaussianBlur");
// queryselector로 변수에 할당
const controls = new function () {
this.blurValue = 40;
this.alphaChennel = 100;
this.alphaOffset = -23;
};
// default값으로 html과 같이 설정을 해주고
let gui = new dat.GUI();
// 선언을 해주고 새로고침을 하게 되면 오른쪽 상단에 open Controls 라는 버튼이 생기게 된다
gui.add(controls, "blurValue", 0, 100).onChange((value) => {
feGaussianBlur.setAttribute("stdDeviation", value);
});
// blur값을 설정해줌으로써 open liveserver로 열고 바로바로 테스트 할 수 있게 된다.dat.gui로 gooey에 해당하는 값을 조절 했다고 하면 속도 같은것들을 다른 폴더에서 가독성있게 조절하고 싶다한다면
let gui = new dat.GUI();
const f1 = gui.addFolder("gooey Effect");
// folder 생성
f1.add(controls, "blurValue", 0, 100).onChange((value) => {
feGaussianBlur.setAttribute("stdDeviation", value);
});
f1.add(controls, "alphaChennel", 1, 100).onChange((value) => {
feColorMatrix.setAttribute(
"values",
`1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 ${value} ${controls.alphaOffset}`
);
});
f1.add(controls, "alphaOffset", -40, 40).onChange((value) => {
feColorMatrix.setAttribute(
"values",
`1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 ${controls.alphaChennel} ${value}`
);
});
const f2 = gui.addFolder("particle Property");
// folder 생성
f2.open(); // 열린채로 실행
f2.add(controls, "acc", 1, 1.5, 0.01).onChange((value) => {
particles.forEach((particle) => (particle.acc = value));
});
