curve dot primitive

ericrius1 · Oct 13, 2014 · f01161f · f01161f
1 parent 9e5db9e
commit f01161f
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,6 @@
 	<body>
 		<div id = "container"></div>
 		<script src="lib/vizi.js"></script>
-		<script src = "js/constants.js"></script>
 		<script src="lib/VRControls.js"></script>
 		<script src="lib/VREffect.js"></script>
 		<script src="lib/DeviceOrientationControls.js"></script>
@@ -24,13 +23,15 @@
 		<script src="lib/jquery.min.js"></script>
 		<script src="lib/stats.js"></script>
 
+		<script src = "js/constants.js"></script>
 		<script src = "js/scripts/flightpath.js"></script>
 		<script src = "js/effectors/visibility.js"></script>
 		<script src = "js/effectors/scale.js"></script>
 
 		<script src = "js/cloners/clonermanager.js"></script>
 		<script src = "js/cloners/cloner.js"></script>
 		<script src = "js/cloners/arcprimitive.js"></script>
+		<script src = "js/cloners/curvedotprimitive.js"></script>
 		<script src = "js/cloners/tracerprimitive.js"></script>
 		<script src = "js/cloners/fresnalprimitive.js"></script>
 		<script src = "js/infoworld.js"></script>

diff --git a/js/cloners/cloner.js b/js/cloners/cloner.js
@@ -32,10 +32,14 @@ G.Cloner.prototype.spawnPrimitives = function(){
 
 
 
-
-    primitive.addEventListener('distancethreshold', function(){
-      this.appear()
-    }.bind(primitive));
+    if(!this.params.visibilityEffector){
+      primitive.appear();
+    }
+    else{
+      primitive.addEventListener('distancethreshold', function(){
+        this.appear()
+      }.bind(primitive)); 
+    }
   }
 }
 
diff --git a/js/cloners/clonermanager.js b/js/cloners/clonermanager.js
@@ -47,18 +47,27 @@ G.ClonerManager = function(){
   // })
 
   var scale = G.rf(1, 2)
+  // var cloner = new G.Cloner({
+  //   primitive: G.FresnalPrimitive,
+  //   num: 1,
+  //   position: new THREE.Vector3(0, 0, -100),
+  //   // posRange: {x: {start: -200, end: -20}, y: {start: 0, end: 0}, z:{start: -800, end: 0 }},
+  //   rotRange: {start: 0, end: Math.PI * 2},
+  // })
+
+  // G.app.addObject(cloner)
+
   var cloner = new G.Cloner({
-    primitive: G.FresnalPrimitive,
+    primitive: G.CurveDotPrimitive,
     num: 1,
-    position: new THREE.Vector3(0, 0, -100),
+    position: new THREE.Vector3(0, 0, 300),
     // posRange: {x: {start: -200, end: -20}, y: {start: 0, end: 0}, z:{start: -800, end: 0 }},
     rotRange: {start: 0, end: Math.PI * 2},
   })
 
   G.app.addObject(cloner)
-  cloner.addEventListener('distancethreshold', function(){
-    this.spawnPrimitives();
-  })
+
+
 
 
 

diff --git a/js/cloners/curvedotprimitive.js b/js/cloners/curvedotprimitive.js
@@ -0,0 +1,86 @@
+
+G.CurveDotPrimitive = function(params) {
+  Vizi.Object.call(this)
+  this.subdivisions = 100
+  this.dotScale = 0.01;
+  this.percentFullScale = .1 // dot will be full scale by 10% of curve
+  this.strandMat = new THREE.ShaderMaterial({
+    uniforms: {
+      color: {
+        type: 'c',
+        value: new THREE.Color(_.sample(G.colorPalette))
+      }
+    },
+    attributes: {
+      opacity: {
+        type: 'f',
+        value: []
+      },
+    },
+    vertexShader: G.shaders.vs.strand,
+    fragmentShader: G.shaders.fs.strand,
+    transparent: true,
+    depthTest: false,
+    depthWrite: false
+  });
+
+
+  var strandGeometry = new THREE.Geometry()
+  var curve = new THREE.QuadraticBezierCurve3();
+
+  curve.v0 = new THREE.Vector3(0, 0, 0);
+  curve.v1 = new THREE.Vector3(G.rf(1, 10), G.rf(10, 20), 0);
+  curve.v2 = new THREE.Vector3(G.rf(10, 30), 0, 0);
+
+  var opacity = this.strandMat.attributes.opacity.value
+  for (var j = 0; j < this.subdivisions; j++) {
+    strandGeometry.vertices.push(curve.getPoint(j / this.subdivisions))
+    opacity[j] = 0.0;
+  }
+  strandGeometry.dynamic = false
+  this.strand = new THREE.Line(strandGeometry, this.strandMat)
+
+  var visual = new Vizi.Visual({
+    object: this.strand
+  });
+  this.addComponent(visual);
+
+  this.dot = new Vizi.Object();
+  visual = new Vizi.Visual({
+    geometry: new THREE.SphereGeometry(1, 12, 10),
+    material: _.sample(G.materials)
+  });
+  this.dot.addComponent(visual);
+  this.dot.transform.scale.set(this.dotScale, this.dotScale, this.dotScale)
+
+
+
+  this.strand.material.attributes.opacity.needsUpdate = true
+}
+
+goog.inherits(G.CurveDotPrimitive, Vizi.Object);
+
+G.CurveDotPrimitive.prototype.appear = function(vertexIndex) {
+  this.growStrand(0)
+}
+
+G.CurveDotPrimitive.prototype.growStrand = function(vertexIndex){
+  if(vertexIndex === 0){
+    G.app.addObject(this.dot);
+  }
+  var worldPos = this.strand.geometry.vertices[vertexIndex].clone();
+  worldPos.applyMatrix4(this.transform.object.matrixWorld);
+  this.dot.transform.position.set(worldPos.x, worldPos.y, worldPos.z  )
+  if(vertexIndex <= this.subdivisions *this.percentFullScale){
+    var scale = G.map(vertexIndex, 0, this.subdivisions * this.percentFullScale, 0.01, 1);
+    this.dot.transform.scale.set(scale, scale, scale)
+  }
+  var opacity = this.strandMat.attributes.opacity;
+  opacity.value[vertexIndex++] = 1;
+  opacity.needsUpdate = true
+  if (vertexIndex === opacity.value.length) return
+
+  setTimeout(function() {
+    this.growStrand(vertexIndex);
+  }.bind(this), 30)
+}
diff --git a/js/constants.js b/js/constants.js
@@ -6,4 +6,13 @@ G.map = function(value, min1, max1, min2, max2) {
   return min2 + (max2 - min2) * ((value - min1) / (max1 - min1));
 }
 
-G.colorPalette =  [0xEF2D5E, 0xFCED49, 0x1BA0D1, 0xA00B5F, 0x93B75E];
+G.colorPalette = [0xEF2D5E, 0xFCED49, 0x1BA0D1, 0xA00B5F, 0x93B75E];
+
+G.materials = []
+_.each(G.colorPalette, function(colorValue) {
+  G.materials.push(
+    new THREE.MeshBasicMaterial({
+      color: colorValue
+    })
+  )
+})
diff --git a/js/effectors/scale.js b/js/effectors/scale.js
@@ -24,7 +24,6 @@ G.ScaleEffector.prototype.update = function() {
   var distance = pos.distanceTo(this.params.targetObject.transform.position);
 
   if(distance < this.params.farDistance && distance > this.params.nearDistance){
-    console.log('scale')
     var scale = G.map(distance, this.params.farDistance, this.params.nearDistance, this.params.farScale, this.params.nearScale)
     this._object.transform.scale.set(scale, scale, scale)
 

diff --git a/lib/vizi.js b/lib/vizi.js
@@ -53772,7 +53772,8 @@ Vizi.Application.prototype.focus = function() {
 Vizi.Application.prototype.run = function() {
   // core game loop here
   this.realizeObjects();
-  //TONY: What is a better way to do this so the objects world pos it updated before I start running logic?
+  //ASK TONY: What is a better way to do this so the objects world pos it updated before I start running logic?
+  //the reason I need to do this because the first time I run through update loop, object is not in correct world position
   G.scene.updateMatrixWorld()
   this.lastFrameTime = Date.now();
   this.running = true;