puppet particles
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');
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);
