minor changes and added new thumbnail for particle demo in gallery

public/StreamlinesMultipart.html

@@ -37,7 +37,7 @@
   </header>
 
   <!-- <script src="polylineStreams.js"></script> -->
-  <script src="polylines_with_particles.js"></script>
+  <script src="polylineStreams.js"></script>
   <div id="cesiumContainer" class="pagecesium">
 
     <div id="legend">     

public/index.html

@@ -245,6 +245,25 @@
                 </div>
               </div>
             </div>  
+            <div class="col-md-4">  
+              <div class="card mb-4 shadow-sm extension">
+                <h5>Streamlines with particles</h5>
+                <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
+                <img class="thumbimg" src="imgs/thumbnails/StreamlinesMultipart_particles.PNG" alt="">
+                <div class="card-body">
+                  <p class="card-text">Multipart streamlines with vertex coloring showing also particles moving along the streamslines in order to give a better impression of the wind field. </p>
+                  <!-- <small class="text-muted">9 mins</small> -->
+                </div>
+                <div class="d-flex justify-content-between align-items-center btnGroupDiv">
+                  <div class="btn-group">
+                    <form action="SteamlineParticles.html" class="form-signin" method="GET">
+                      <button type="submit" class="btn btn-sm btn-outline-secondary ">Explore</button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div> 
+
             <div class="col-md-4">  
               <div class="card mb-4 shadow-sm extension">
                 <h5>Under construction</h5>

public/polylines_with_particles.js

@@ -171,13 +171,13 @@ $(function () {
         },
         point: {
           color: {
-            rgba: [255, 255, 255, 128],
+            rgba: [0, 0, 0, 250],
           },
           outlineColor: {
             rgba: [255, 0, 0, 128],
           },
-          outlineWidth: 3,
-          pixelSize: 15,
+          outlineWidth: 1,
+          pixelSize: 6,
         },
       },
     ];
@@ -223,7 +223,7 @@ $(function () {
     // Create and draw a polyline with per vertex colors
     /////////////////////////////////////////////////
     const heightOffset = 120;
-    for (var line = 2; line < uniqueStreamID.length; line++) {
+    for (var line = 0; line < uniqueStreamID.length; line++) {
       let positions = [];
       let positionsInDegrees = [];
       let colors = [];
@@ -278,8 +278,8 @@ $(function () {
 	//   console.log(streamDist);
 
       let t = 0;
-      // let dt = (individual_particle_pt_distance[0] / individual_particle_avg_velo[0])/50;
-      let dt = streamDist / individual_particle_avg_velo[0] / 500;
+      let dt = (individual_particle_pt_distance[0] / individual_particle_avg_velo[0])/ 20;
+    //   let dt = streamDist / individual_particle_avg_velo[0] / 500;
       let temp_pos = [];
 
       for (i = 0; i < positionsInDegrees.length; i++) {
@@ -297,7 +297,7 @@ $(function () {
             positionsInDegrees[i][1],
             positionsInDegrees[i][2]
           );
-        // dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[i] / 50;
+          dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[i] / 20;
           // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
           // console.log(dt);
         }