joshua/seigler.github.io
1
0
Fork 0
mirror of https://github.com/seigler/seigler.github.io synced 2025-07-27 07:16:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

⚡ Make Rothkogenerator more paintlike

Browse source
This commit is contained in:
Joshua Seigler 2018-01-07 03:08:30 -05:00
parent d2a13b79bd
commit 982c1f6475
1 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/static/art/rothko.svg
View file

@ -10,8 +10,15 @@
<feGaussianBlur stdDeviation="2 0" /> <feGaussianBlur stdDeviation="2 0" />
<feDisplacementMap in2="turbulenceFat" scale="-10"/> <feDisplacementMap in2="turbulenceFat" scale="-10"/>
</filter> </filter>
<filter id="paintMaskFilter">
<feTurbulence seed="0" type="fractalNoise" baseFrequency="0.02 0.1" numOctaves="4"/>
<feColorMatrix type="matrix" values="0.5 0 0 0 0.5 0 0.5 0 0 0.5 0 0 0.5 0 0.5 0 0 0 0 1" />
</filter>
<mask id="paintMask">
<rect x="0" y="0" width="300" height="400" fill="white" filter="url(#paintMaskFilter)"></rect>
</mask>
</defs> </defs>
<svg viewBox="0 0 300 400" x="0" y="0" width="300" height="400" id="rects" filter="url(#paint)"></svg> <svg id="rects" viewBox="0 0 300 400" x="0" y="0" width="300" height="400" filter="url(#paint)"></svg>
<script type="text/javascript"> <script type="text/javascript">
<![CDATA[ <![CDATA[
function randomHsl() { function randomHsl() {
@ -31,7 +38,6 @@
color: randomHsl(), color: randomHsl(),
height: Math.random(), height: Math.random(),
width: mainWidth + (Math.random() < 0.2 ? Math.random() * 100 - 50 : 0), width: mainWidth + (Math.random() < 0.2 ? Math.random() * 100 - 50 : 0),
opacity: 1 - Math.pow(Math.random(), 5),
x: null, x: null,
y: null y: null
}; };
@ -62,7 +68,9 @@
newRect.setAttributeNS(null, 'height', shapes[i].height); newRect.setAttributeNS(null, 'height', shapes[i].height);
newRect.setAttributeNS(null, 'width', shapes[i].width); newRect.setAttributeNS(null, 'width', shapes[i].width);
newRect.setAttributeNS(null, 'fill', shapes[i].color); newRect.setAttributeNS(null, 'fill', shapes[i].color);
newRect.setAttributeNS(null, 'opacity', shapes[i].opacity); if (i > 0) {
newRect.setAttributeNS(null, 'mask', 'url(#paintMask)');
}
domRects.appendChild(newRect); domRects.appendChild(newRect);
} }
]]> ]]>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Before After
Before After