spider color updated

assets/js/spider-animation.js

 jQuery(document).ready(function () {
-VerletJS.prototype.spider = function (origin) {
+  VerletJS.prototype.spider = function (origin) {
     var i;
     var legSeg1Stiffness = 0.99;
     var legSeg2Stiffness = 0.99;
@@ -211,8 +211,8 @@ VerletJS.prototype.spider = function (origin) {
     }
     this.composites.push(composite);
     return composite;
-};
-VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) {
+  };
+  VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) {
     var stiffness = 0.6;
     var tensor = 0.3;
     var stride = (2 * Math.PI) / segments;
@@ -271,16 +271,16 @@ VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) {
     for (c in composite.constraints) composite.constraints[c].distance *= tensor;
     this.composites.push(composite);
     return composite;
-};
-function shuffle(o) {
+  };
+  function shuffle(o) {
     for (
       var j, x, i = o.length;
       i;
       j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x
     );
     return o;
-}
-VerletJS.prototype.crawl = function (leg) {
+  }
+  VerletJS.prototype.crawl = function (leg) {
     var stepRadius = 100;
     var minStepRadius = 35;
     var spiderweb = this.composites[0];
@@ -344,8 +344,8 @@ VerletJS.prototype.crawl = function (leg) {
         new DistanceConstraint(spider.legs[leg], paths[0], 1, 0)
       );
     }
-};
-window.onload = function () {
+  };
+  window.onload = function () {
     var canvas = document.getElementById("scratch");
     var width = parseInt(canvas.style.width);
     var height = parseInt(canvas.style.height);
@@ -367,10 +367,12 @@ window.onload = function () {
         var point = composite.particles[i];
         ctx.beginPath();
         ctx.arc(point.pos.x, point.pos.y, 1.3, 0, 2 * Math.PI);
-      ctx.fillStyle = "#7e7e7e";
+        ctx.fillStyle = "#fff";
         ctx.fill();
       }
     };
+
+
     spider.drawConstraints = function (ctx, composite) {
       var i;
       ctx.beginPath();
@@ -431,7 +433,7 @@ window.onload = function () {
         }
       }
     };
-  spider.drawParticles = function (ctx, composite) {};
+    spider.drawParticles = function (ctx, composite) { };
     var legIndex = 0;
     var loop = function () {
       if (Math.floor(Math.random() * 4) == 0) {
@@ -442,5 +444,19 @@ window.onload = function () {
       requestAnimFrame(loop);
     };
     loop();
-};
+
+    function PinConstraint(a, pos) {
+      this.a = a;
+      this.pos = new Vec2().mutableSet(pos);
+    }
+    PinConstraint.prototype.relax = function (stepCoef) {
+      this.a.pos.mutableSet(this.pos);
+    };
+    PinConstraint.prototype.draw = function (ctx) {
+      ctx.beginPath();
+      ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI);
+      ctx.fillStyle = "yellow";
+      ctx.fill();
+    };
+  };
 });
\ No newline at end of file

assets/js/spider-framework.js

@@ -81,7 +81,7 @@
         PinConstraint.prototype.draw = function (ctx) {
           ctx.beginPath();
           ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI);
-          ctx.fillStyle = "rgba(0,153,255,0.1)";
+          ctx.fillStyle = "#fff";
           ctx.fill();
         };
         function AngleConstraint(a, b, c, stiffness) {

blocks/welcome-banner-spider.php

@@ -2,7 +2,10 @@
 <section class="py-80 HOME TOP-BANNER-SECTION home2">
     <div class="container">
         <div class="row align-items-center">
-            <div class="col-lg-5 col-md-5 col-12 mx-auto left-text">
+            <div class="col-lg-6 col-md-6 col-12 mx-auto order-md-2">
+                <canvas id="scratch" style="width: 375px; height: 400px;"></canvas>
+            </div>
+            <div class="col-lg-5 col-md-5 col-12 mx-auto left-text order-md-1">
                 <div class="position-relative left-text-wrapper">
                     <h1><?php echo get_field('wb_title') ?></h1>
                     <p><?php echo get_field('wb_subtitle') ?></p>
@@ -18,15 +21,7 @@
                     </a>
                 </div>
             </div>
-            <div class="col-lg-6 col-md-6 col-12 mx-auto">
-                <canvas id="scratch" style="width: 500px; height: 400px;"></canvas>
-                <!-- <div class="jumbotron showcase parallax-window" data-parallax="scroll"
-                    data-image-src="images/showcase-bg.jpg" data-position="-80% -90%" style="margin-top:70px;">
-                    <div class="col-md-5" style="margin-top:-50px;">
-                        <canvas id="scratch" style="width: 500px; height: 400px;"></canvas>
-                    </div>
-                </div> -->
-            </div>
+
         </div>
     </div>
 </section>