Emi
/
alchemi.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get more performance by doing the gaussian blur at a smaller scale

This commit is contained in:
Emi Simpson 2023-10-28 13:34:23 -04:00
parent 47bfdac6c1
commit bfb1c59303
Signed by: Emi
GPG Key ID: A12F2C2FFDC3D847
2 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
drift.js
View File

@ -54,10 +54,10 @@ const applyState = states => states.map(s => {
loop = (state) => {
setInterval(() => {
const goopZoneWidth = goopZoneElem.width.baseVal.value;
const goopZoneHeight = goopZoneElem.height.baseVal.value;
const goopZoneWidth = goopZoneElem.width.baseVal.value/2;
const goopZoneHeight = goopZoneElem.height.baseVal.value/2;
goopHeader.setAttribute("x", goopZoneWidth/2-300);
goopHeader.setAttribute("x", (goopZoneWidth - 300)/2);
state = nextState(state, goopZoneWidth, goopZoneHeight);
applyState(state)
@ -65,4 +65,4 @@ loop = (state) => {
}
const drifters = Array.from(document.getElementsByClassName("glob"));
loop(mkInitialState(drifters, goopZoneElem.width.baseVal.value, goopZoneElem.height.baseVal.value));
loop(mkInitialState(drifters, goopZoneElem.width.baseVal.value/2, goopZoneElem.height.baseVal.value/2));

51
index.html
View File

@ -8,34 +8,39 @@
<header>
<svg id=goop-zone>
<defs>
<filter id="goop-full">
<feGaussianBlur stdDeviation="30"/>
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1000 -250"/>
<filter id="goop-blur">
<feGaussianBlur stdDeviation="15"/>
</filter>
<filter id="goop-thresh">
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1000 -500"/>
</filter>
<path
style="transform:scale(0.5)"
id="the-one-true-glob"
d="M 24.0,158.5 0,67.2 48.1,0 189.7,36.6 146.5,87.4 185.2,135.3 84.8,134.1 Z" />
</defs>
<g style="filter:url(#goop-full);width:100%;height:100%">
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<rect width=2000 height=30 x=-60 y=400 /> <!-- base -->
<rect width=600 height=130 x=100 y=135 id="header-box" />
<g style="filter:url(#goop-thresh)">
<g style="filter:url(#goop-blur);transform:scale(2.0)">
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<use class="glob" xlink:href="#the-one-true-glob" />
<rect width=1000 height=30 x=-30 y=190 /> <!-- base -->
<rect width=300 height=65 x=50 y=67.5 id="header-box" />
</g>
</g>
</svg>
<h1>Emi Simpson</h1>