fixed the loop, so that particles move all the time wihtout a gap between particle packages

public/polylines_with_particles.js

@@ -150,14 +150,22 @@ $(function () {
     ).toISOString());
   }
 
+  var divisor = 15
   d3.dsv(",", "results/polylines_with_velocity.csv").then(function (text) {
-    const particleDuration = 90; // units in seconds the particle / point should take to move from start to finish
+    const particleDuration = 170; // units in seconds the particle / point should take to move from start to finish
     //define the czml structure
     var particle_czml = [
       {
         id: "document",
         name: "CZML Point - Time Dynamic",
         version: "1.0",
+        clock: {
+          interval: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),         // This is the time range of our simulation
+          currentTime: '',    // This is the time associated with the start view
+          currentTime: get_date_time_dt(0),
+          multiplier: 5,
+          // range: 'LOOP_STOP',
+        }
       },
       {
         id: "point",
@@ -168,6 +176,8 @@ $(function () {
           cartographicDegrees: [
             // use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt)
           ],
+          "interpolationAlgorithm": "LINEAR",
+          "interpolationDegree": 5
         },
         point: {
           color: {
@@ -182,6 +192,17 @@ $(function () {
       },
     ];
 
+    //////////////////////////////////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////
+    let package_time_faktor = 2.0;
+
+    // create an array of deep copies of the original czml data structure, to be modified below.
+    let czmlArr = [];
+    for (c=0; c < package_time_faktor; c++){
+      czmlArr.push(JSON.parse(JSON.stringify(particle_czml)));    
+      czmlArr[c][1].id = "point_arr_" + String(c);  
+    }
+
     var temp = text;
     for (var i = 0; i < temp.length; i++) {
       // use i+=7 when parsed as d3.text(...)
@@ -278,8 +299,8 @@ $(function () {
 	//   console.log(streamDist);
 
       let t = 0;
-      let dt = (individual_particle_pt_distance[0] / individual_particle_avg_velo[0])/ 500;
-    //   let dt = streamDist / individual_particle_avg_velo[0] / 500;
+      let dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0])/ divisor;
+      // let dt = streamDist / individual_particle_avg_velo[0] / divisor;
       let temp_pos = [];
 
       for (i = 0; i < positionsInDegrees.length; i++) {
@@ -297,7 +318,7 @@ $(function () {
             positionsInDegrees[i][1],
             positionsInDegrees[i][2]
           );
-          dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[i] / 500;
+          dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / divisor;
           // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
           // console.log(dt);
         }
@@ -309,12 +330,42 @@ $(function () {
 	  
 	//   czmlArray.push(particle_czml);
       viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml));
-	}
+        ////////////////////////////////////////////////      
+        dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / divisor;
+        for (c=0; c < czmlArr.length ; c++){
+
+          temp_pos = [];
+          for (i = 0; i < positionsInDegrees.length; i++) {
+            if (i === 0) {
+              temp_pos.push(
+                t,
+                positionsInDegrees[i][0],
+                positionsInDegrees[i][1],
+                positionsInDegrees[i][2]
+              );          
+            } else {
+              temp_pos.push(
+                t,
+                positionsInDegrees[i][0],
+                positionsInDegrees[i][1],
+                positionsInDegrees[i][2]
+              );          
+              dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / divisor;
+              // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
+              // console.log(dt);
+            }
+
+            t += dt;
+          }
+          czmlArr[c][1].position.cartographicDegrees = temp_pos;       
+          czmlArr[c][1].id = "point_set_" + String(c) + "_" + String(line);  
+          czmlArr[c][1].position.epoch = get_date_time_dt(0);
+          viewer.dataSources.add(Cesium.CzmlDataSource.load(czmlArr[c])); 
+        }
+     
+      
+	  }   // end bracket for:  for (var line = 0; line < uniqueStreamID.length; line++) {
 	
-	// for (p = 0; p < czmlArray.length; p++) {
-	// 	let temp = czmlArray[p];
-	// 	viewer.dataSources.add(Cesium.CzmlDataSource.load(temp));
-	//   }
 
   });
 
@@ -347,36 +398,7 @@ $(function () {
 
   console.log("Position data imported.");
 
-  //// the following codes will actually generate multicolor polylines
-  /// just need a away to get the actual data into there...
-  ///
-  ///
-  // for (var line=0; line < 10; line++){
-  // 	// Example 2: Draw a polyline with per vertex colors
-  // 	positions = [];
-  // 	colors = [];
-  // 	for (i = 0; i < 12; ++i) {
-  // 	  positions.push(Cesium.Cartesian3.fromDegrees(-124.0 + line*5 + 5 * i, 35.0+line));
-  // 	  colors.push(Cesium.Color.fromRandom({ alpha: 1.0 }));
-  // 	}
-  // 	// For per segment coloring, supply the colors option with
-  // 	// an array of colors for each vertex.  Also set the
-  // 	// colorsPerVertex option to true.
-  // 	scene.primitives.add(
-  // 	  new Cesium.Primitive({
-  // 		geometryInstances: new Cesium.GeometryInstance({
-  // 		  geometry: new Cesium.PolylineGeometry({
-  // 			positions: positions,
-  // 			width: 5.0,
-  // 			vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
-  // 			colors: colors,
-  // 			colorsPerVertex: true,
-  // 		  }),
-  // 		}),
-  // 		appearance: new Cesium.PolylineColorAppearance(),
-  // 	  })
-  // 	);
-  // 	}
+  
 
   // HTML overlay for showing feature name on mouseover
   var nameOverlay = document.createElement("div");