charge svg, space out randomly generated points

client/src/components/anims/test.jsx

@@ -2,7 +2,9 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 
+const charge = require('../svgs/charge');
 const { TIMES } = require('../../constants');
+const { randomPoints } = require('../../utils');
 
 const duration = TIMES.START_SKILL;
 
@@ -10,53 +12,9 @@ class Attack extends Component {
     constructor(props) {
         super();
         this.props = props;
-        const points = [];
+        const points = randomPoints(7, 50, 300, 400);
-
+        const length = 6;
-
+        this.charges = points.map(coord => charge(coord[0], coord[1], length, '#a52a2a'));
-        for (let i = 0; i <= 2; i += 1) {
-            const x = Math.floor(Math.random() * 200 + 50);
-            const y = Math.floor(Math.random() * 300 + 50);
-            points.push([x, y]);
-            this.circles = points.map((coord, j) => (
-                <svg key={j}>
-                    <polygon
-                        points={`
-                            ${coord[0]},${coord[1] - 10}
-                            ${coord[0] - 20},${coord[1] + 20}
-                            ${coord[0] + 20},${coord[1] + 20}
-                        `}
-                        stroke="#a52a2a"
-                        stroke-width="2"
-
-                        id="charge"
-                    />
-                    <polyline
-                        points={`
-                            ${coord[0] + 20},${coord[1] + 20}
-                            ${coord[0] + 35},${coord[1] + 10}
-                            ${coord[0]},${coord[1] - 40}
-                            ${coord[0] - 35},${coord[1] + 10}
-                            ${coord[0] - 20},${coord[1] + 20}
-                        `}
-                        stroke="#a52a2a"
-                        stroke-width="2"
-                        id="charge"
-                    />
-                    <polyline
-                        points={`
-                            ${coord[0] + 35},${coord[1] + 10}
-                            ${coord[0] + 50},${coord[1]}
-                            ${coord[0]},${coord[1] - 70}
-                            ${coord[0] - 50},${coord[1]}
-                            ${coord[0] - 35},${coord[1] + 10}
-                        `}
-                        stroke="#a52a2a"
-                        stroke-width="2"
-                        id="charge"
-                    />
-                </svg>
-            ));
-        }
     }
 
     render() {
@@ -67,10 +25,7 @@ class Attack extends Component {
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 300 400">
-                <filter id="blurMe">
+                {this.charges}
-                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
-                </filter>
-                {this.circles}
             </svg>
         );
     }
@@ -105,7 +60,7 @@ class Attack extends Component {
             fill: '#a52a2a',
             delay: anime.stagger(100),
             loop: true,
-            duration: 1000,
+            duration: duration,
             easing: 'easeInQuad',
         });
 

client/src/components/svgs/charge.jsx

@@ -0,0 +1,42 @@
+const preact = require('preact');
+
+module.exports = function charge(x, y, height, colour) {
+    return (
+        <svg>
+            <polygon
+                points={`
+                    ${x},${y - height}
+                    ${x - 2 * height},${y + 2 * height}
+                    ${x + 2 * height},${y + 2 * height}
+                `}
+                stroke="#a52a2a"
+                stroke-width="2"
+                id="charge"
+            />
+            <polyline
+                points={`
+                    ${x + 2 * height},${y + 2 * height}
+                    ${x + 3.5 * height},${y + height}
+                    ${x},${y - 4 * height}
+                    ${x - 3.5 * height},${y + height}
+                    ${x - 2 * height},${y + 2 * height}
+                `}
+                stroke="#a52a2a"
+                stroke-width="2"
+                id="charge"
+            />
+            <polyline
+                points={`
+                    ${x + 3.5 * height},${y + height}
+                    ${x + 5 * height},${y}
+                    ${x},${y - 7 * height}
+                    ${x - 5 * height},${y}
+                    ${x - 3.5 * height},${y + height}
+                `}
+                stroke={colour}
+                stroke-width="2"
+                id="charge"
+            />
+        </svg>
+    );
+}

client/src/utils.jsx

@@ -345,6 +345,37 @@ const TARGET_COLOURS = {
     BROWN: '#583108',
 };
 
+function randomPoints(numPoints, radius, width, height) {
+    const points = [];
+    let infCheck = 0;
+    while (points.length < numPoints) {
+        const c = [
+            Math.floor(Math.random() * (width - 2 * radius) + radius),
+            Math.floor(Math.random() * (height - 2 * radius) + radius),
+        ];
+        let overlapping = false;
+        for (let j = 0; j < points.length; j += 1) {
+            const o = points[j];
+            const dx = c[0] - o[0];
+            const dy = c[1] - o[1];
+            const d = Math.floor(Math.sqrt(dx * dx + dy * dy));
+            if (d < radius) {
+                overlapping = true;
+            }
+        }
+        if (!overlapping) {
+            points.push(c);
+            infCheck = 0;
+        } else {
+            infCheck += 1;
+            if (infCheck > 50) {
+                break;
+            }
+        }
+    }
+    return points;
+}
+
 module.exports = {
     stringSort,
     convertItem,
@@ -356,4 +387,5 @@ module.exports = {
     STATS,
     COLOURS,
     TARGET_COLOURS,
+    randomPoints,
 };