Skip to content
GitLab
Commit 32ec45e3 authored by Sven Schneider's avatar Sven Schneider
Browse files

changed particles to appear in packages and repeating to give a continious stream impression

parent 49899c15
Pipeline #1907 passed with stages
in 34 seconds
Hide whitespace changes
Inline Side-by-side
public/polylines_with_particles.js
View file @ 32ec45e3
...@@ -39,11 +39,11 @@ $(function () { ...@@ -39,11 +39,11 @@ $(function () {
animation: true, animation: true,
infoBox: true, infoBox: true,
baseLayerPicker: true, baseLayerPicker: true,
fullscreenButton: false, fullscreenButton: true,
timeline: false, timeline: true,
navigationHelpButton: true, navigationHelpButton: true,
navigationInstructionsInitiallyVisible: false, navigationInstructionsInitiallyVisible: false,
homeButton: false, homeButton: true,
selectionIndicator: true, selectionIndicator: true,
geocoder: true, geocoder: true,
// imageryProviderViewModels: imageryViewModels // imageryProviderViewModels: imageryViewModels
...@@ -138,7 +138,7 @@ $(function () { ...@@ -138,7 +138,7 @@ $(function () {
var Velocity = []; var Velocity = [];
var pt_to_pt_dist = []; var pt_to_pt_dist = [];
var avgVelocity = []; var avgVelocity = [];
var czmlArray = [];
function get_date_time_dt(deltaTime) { function get_date_time_dt(deltaTime) {
// deltaTime should be given in SECONDS and is then converted to milliseconds // deltaTime should be given in SECONDS and is then converted to milliseconds
...@@ -151,23 +151,31 @@ $(function () { ...@@ -151,23 +151,31 @@ $(function () {
} }
d3.dsv(",", "results/polylines_with_velocity.csv").then(function (text) { 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 = 120; // units in seconds the particle / point should take to move from start to finish
//define the czml structure //define the czml structure
var particle_czml = [ var particle_czml = [
{ {
id: "document", id: "document",
name: "CZML Point - Time Dynamic", name: "CZML Point - Time Dynamic",
version: "1.0", 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", id: "point",
availability: availability: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),
get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),
position: { position: {
epoch: get_date_time_dt(0), epoch: get_date_time_dt(0),
cartographicDegrees: [ cartographicDegrees: [
// use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt) // use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt)
], ],
//"interpolationAlgorithm": "LAGRANGE",
//"interpolationDegree": 1
}, },
point: { point: {
color: { color: {
...@@ -181,6 +189,18 @@ $(function () { ...@@ -181,6 +189,18 @@ $(function () {
}, },
}, },
]; ];
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
let package_time_faktor = 6.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; var temp = text;
for (var i = 0; i < temp.length; i++) { for (var i = 0; i < temp.length; i++) {
...@@ -223,6 +243,7 @@ $(function () { ...@@ -223,6 +243,7 @@ $(function () {
// Create and draw a polyline with per vertex colors // Create and draw a polyline with per vertex colors
///////////////////////////////////////////////// /////////////////////////////////////////////////
const heightOffset = 120; const heightOffset = 120;
for (var line = 0; line < uniqueStreamID.length; line++) { for (var line = 0; line < uniqueStreamID.length; line++) {
let positions = []; let positions = [];
let positionsInDegrees = []; let positionsInDegrees = [];
...@@ -231,25 +252,29 @@ $(function () { ...@@ -231,25 +252,29 @@ $(function () {
let individual_particle_pt_distance = []; let individual_particle_pt_distance = [];
let individual_particle_avg_velo = []; let individual_particle_avg_velo = [];
for (i = sIDidx[line - 1]; i < sIDidx[line] - 1; ++i) { curr_pos = sIDidx[line];
positions.push(
Cesium.Cartesian3.fromDegrees( for (i = curr_pos; i < streamID.length; ++i) {
if (line === streamID[i]){
positions.push(
Cesium.Cartesian3.fromDegrees(
pos[i][0],
pos[i][1],
pos[i][2] + heightOffset
)
);
positionsInDegrees.push([
pos[i][0], pos[i][0],
pos[i][1], pos[i][1],
pos[i][2] + heightOffset pos[i][2] + heightOffset,
) ]);
); colors.push(
positionsInDegrees.push([ Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180)
pos[i][0], );
pos[i][1], individual_particle_avg_velo.push(avgVelocity[i]);
pos[i][2] + heightOffset, individual_particle_pt_distance.push(pt_to_pt_dist[i]);
]); individual_particle_velo.push(Velocity[i]);
colors.push( } // if end brace
Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180)
);
individual_particle_avg_velo.push(avgVelocity[i]);
individual_particle_pt_distance.push(pt_to_pt_dist[i]);
individual_particle_velo.push(Velocity[i]);
} }
// For per segment coloring, supply the colors option with // For per segment coloring, supply the colors option with
// an array of colors for each vertex. Also set the // an array of colors for each vertex. Also set the
...@@ -274,14 +299,15 @@ $(function () { ...@@ -274,14 +299,15 @@ $(function () {
///////////////////////////////////////////////// /////////////////////////////////////////////////
let streamDist = individual_particle_pt_distance.reduce(function (a, b) { let streamDist = individual_particle_pt_distance.reduce(function (a, b) {
return a + b; return a + b;
}, 0); }, 0);
// console.log(streamDist); // console.log(streamDist);
let t = 0; let t = 0;
let dt = (individual_particle_pt_distance[0] / individual_particle_avg_velo[0])/ 20; let dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20;
// let dt = streamDist / individual_particle_avg_velo[0] / 500; // let dt = streamDist / individual_particle_avg_velo[0] / 500;
let temp_pos = [];
/////////////////////////////////////
var temp_pos = [];
for (i = 0; i < positionsInDegrees.length; i++) { for (i = 0; i < positionsInDegrees.length; i++) {
if (i === 0) { if (i === 0) {
temp_pos.push( temp_pos.push(
...@@ -289,34 +315,62 @@ $(function () { ...@@ -289,34 +315,62 @@ $(function () {
positionsInDegrees[i][0], positionsInDegrees[i][0],
positionsInDegrees[i][1], positionsInDegrees[i][1],
positionsInDegrees[i][2] positionsInDegrees[i][2]
); );
} else { } else {
temp_pos.push( temp_pos.push(
t, t,
positionsInDegrees[i][0], positionsInDegrees[i][0],
positionsInDegrees[i][1], positionsInDegrees[i][1],
positionsInDegrees[i][2] positionsInDegrees[i][2]
); );
dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[i] / 20; dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / 20; // avg_velo is always the same per streamline
// console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] ); // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
// console.log(dt); // console.log(dt);
} }
t += dt; t += dt;
} }
particle_czml[1].id = "point" + String(line); particle_czml[1].id = "point" + String(line);
particle_czml[1].position.cartographicDegrees = temp_pos; particle_czml[1].position.cartographicDegrees = temp_pos;
// czmlArray.push(particle_czml);
viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml)); viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml));
}
////////////////////////////////////////////////
dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20;
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] / 20;
// 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));
// }
}); }); // end bracket for: d3.dsv(...).then(...
......
public/polylines_with_particles_backup.js 0 → 100644
View file @ 32ec45e3
$(function () {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y";
var imageryViewModels = [];
imageryViewModels.push(
new Cesium.ProviderViewModel({
name: "Sentinel-2",
iconUrl: Cesium.buildModuleUrl(
"Widgets/Images/ImageryProviders/sentinel-2.png"
),
tooltip: "Sentinel-2 cloudless.",
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3954 });
},
})
);
imageryViewModels.push(
new Cesium.ProviderViewModel({
name: "Blue Marble",
iconUrl: Cesium.buildModuleUrl(
"Widgets/Images/ImageryProviders/blueMarble.png"
),
tooltip: "Blue Marble Next Generation July, 2004 imagery from NASA.",
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3845 });
},
})
);
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1),
}),
scene3DOnly: false,
shouldAnimate: true,
animation: true,
infoBox: true,
baseLayerPicker: true,
fullscreenButton: false,
timeline: false,
navigationHelpButton: true,
navigationInstructionsInitiallyVisible: false,
homeButton: false,
selectionIndicator: true,
geocoder: true,
// imageryProviderViewModels: imageryViewModels
});
// var layer = viewer.imageryLayers.addImageryProvider(
// new Cesium.IonImageryProvider({ assetId: 3 })
// );
var imageryLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3954 })
);
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.addEventListener("click", function () {
canvas.focus();
});
canvas.focus();
var scene = viewer.scene;
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "buildingTiles/StoeckachLOD1/tileset.json",
show: true,
})
);
tileset.readyPromise.then(function (tileset) {
return zoomAll(tileset);
});
tileset.readyPromise.then(function (tileset) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height = 53;
var cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
);
var offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
height
);
var translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
//var rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(Yaw, P, R)
);
tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
rotation,
translation
);
return zoomAll(tileset);
});
viewer.scene.globe.enableLighting = true; // set lighting to true
var zoomAll = function (tileset) {
return new Promise(function (resolve, reject) {
if (!tileset) {
reject("Tileset is undifined");
}
viewer.camera.viewBoundingSphere(
tileset.boundingSphere,
new Cesium.HeadingPitchRange(0, -0.5, 1500)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
resolve();
});
};
//////////////////////////////////////////
// load streamline data from text file and parse it to polyline with multiple colors.
var pos = [];
var cols = [];
var streamID = [];
var Velocity = [];
var pt_to_pt_dist = [];
var avgVelocity = [];
var czmlArray = [];
function get_date_time_dt(deltaTime) {
// deltaTime should be given in SECONDS and is then converted to milliseconds
// set deltaTime to 0 if you want to get current date and time
// set to +60000 to get date and time of 60 seconds = 60000 milliseconds in the future
return (currentdate = new Date(
new Date().getTime() + deltaTime * 1000
).toISOString());
}
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
//define the czml structure
var particle_czml = [
{
id: "document",
name: "CZML Point - Time Dynamic",
version: "1.0",
},
{
id: "point",
availability:
get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),
position: {
epoch: get_date_time_dt(0),
cartographicDegrees: [
// use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt)
],
},
point: {
color: {
rgba: [0, 0, 0, 250],
},
outlineColor: {
rgba: [255, 0, 0, 128],
},
outlineWidth: 1,
pixelSize: 6,
},
},
];
var temp = text;
for (var i = 0; i < temp.length; i++) {
// use i+=7 when parsed as d3.text(...)
pos.push([
parseFloat(text[i].Lon),
parseFloat(text[i].Lat),
parseFloat(text[i].z),
]);
cols.push([
parseInt(text[i].R),
parseInt(text[i].G),
parseInt(text[i].B),
]);
streamID.push(parseInt(text[i].ID));
Velocity.push(parseFloat(text[i].velocity));
avgVelocity.push(parseFloat(text[i].AverageVelocity));
pt_to_pt_dist.push(parseFloat(text[i].pt_to_pt_dist));
// use these lines if parsed as text. i.e. using d3.text(...)
//pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]);
//colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])])
//streamID.push([parseFloat(temp[i+6])]);
}
const maxID = streamID.reduce(function (a, b) {
return Math.max(a, b);
});
//find out the unique ids within the streamID array
const uniqueStreamID = Array.from(new Set(streamID)); // const uniqueStreamID = [...new Set(streamID)]; // same can be done with spread operator
//get index of each unique id, first element of those
let sIDidx = [];
for (var i = 0; i <= maxID; i++) {
var tmpIdx = streamID.indexOf(i);
if (tmpIdx !== -1) sIDidx.push(tmpIdx);
}
/////////////////////////////////////////////////
// Create and draw a polyline with per vertex colors
/////////////////////////////////////////////////
const heightOffset = 120;
for (var line = 0; line < uniqueStreamID.length; line++) {
let positions = [];
let positionsInDegrees = [];
let colors = [];
let individual_particle_velo = [];
let individual_particle_pt_distance = [];
let individual_particle_avg_velo = [];
for (i = sIDidx[line - 1]; i < sIDidx[line] - 1; ++i) {
positions.push(
Cesium.Cartesian3.fromDegrees(
pos[i][0],
pos[i][1],
pos[i][2] + heightOffset
)
);
positionsInDegrees.push([
pos[i][0],
pos[i][1],
pos[i][2] + heightOffset,
]);
colors.push(
Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180)
);
individual_particle_avg_velo.push(avgVelocity[i]);
individual_particle_pt_distance.push(pt_to_pt_dist[i]);
individual_particle_velo.push(Velocity[i]);
}
// For per segment coloring, supply the colors option with
// an array of colors for each vertex. Also set the
// colorsPerVertex option to true.
viewer.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(),
})
);
////////////////////////////////////////////////
// Create and prepare particles for movement
/////////////////////////////////////////////////
let streamDist = individual_particle_pt_distance.reduce(function (a, b) {
return a + b;
}, 0);
// console.log(streamDist);
let t = 0;
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++) {
if (i === 0) {
temp_pos.push(
0,
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[i] / 20;
// console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
// console.log(dt);
}
t += dt;
}
particle_czml[1].id = "point" + String(line);
particle_czml[1].position.cartographicDegrees = temp_pos;
// czmlArray.push(particle_czml);