r/diversions
1
0
Fork 0
Code Pull requests Releases Activity

some styling changes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View file

Binary file not shown.

40
index.html
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>

1891
interview/interview-with-ellen-NL.vtt Normal file
View file

File diff suppressed because it is too large Load diff

2725
interview/interview-with-ellen_v3.mp3.txt Normal file
View file

File diff suppressed because it is too large Load diff

2728
interview/interview-with-ellen_v3.mp3.vtt Normal file
View file

File diff suppressed because it is too large Load diff

60
parade.js
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;