some styling changes

This commit is contained in:
Cristina Cochior 2020-06-24 23:07:41 +02:00
parent bc5f6c6e8a
commit 8a3011587d
6 changed files with 7400 additions and 44 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

View File

@ -2,7 +2,7 @@
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Parade</title> <title>The Weight of Things</title>
<style media="screen"> <style media="screen">
html,body{ html,body{
margin: 0; margin: 0;
@ -46,14 +46,16 @@
#annotation{ #annotation{
position: absolute; position: absolute;
top:0; top:1em;
left:0; left:1em;
padding: 5px; padding: 5px;
background:white; /* background:white; */
width: 25%;
font-size: 0.7em;
} }
#annotation img{ #annotation img{
height: 300px; width: 100%;
} }
#annotation .description{ #annotation .description{
@ -95,16 +97,26 @@
display:block; display:block;
} }
#nextButton{ #nextButton{
background: transparent;
border: 0.5px solid black;
font-size: 0.7em;
border-radius: 5px;
padding: 0.5em;
margin: 1em 0;
} }
body.finished #nextButton{ body.finished #nextButton{
display:none; display:none;
} }
h4 {
font-size: 1.4em;
}
</style> </style>
<!-- Will automatically be injected if needed: <script src=https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js></script> --> <!-- Will automatically be injected if needed: <script src=https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js></script> -->
@ -112,7 +124,7 @@
</head> </head>
<body class='paused'> <body class='paused'>
<canvas id="renderCanvas" touch-action="none"></canvas> <!--touch-action="none" for best results from PEP--> <canvas id="renderCanvas" touch-action="none"></canvas> <!--touch-action="none" for best results from PEP-->
<div id='annotation'> <div id='annotation'>
<template id="annotationContentTemplate"> <template id="annotationContentTemplate">
<img class='img'> <img class='img'>
@ -130,16 +142,16 @@
<!-- button is needed because audio cannot auto-start without a user clicking on the page --> <!-- button is needed because audio cannot auto-start without a user clicking on the page -->
<input type='button' value='Resume interview' id='resumeButton'> <input type='button' value='Resume interview' id='resumeButton'>
<audio id='interview' <audio id='interview'
src="/interview/interview-with-ellen.mp3"> src="/the-weight-of-things/interview/interview-with-ellen.mp3">
<track kind="captions" <track kind="captions"
srclang="en" srclang="en"
src="/interview/interview-with-ellen_v3.mp3.vtt"/> src="/the-weight-of-things/interview/interview-with-ellen_v3.mp3.vtt"/>
<track default kind="captions" <track default kind="captions"
srclang="nl" srclang="nl"
src="/interview/interview-with-ellen_v3.mp3 copy.vtt"/> src="/the-weight-of-things/interview/interview-with-ellen-NL.vtt"/>
</audio> </audio>
</div> </div>
@ -150,7 +162,7 @@
</div> </div>
<div id='workmsg'> <div id='workmsg'>
<h2>Annotate to listen...</h2> <h2>Keep the parade going...</h2>
</div> </div>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -20,7 +20,7 @@ performance.now = (function() {
performance.mozNow || performance.mozNow ||
performance.msNow || performance.msNow ||
performance.oNow || performance.oNow ||
performance.webkitNow || performance.webkitNow ||
Date.now /*none found - fallback to browser default */ Date.now /*none found - fallback to browser default */
})(); })();
@ -76,7 +76,7 @@ class Parade {
// console.log('pos', , pos); // console.log('pos', , pos);
let img = new ParadeImage(images[i], pos); let img = new ParadeImage(images[i], pos);
this.images.push(img); this.images.push(img);
// for testing: // for testing:
// if(this.images.length > 5) // if(this.images.length > 5)
// break; // break;
@ -85,7 +85,7 @@ class Parade {
this.setupSubtitles(); this.setupSubtitles();
this.setupSorter(); this.setupSorter();
this.restoreTime(); this.restoreTime();
// Watch for browser/canvas resize events // Watch for browser/canvas resize events
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
this.engine.resize(); this.engine.resize();
@ -124,7 +124,7 @@ class Parade {
}); });
} }
for(let track of this.audioEl.textTracks){ for(let track of this.audioEl.textTracks){
// by default only one (or none) is set to showing. // by default only one (or none) is set to showing.
// for some reason setting it on trackEl doesn't work, while this does the trick. // for some reason setting it on trackEl doesn't work, while this does the trick.
track.mode = 'showing'; track.mode = 'showing';
} }
@ -140,7 +140,7 @@ class Parade {
updateTimestring() { updateTimestring() {
let now = this.audioEl.currentTime; let now = this.audioEl.currentTime;
let duration = this.audioEl.duration; let duration = this.audioEl.duration;
let timestring = String(Math.floor(now/60)).padStart(2, '0') + ":" let timestring = String(Math.floor(now/60)).padStart(2, '0') + ":"
+ 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') + ":"
@ -188,8 +188,8 @@ class Parade {
for (let index = 0; index < this.images.length; index++) { for (let index = 0; index < this.images.length; index++) {
this.imagesToSort[index] = index; this.imagesToSort[index] = index;
} }
} }
let nextButton = document.getElementById('nextButton'); let nextButton = document.getElementById('nextButton');
nextButton.addEventListener('click', this.nextSorterImage.bind(this)); nextButton.addEventListener('click', this.nextSorterImage.bind(this));
@ -233,10 +233,10 @@ class Parade {
document.body.classList.remove('finished'); document.body.classList.remove('finished');
this.audioEl.controls = false; this.audioEl.controls = false;
} }
// pick random image // pick random image
this.imageIdToSort = this.imagesToSort[Math.floor(Math.random()*this.imagesToSort.length)]; this.imageIdToSort = this.imagesToSort[Math.floor(Math.random()*this.imagesToSort.length)];
this.imageToSort = this.images[this.imageIdToSort]; this.imageToSort = this.images[this.imageIdToSort];
let clone = this.sorterTemplate.content.cloneNode(true); let clone = this.sorterTemplate.content.cloneNode(true);
let imgEl = clone.querySelector(".img"); let imgEl = clone.querySelector(".img");
@ -283,7 +283,7 @@ class Parade {
new_position, 0, new_position, 0,
this.imagePositions.splice(old_position, 1)[0] this.imagePositions.splice(old_position, 1)[0]
); );
// update positions of image objects // update positions of image objects
for(let i in this.images) { for(let i in this.images) {
i = parseInt(i); i = parseInt(i);
@ -365,23 +365,23 @@ class Parade {
this.t += dt; this.t += dt;
} }
this.lastRenderTime = n; // also increment when paused; this.lastRenderTime = n; // also increment when paused;
// console.log(maxStepSize); // console.log(maxStepSize);
for(let i of this.images){ for(let i of this.images){
i.updateMeshPosition(this.t, dt, this.config); i.updateMeshPosition(this.t, dt, this.config);
} }
} }
createScene() { createScene() {
// This creates a basic Babylon Scene object // This creates a basic Babylon Scene object
this.scene = new BABYLON.Scene(this.engine); 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.Color3(98,44,246); // color RGB
// this.scene.clearColor = new BABYLON.Color4(0.6, 0.6, 0.,0); // transparent - RGBA // this.scene.clearColor = new BABYLON.Color4(0.6, 0.6, 0.,0); // transparent - RGBA
this.scene.fogMode = BABYLON.Scene.FOGMODE_EXP; this.scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
this.scene.fogColor = this.scene.clearColor; this.scene.fogColor = this.scene.clearColor;
this.scene.fogDensity = 0.002; this.scene.fogDensity = 0.000;
// let camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3( 0.0, 0.0, 120.86337575312979), this.scene); // 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.rotation = new BABYLON.Vector3(0, Math.PI, 0);
@ -396,8 +396,8 @@ class Parade {
// this.spectatorCamera.upperRadiusLimit = 20; // this.spectatorCamera.upperRadiusLimit = 20;
// This attaches the camera to the canvas // This attaches the camera to the canvas
this.spectatorCamera.attachControl(this.canvasEl, true); this.spectatorCamera.attachControl(this.canvasEl, true);
// CAM 2: follow/track the image when we're editing its weight. // CAM 2: follow/track the image when we're editing its weight.
// Parameters: name, position, scene // Parameters: name, position, scene
this.imgCamera = new BABYLON.ArcRotateCamera("FollowCam", 20, 20, 10, new BABYLON.Vector3(0, 0, 0), this.scene); this.imgCamera = new BABYLON.ArcRotateCamera("FollowCam", 20, 20, 10, new BABYLON.Vector3(0, 0, 0), this.scene);
@ -449,7 +449,7 @@ class ParadeImage {
} }
/** /**
* *
* @param {int} new_position new position in parade * @param {int} new_position new position in parade
* @param {float} time_complete time at which it should have transitioned to this position * @param {float} time_complete time at which it should have transitioned to this position
*/ */
@ -476,11 +476,11 @@ class ParadeImage {
width: this.width/100, width: this.width/100,
sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
}; };
let imagePlane = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene); let imagePlane = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene);
var imageMat = new BABYLON.StandardMaterial("m", scene); var imageMat = new BABYLON.StandardMaterial("m", scene);
imageMat.diffuseTexture = new BABYLON.Texture(self.getImageUrl(), scene); imageMat.diffuseTexture = new BABYLON.Texture(self.getImageUrl(), scene);
imageMat.roughness = 1; imageMat.roughness = 1;
imageMat.emissiveColor = new BABYLON.Color3.White(); imageMat.emissiveColor = new BABYLON.Color3.White();
@ -488,7 +488,7 @@ class ParadeImage {
imagePlane.parent = self.mesh; imagePlane.parent = self.mesh;
} }
img.src = this.getImageUrl(); img.src = this.getImageUrl();
// text https://www.babylonjs-playground.com/#TMHF80 // text https://www.babylonjs-playground.com/#TMHF80
// TODO: cleanup this mess of the dynamic texture: // TODO: cleanup this mess of the dynamic texture:
@ -510,19 +510,19 @@ class ParadeImage {
ctx.fillStyle = config['textColor']; ctx.fillStyle = config['textColor'];
ctx.fillText(text, 0, 50, maxWidth); ctx.fillText(text, 0, 50, maxWidth);
dynamicTexture.update(); dynamicTexture.update();
var mat = new BABYLON.StandardMaterial("mat", scene); var mat = new BABYLON.StandardMaterial("mat", scene);
mat.diffuseTexture = dynamicTexture; mat.diffuseTexture = dynamicTexture;
mat.opacityTexture = dynamicTexture; // smoother transparency: https://www.html5gamedevs.com/topic/19647-quality-of-dynamictexture-text-with-transparent-background/?do=findComment&comment=111383 mat.opacityTexture = dynamicTexture; // smoother transparency: https://www.html5gamedevs.com/topic/19647-quality-of-dynamictexture-text-with-transparent-background/?do=findComment&comment=111383
mat.roughness = 1; mat.roughness = 1;
mat.emissiveColor = new BABYLON.Color3.White(); mat.emissiveColor = new BABYLON.Color3.White();
var textPlane = BABYLON.MeshBuilder.CreatePlane("text", {width:planeWidth, height:planeHeight, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
textPlane.material = mat;
textPlane.parent = this.mesh;
textPlane.position.y = -4.3; // text sits below image
// var textPlane = BABYLON.MeshBuilder.CreatePlane("text", {width:planeWidth, height:planeHeight, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
// textPlane.material = mat;
// textPlane.parent = this.mesh;
// textPlane.position.y = -4.3;
this.mesh.rotation.y = Math.PI; // rotate 180 deg. to avoid looking at backside from the start. this.mesh.rotation.y = Math.PI; // rotate 180 deg. to avoid looking at backside from the start.
@ -560,7 +560,7 @@ class ParadeImage {
p *= config.speedFactor/1000 p *= config.speedFactor/1000
p -= config.startOffset/config.speedFactor; // start offset ( milliseconds) p -= config.startOffset/config.speedFactor; // start offset ( milliseconds)
p -= config.distanceFactor * this.position / 1000; p -= config.distanceFactor * this.position / 1000;
// factors determine scale of animation // factors determine scale of animation
let target_x = Math.sin(2*p)*config.shapeWidth; let target_x = Math.sin(2*p)*config.shapeWidth;
let target_z = Math.sin(p)*config.shapeHeight; let target_z = Math.sin(p)*config.shapeHeight;