puppet particles

player/index.html

diff --git a/player/index.html b/player/index.html
index 2a56c09..aa57f62 100644
--- a/player/index.html
+++ b/player/index.html
@@ -68,6 +68,7 @@
         }
 
     </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
     <!-- build:js lottie.js -->
     <script src="js/main.js"></script>
     <script src="js/utils/common.js"></script>
@@ -243,6 +244,12 @@
     }, 1000);
 
 
+    const global_options = {
+      spring_force: 0.5
+    }
+    var gui = new dat.GUI()
+
+    gui.add(global_options, 'spring_force', 0, 1).step(.01)
 
 
     /*var elem = document.getElementById('lottie2');

player/js/elements/webglElements/effects/WebGLPuppetPin.js

diff --git a/player/js/elements/webglElements/effects/WebGLPuppetPin.js b/player/js/elements/webglElements/effects/WebGLPuppetPin.js
index dd85416..c09ba16 100644
--- a/player/js/elements/webglElements/effects/WebGLPuppetPin.js
+++ b/player/js/elements/webglElements/effects/WebGLPuppetPin.js
@@ -98,42 +98,50 @@
     gl.bufferData(gl.ARRAY_BUFFER, this.texture_positions, gl.STATIC_DRAW);
 }
 
+function WPuppetPinParticle(x, y) {
+    this.x = x;
+    this.y = y;
+}
+
+WPuppetPinParticle.prototype.addForce = function(x, y) {
+    this.x += x;
+    this.y += y;
+}
+
 WPuppetPinEffect.prototype.renderFrame = function(forceRender, buffer){
     var effectElements = this.filterManager.effectElements;
     var gl = this.gl;
     this.gl.useProgram(this.program);
-    
+
     //POSITION
+    var particles = []
     var positions = [];
     var i, j, len = 10, jlen = 10;
     for(j = 0; j < jlen; j += 1) {
         for(i = 0; i < len; i += 1) {
-            /*positions.push(i/10);
-            positions.push(j/10);
-            positions.push((i+1)/10);
-            positions.push(j/10);
-            positions.push(i/10);
-            positions.push((j+1)/10);
-            positions.push((i+1)/10);
-            positions.push(j/10);
-            positions.push((i+1)/10);
-            positions.push((j+1)/10);
-            positions.push(i/10);
-            positions.push((j+1)/10);*/
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
-            positions.push(Math.random());
+            particles.push(new WPuppetPinParticle(i / 10, j / 10));
+            particles.push(new WPuppetPinParticle((i + 1) / 10, j / 10));
+            particles.push(new WPuppetPinParticle(i / 10, (j + 1) / 10));
+            particles.push(new WPuppetPinParticle((i + 1) / 10, j / 10));
+            particles.push(new WPuppetPinParticle((i + 1) / 10, (j + 1) / 10));
+            particles.push(new WPuppetPinParticle(i / 10, (j + 1) / 10));
+
+            /*particles.push(new WPuppetPinParticle(Math.random(), Math.random()));
+            particles.push(new WPuppetPinParticle(Math.random(), Math.random()));
+            particles.push(new WPuppetPinParticle(Math.random(), Math.random()));
+            particles.push(new WPuppetPinParticle(Math.random(), Math.random()));
+            particles.push(new WPuppetPinParticle(Math.random(), Math.random()));
+            particles.push(new WPuppetPinParticle(Math.random(), Math.random()));*/
+            
         }   
     }
+    for(i = 0; i < particles.length; i += 1) {
+        if(i > 40 && i < 70) {
+            particles[i].addForce(0.01,0.01);
+        }
+        positions.push(particles[i].x);
+        positions.push(particles[i].y);
+    }
     this.positions = new Float32Array(positions);
     this.positionBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);