some styling changes
This commit is contained in:
parent
bc5f6c6e8a
commit
8a3011587d
6 changed files with 7400 additions and 44 deletions
BIN
.DS_Store
vendored
Normal file
BIN
.DS_Store
vendored
Normal file
Binary file not shown.
40
index.html
40
index.html
|
@ -2,7 +2,7 @@
|
|||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Parade</title>
|
||||
<title>The Weight of Things</title>
|
||||
<style media="screen">
|
||||
html,body{
|
||||
margin: 0;
|
||||
|
@ -46,14 +46,16 @@
|
|||
|
||||
#annotation{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
top:1em;
|
||||
left:1em;
|
||||
padding: 5px;
|
||||
background:white;
|
||||
/* background:white; */
|
||||
width: 25%;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
#annotation img{
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#annotation .description{
|
||||
|
@ -95,16 +97,26 @@
|
|||
display:block;
|
||||
}
|
||||
#nextButton{
|
||||
background: transparent;
|
||||
border: 0.5px solid black;
|
||||
font-size: 0.7em;
|
||||
border-radius: 5px;
|
||||
padding: 0.5em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
body.finished #nextButton{
|
||||
display:none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Will automatically be injected if needed: <script src=https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js></script> -->
|
||||
|
@ -112,7 +124,7 @@
|
|||
</head>
|
||||
<body class='paused'>
|
||||
<canvas id="renderCanvas" touch-action="none"></canvas> <!--touch-action="none" for best results from PEP-->
|
||||
|
||||
|
||||
<div id='annotation'>
|
||||
<template id="annotationContentTemplate">
|
||||
<img class='img'>
|
||||
|
@ -130,16 +142,16 @@
|
|||
<!-- button is needed because audio cannot auto-start without a user clicking on the page -->
|
||||
<input type='button' value='Resume interview' id='resumeButton'>
|
||||
|
||||
<audio id='interview'
|
||||
src="/interview/interview-with-ellen.mp3">
|
||||
|
||||
<audio id='interview'
|
||||
src="/the-weight-of-things/interview/interview-with-ellen.mp3">
|
||||
|
||||
<track kind="captions"
|
||||
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"
|
||||
srclang="nl"
|
||||
src="/interview/interview-with-ellen_v3.mp3 copy.vtt"/>
|
||||
|
||||
src="/the-weight-of-things/interview/interview-with-ellen-NL.vtt"/>
|
||||
|
||||
</audio>
|
||||
</div>
|
||||
|
||||
|
@ -150,7 +162,7 @@
|
|||
</div>
|
||||
|
||||
<div id='workmsg'>
|
||||
<h2>Annotate to listen...</h2>
|
||||
<h2>Keep the parade going...</h2>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
1891
interview/interview-with-ellen-NL.vtt
Normal file
1891
interview/interview-with-ellen-NL.vtt
Normal file
File diff suppressed because it is too large
Load diff
2725
interview/interview-with-ellen_v3.mp3.txt
Normal file
2725
interview/interview-with-ellen_v3.mp3.txt
Normal file
File diff suppressed because it is too large
Load diff
2728
interview/interview-with-ellen_v3.mp3.vtt
Normal file
2728
interview/interview-with-ellen_v3.mp3.vtt
Normal file
File diff suppressed because it is too large
Load diff
60
parade.js
60
parade.js
|
@ -20,7 +20,7 @@ performance.now = (function() {
|
|||
performance.mozNow ||
|
||||
performance.msNow ||
|
||||
performance.oNow ||
|
||||
performance.webkitNow ||
|
||||
performance.webkitNow ||
|
||||
Date.now /*none found - fallback to browser default */
|
||||
})();
|
||||
|
||||
|
@ -76,7 +76,7 @@ class Parade {
|
|||
// console.log('pos', , pos);
|
||||
let img = new ParadeImage(images[i], pos);
|
||||
this.images.push(img);
|
||||
|
||||
|
||||
// for testing:
|
||||
// if(this.images.length > 5)
|
||||
// break;
|
||||
|
@ -85,7 +85,7 @@ class Parade {
|
|||
this.setupSubtitles();
|
||||
this.setupSorter();
|
||||
this.restoreTime();
|
||||
|
||||
|
||||
// Watch for browser/canvas resize events
|
||||
window.addEventListener("resize", function () {
|
||||
this.engine.resize();
|
||||
|
@ -124,7 +124,7 @@ class Parade {
|
|||
});
|
||||
}
|
||||
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.
|
||||
track.mode = 'showing';
|
||||
}
|
||||
|
@ -140,7 +140,7 @@ class Parade {
|
|||
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') + ":"
|
||||
|
@ -188,8 +188,8 @@ class Parade {
|
|||
for (let index = 0; index < this.images.length; index++) {
|
||||
this.imagesToSort[index] = index;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let nextButton = document.getElementById('nextButton');
|
||||
nextButton.addEventListener('click', this.nextSorterImage.bind(this));
|
||||
|
||||
|
@ -233,10 +233,10 @@ class Parade {
|
|||
document.body.classList.remove('finished');
|
||||
this.audioEl.controls = false;
|
||||
}
|
||||
|
||||
|
||||
// pick random image
|
||||
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 imgEl = clone.querySelector(".img");
|
||||
|
@ -283,7 +283,7 @@ class Parade {
|
|||
new_position, 0,
|
||||
this.imagePositions.splice(old_position, 1)[0]
|
||||
);
|
||||
|
||||
|
||||
// update positions of image objects
|
||||
for(let i in this.images) {
|
||||
i = parseInt(i);
|
||||
|
@ -365,23 +365,23 @@ class Parade {
|
|||
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.Color3(98,44,246); // 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;
|
||||
this.scene.fogDensity = 0.000;
|
||||
|
||||
// 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);
|
||||
|
@ -396,8 +396,8 @@ class Parade {
|
|||
// this.spectatorCamera.upperRadiusLimit = 20;
|
||||
// This attaches the camera to the canvas
|
||||
this.spectatorCamera.attachControl(this.canvasEl, true);
|
||||
|
||||
|
||||
|
||||
|
||||
// CAM 2: follow/track the image when we're editing its weight.
|
||||
// Parameters: name, position, 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 {float} time_complete time at which it should have transitioned to this position
|
||||
*/
|
||||
|
@ -476,11 +476,11 @@ class ParadeImage {
|
|||
width: this.width/100,
|
||||
sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
|
||||
};
|
||||
|
||||
|
||||
let imagePlane = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene);
|
||||
|
||||
|
||||
var imageMat = new BABYLON.StandardMaterial("m", scene);
|
||||
|
||||
|
||||
imageMat.diffuseTexture = new BABYLON.Texture(self.getImageUrl(), scene);
|
||||
imageMat.roughness = 1;
|
||||
imageMat.emissiveColor = new BABYLON.Color3.White();
|
||||
|
@ -488,7 +488,7 @@ class ParadeImage {
|
|||
imagePlane.parent = self.mesh;
|
||||
}
|
||||
img.src = this.getImageUrl();
|
||||
|
||||
|
||||
|
||||
// text https://www.babylonjs-playground.com/#TMHF80
|
||||
// TODO: cleanup this mess of the dynamic texture:
|
||||
|
@ -510,19 +510,19 @@ class ParadeImage {
|
|||
ctx.fillStyle = config['textColor'];
|
||||
ctx.fillText(text, 0, 50, maxWidth);
|
||||
dynamicTexture.update();
|
||||
|
||||
|
||||
var mat = new BABYLON.StandardMaterial("mat", scene);
|
||||
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.roughness = 1;
|
||||
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.
|
||||
|
||||
|
@ -560,7 +560,7 @@ class ParadeImage {
|
|||
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;
|
||||
|
|
Loading…
Reference in a new issue