From d6ab237166fdf4bd0c1061b802050bff01ce1f9b Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sun, 29 Dec 2019 14:29:42 +1000
Subject: [PATCH] more dynamic noise

---
 client/assets/styles/styles.less     |  1 +
 client/src/components/mnml.jsx       |  1 +
 client/src/components/noise.logo.jsx | 29 +++++++++++++++++++++++-----
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index 705c500f..09e265b7 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -151,6 +151,7 @@ button, input {
     &:hover {
         color: whitesmoke;
         border-color: @gray-hover;
+        // filter: url("#noiseFilter");
     }
 
     &:focus {
diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx
index 78e13a1b..4da9d8e8 100644
--- a/client/src/components/mnml.jsx
+++ b/client/src/components/mnml.jsx
@@ -5,6 +5,7 @@ const Main = require('./main');
 // const Nav = require('./nav');
 const Controls = require('./controls');
 const FrontPage = require('./front.page');
+const NoiseLogo = require('./noise.logo');
 
 const addState = connect(
     ({ game, instance, authenticated }) => ({ game, instance, authenticated })
diff --git a/client/src/components/noise.logo.jsx b/client/src/components/noise.logo.jsx
index 09abc33e..8e3c1d71 100644
--- a/client/src/components/noise.logo.jsx
+++ b/client/src/components/noise.logo.jsx
@@ -17,8 +17,8 @@ class Logo extends Component {
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 400 400">
                     <filter id='noiseFilter'>
-                        <feTurbulence type="turbulence" baseFrequency="0.5" numOctaves="1" result="turbulence"></feTurbulence>
-                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                        <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"></feTurbulence>
+                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                     </filter>
                 </svg>
             </div>
@@ -28,11 +28,30 @@ class Logo extends Component {
     componentDidMount() {
         this.animations.push(anime({
             targets: ['#noiseFilter feTurbulence', '#noiseFilter feDisplacementMap'],
-            baseFrequency: 1,
             easing: 'linear',
-            duration: () => anime.random(2000, 5000),
             loop: true,
-            direction: 'alternate',
+            keyframes: [
+                {
+                    baseFrequency: 0.5,
+                    duration: () => anime.random(1000, 2000),
+                },
+            ],
+        }));
+
+        this.animations.push(anime({
+            targets: ['#noiseFilter feDisplacementMap'],
+            easing: 'linear',
+            loop: true,
+            keyframes: [
+                {
+                    scale: 2,
+                    duration: () => anime.random(2000, 5000),
+                },
+                {
+                    scale: 4,
+                    duration: 200,
+                },
+            ],
         }));
     }