374 lines
13 KiB
JavaScript
374 lines
13 KiB
JavaScript
var parade;
|
|
var interview_sorter;
|
|
|
|
var config = {
|
|
speedFactor: 0.01, // speed of the shapes
|
|
distanceFactor: 20, // distance between the shapes
|
|
startOffset: 0.001, // starting position
|
|
shapeWidth: 100, // 8 shape of animation: width
|
|
shapeHeight: 1300 // 8 shape of animation: height;
|
|
}
|
|
|
|
// polyfill
|
|
window.performance = window.performance || {};
|
|
performance.now = (function() {
|
|
return performance.now ||
|
|
performance.mozNow ||
|
|
performance.msNow ||
|
|
performance.oNow ||
|
|
performance.webkitNow ||
|
|
Date.now /*none found - fallback to browser default */
|
|
})();
|
|
|
|
|
|
const request = new Request('dataset/images_prop.json');
|
|
fetch(request)
|
|
.then(response => {
|
|
if (response.status === 200) {
|
|
return response.json();
|
|
} else {
|
|
throw new Error('Something went wrong on api server!');
|
|
}
|
|
})
|
|
.then(data => {
|
|
console.debug(data);
|
|
// loaded data from json, initialise interface
|
|
const canvas = document.getElementById("renderCanvas");
|
|
parade = new Parade(canvas, data['image'], config);
|
|
parade.createScene();
|
|
// parade.scene.debugLayer.show();
|
|
}).catch(error => {
|
|
console.error(error);
|
|
});
|
|
|
|
|
|
class Parade {
|
|
constructor(canvasEl, images, config) {
|
|
// animation parameters:
|
|
this.config = config;
|
|
|
|
this.canvasEl = canvasEl;
|
|
this.engine = new BABYLON.Engine(canvasEl, true); // create 3d engine
|
|
this.isPlaying = false;
|
|
|
|
// initialise image objects:
|
|
this.images = [];
|
|
this.imagePositions = []; // index: position, value: image-index
|
|
let storedPositions = localStorage.getItem('imagePositions');
|
|
if(storedPositions) {
|
|
this.imagePositions = JSON.parse(storedPositions);
|
|
}
|
|
// else or invalid:
|
|
if(!storedPositions || this.imagePositions.length != images.length) {
|
|
// fill with default: order of the JSON file
|
|
for (let index = 0; index < images.length; index++) {
|
|
this.imagePositions[index] = index;
|
|
}
|
|
}
|
|
|
|
for(let i in images) {
|
|
i = parseInt(i);
|
|
let pos = this.imagePositions.indexOf(i);
|
|
// console.log('pos', , pos);
|
|
let img = new ParadeImage(images[i], pos);
|
|
this.images.push(img);
|
|
|
|
// for testing:
|
|
// if(this.images.length > 5)
|
|
// break;
|
|
}
|
|
|
|
this.setupSubtitles();
|
|
this.setupSorter();
|
|
|
|
// Watch for browser/canvas resize events
|
|
window.addEventListener("resize", function () {
|
|
this.engine.resize();
|
|
}.bind(this));
|
|
|
|
//Register a render loop to repeatedly render the scene
|
|
this.engine.runRenderLoop(this.renderLoop.bind(this));
|
|
}
|
|
|
|
setupSubtitles() {
|
|
this.audioEl = document.getElementById('interview'); // audio player
|
|
this.subtitleEl = document.getElementById('subtitles'); // the subtitle div
|
|
this.trackEl = this.audioEl.querySelector('track'); // the subtitle track
|
|
this.timeEl = document.getElementById('time'); // the subtitle track
|
|
|
|
// set up subtitles:
|
|
this.trackEl.addEventListener("cuechange", (event) => {
|
|
let cues = event.target.track.activeCues;
|
|
let content = "";
|
|
for(let cue of cues) {
|
|
content += "<p>"+cue.text+"</p>";
|
|
}
|
|
this.subtitleEl.innerHTML = content;
|
|
});
|
|
|
|
|
|
this.audioEl.addEventListener('timeupdate', this.updateTimestring.bind(this));
|
|
this.updateTimestring();
|
|
}
|
|
|
|
updateTimestring() {
|
|
let now = this.audioEl.currentTime;
|
|
let duration = this.audioEl.duration;
|
|
|
|
let timestring = String(Math.floor(now/60)).padStart(2, '0') + ":"
|
|
+ String(Math.floor(now)%60).padStart(2, '0')
|
|
+ " / " + String(Math.floor(duration/60)).padStart(2, '0') + ":"
|
|
+ String(Math.floor(duration)%60).padStart(2, '0');
|
|
|
|
this.timeEl.innerHTML = timestring;
|
|
}
|
|
|
|
setupSorter() {
|
|
this.sorterTemplate = document.getElementById('annotationContentTemplate');
|
|
this.sorter = document.getElementById('annotation');
|
|
this.pauseTimeout = null;
|
|
this.imagesToSort = this.images.slice(); // we will keep track of images that needs weighing (clone by reference)
|
|
|
|
let nextButton = document.getElementById('nextButton');
|
|
nextButton.addEventListener('click', this.nextSorterImage.bind(this));
|
|
|
|
// set maximum to last image index
|
|
this.sorterTemplate.content.querySelector('.weight').max = this.images.length - 1;
|
|
|
|
this.changeSorterImage();
|
|
}
|
|
|
|
changeSorterImage() {
|
|
// pick random image
|
|
this.imageToSort = this.imagesToSort[Math.floor(Math.random()*this.imagesToSort.length)];
|
|
// this.imageToSort = this.imagesToSort[0]; // always the first instead of random
|
|
|
|
let clone = this.sorterTemplate.content.cloneNode(true);
|
|
let imgEl = clone.querySelector(".img");
|
|
let descriptionEl = clone.querySelector(".description");
|
|
let nameEl = clone.querySelector(".name");
|
|
let weightEl = clone.querySelector(".weight");
|
|
imgEl.src = this.imageToSort.getImageUrl();
|
|
nameEl.innerHTML = this.imageToSort.info['image'];
|
|
descriptionEl.innerHTML = this.imageToSort.info['set'];
|
|
|
|
// weightEl.value = parseInt(image.info['weight']);
|
|
weightEl.value = parseInt(this.imageToSort.position); // don't use weight, but the image's actual position
|
|
weightEl.addEventListener('input', this.changeSorterWeight.bind(this));
|
|
|
|
let sorterContent = this.sorter.querySelector('#annotationContent');
|
|
sorterContent.innerHTML = "";
|
|
sorterContent.appendChild(clone);
|
|
}
|
|
|
|
changeSorterWeight(ev) {
|
|
this.play();
|
|
|
|
// make sure nr is never too big.
|
|
let newIndex = Math.min(this.images.length -1 , parseInt(ev.target.value));
|
|
this.setImagePosition(this.imageToSort, newIndex);
|
|
}
|
|
|
|
setImagePosition(image, new_position) {
|
|
let id = this.images.indexOf(image);
|
|
let old_position = this.imagePositions.indexOf(id);
|
|
// move from old to new position in the array, see https://stackoverflow.com/a/5306832
|
|
this.imagePositions.splice(
|
|
new_position, 0,
|
|
this.imagePositions.splice(old_position, 1)[0]
|
|
);
|
|
|
|
// update positions of image objects
|
|
for(let i in this.images) {
|
|
i = parseInt(i);
|
|
this.images[i].setPosition(this.imagePositions.indexOf(i), this.t + 2000);
|
|
}
|
|
|
|
// save:
|
|
localStorage.setItem('imagePositions', JSON.stringify(this.imagePositions));
|
|
}
|
|
|
|
nextSorterImage() {
|
|
this.play();
|
|
let i = this.imagesToSort.indexOf(this.imageToSort);
|
|
this.imagesToSort.splice(i, 1); // remove from images to position
|
|
|
|
this.changeSorterImage();
|
|
}
|
|
|
|
play() {
|
|
// play audio for n seconds:
|
|
// extend timeout if it's already playing
|
|
const duration = 10; // seconds
|
|
if(this.pauseTimeout) {
|
|
clearTimeout(this.pauseTimeout);
|
|
}
|
|
this.pauseTimeout = setTimeout(() => {
|
|
this.pause();
|
|
}, duration * 1000);
|
|
this.audioEl.play();
|
|
document.body.classList.remove('paused');
|
|
this.isPlaying = true;
|
|
}
|
|
|
|
pause() {
|
|
// pause audio and animation
|
|
this.audioEl.pause();
|
|
document.body.classList.add('paused');
|
|
this.isPlaying = false;
|
|
}
|
|
|
|
renderLoop() {
|
|
// limit camera movement:
|
|
// let camera = this.scene.cameras[0];
|
|
// if(camera.rotation['x'] < 0.1) {
|
|
// camera.rotation['x'] = 0.1
|
|
// }
|
|
// if(camera.rotation['x'] > .3) {
|
|
// camera.rotation['x'] = .3
|
|
// }
|
|
this.animate(); // update positions of the objects
|
|
this.scene.render();
|
|
}
|
|
|
|
animate() {
|
|
let n = window.performance.now();
|
|
let dt = 0;
|
|
if(this.isPlaying) {
|
|
// todo: make it come to a slow halt, instead of sudden;
|
|
dt = n - this.lastRenderTime;
|
|
this.t += dt;
|
|
}
|
|
this.lastRenderTime = n; // also increment when paused;
|
|
|
|
// console.log(maxStepSize);
|
|
for(let i of this.images){
|
|
i.updateMeshPosition(this.t, dt, this.config);
|
|
|
|
}
|
|
}
|
|
|
|
createScene() {
|
|
// This creates a basic Babylon Scene object
|
|
this.scene = new BABYLON.Scene(this.engine);
|
|
|
|
this.scene.clearColor = new BABYLON.Color3(.22,0.27,0.38); // color RGB
|
|
// this.scene.clearColor = new BABYLON.Color4(0.6, 0.6, 0.,0); // transparent - RGBA
|
|
this.scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
|
|
this.scene.fogColor = this.scene.clearColor;
|
|
this.scene.fogDensity = 0.002;
|
|
|
|
// let camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3( 0.0, 0.0, 120.86337575312979), this.scene);
|
|
// camera.rotation = new BABYLON.Vector3(0, Math.PI, 0);
|
|
// camera.fov = 1.1; // default: 0.8
|
|
let camera = new BABYLON.UniversalCamera("camera2", new BABYLON.Vector3( -11.79906036421707, -0.7028999316894499, 32.43524104627659 ), this.scene);
|
|
camera.rotation = new BABYLON.Vector3(-0.16070762395712468, 2.4005702973639886, 0);
|
|
camera.fov = 1.5;
|
|
// camera.rotation = new BABYLON.Vector3(0.1, 0,0);
|
|
// camera.lowerRadiusLimit = 6;
|
|
// camera.upperRadiusLimit = 20;
|
|
// This attaches the camera to the canvas
|
|
camera.attachControl(this.canvasEl, true);
|
|
|
|
let radius = 60;
|
|
for(let i in this.images) {
|
|
// create the Meshes with the images in the scene
|
|
this.images[i].makeMesh(this.scene);
|
|
}
|
|
|
|
|
|
this.lastRenderTime = window.performance.now();
|
|
this.t = 0; // playback timer
|
|
return this.scene;
|
|
}
|
|
}
|
|
|
|
class ParadeImage {
|
|
constructor(info, position) {
|
|
this.info = info;
|
|
this.weight = info['weight'];
|
|
this.position = position; // index in list
|
|
this.target_position = position;
|
|
this.target_position_time = 0;
|
|
}
|
|
|
|
getImageUrl() {
|
|
return 'dataset/small/'+ this.info['image'];
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param {int} new_position new position in parade
|
|
* @param {float} time_complete time at which it should have transitioned to this position
|
|
*/
|
|
setPosition(new_position, time_complete) {
|
|
if(this.target_position == new_position) return;
|
|
// console.log('changepos', this.target_position, new_position);
|
|
this.target_position = new_position;
|
|
this.target_position_time = time_complete;
|
|
}
|
|
|
|
makeMesh(scene) {
|
|
var planeOptions = {
|
|
// TODO: should size be dynamic?
|
|
height: 5.4762,
|
|
width: 7.3967,
|
|
sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
|
|
};
|
|
|
|
this.mesh = BABYLON.MeshBuilder.CreatePlane("plane", planeOptions, scene);
|
|
|
|
var mat = new BABYLON.StandardMaterial("m", scene);
|
|
|
|
mat.diffuseTexture = new BABYLON.Texture(this.getImageUrl(), scene);
|
|
mat.roughness = 1;
|
|
mat.emissiveColor = new BABYLON.Color3.White();
|
|
this.mesh.material = mat;
|
|
|
|
this.mesh.rotation.y = Math.PI; // rotate 180 deg. to avoid looking at backside from the start.
|
|
|
|
}
|
|
|
|
updateMeshPosition(t, dt, config){
|
|
// first see how we are with our moving positions:
|
|
|
|
if(dt < 1) {
|
|
// don't change positions, because we're paused
|
|
}
|
|
else if(Math.abs(this.position - this.target_position) > 0.00001) {
|
|
if(t > this.target_position_time) {
|
|
console.error('were we too slow?');
|
|
this.position = this.target_position;
|
|
}
|
|
|
|
let tdiff = this.target_position_time - t;
|
|
if(tdiff != 0) {
|
|
if(tdiff < dt) {
|
|
// never place it too far...
|
|
this.position = this.target_position;
|
|
} else {
|
|
this.position += (this.target_position - this.position) / (tdiff/dt);
|
|
// console.log(this.position, this.target_position_time, t);
|
|
}
|
|
}
|
|
|
|
} else{
|
|
// it's practically the same, but set it to avoid any rounding uglyness.
|
|
this.position = this.target_position;
|
|
}
|
|
|
|
let p = t; //0; // if 0, disable movement for a bit.
|
|
p *= config.speedFactor/1000
|
|
p -= config.startOffset/config.speedFactor; // start offset ( milliseconds)
|
|
p -= config.distanceFactor * this.position / 1000;
|
|
|
|
// factors determine scale of animation
|
|
let target_x = Math.sin(2*p)*config.shapeWidth;
|
|
let target_z = Math.sin(p)*config.shapeHeight;
|
|
this.mesh.position.x = target_x;
|
|
this.mesh.position.z = target_z;
|
|
}
|
|
|
|
|
|
}
|