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

metadata shown underneeth image

This commit is contained in:
Ruben van de Ven 2020-06-19 17:45:46 +02:00
parent 67945cc32f
commit 1819b35404
1 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
parade.js
View File

@ -8,6 +8,8 @@ var config = {
shapeWidth: 100, // 8 shape of animation: width
shapeHeight: 1300, // 8 shape of animation: height;
playDuration: 16, // seconds. how long should audio play after dragging/pressing next. Something like audio duration / nr of images. Note that if everything is sorted interview will just continue;
textColor: "orange",
font: "bold 70px Arial",
}
// polyfill
@ -282,6 +284,12 @@ class Parade {
this.changeSorterImage();
}
reset() {
// for use in terminal only. Quick way to test
localStorage.clear();
location.reload();
}
play() {
// play audio for n seconds:
// extend timeout if it's already playing
@ -369,7 +377,7 @@ class Parade {
for(let i in this.images) {
// create the Meshes with the images in the scene
this.images[i].makeMesh(this.scene);
this.images[i].makeMesh(this.scene, this.config);
}
@ -403,7 +411,8 @@ class ParadeImage {
this.target_position_time = time_complete;
}
makeMesh(scene) {
makeMesh(scene, config) {
this.mesh = new BABYLON.TransformNode();
var planeOptions = {
// TODO: should size be dynamic?
height: 5.4762,
@ -411,14 +420,49 @@ class ParadeImage {
sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
};
this.mesh = BABYLON.MeshBuilder.CreatePlane("plane", planeOptions, scene);
let imagePlane = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene);
var mat = new BABYLON.StandardMaterial("m", scene);
var imageMat = new BABYLON.StandardMaterial("m", scene);
mat.diffuseTexture = new BABYLON.Texture(this.getImageUrl(), scene);
imageMat.diffuseTexture = new BABYLON.Texture(this.getImageUrl(), scene);
imageMat.roughness = 1;
imageMat.emissiveColor = new BABYLON.Color3.White();
imagePlane.material = imageMat;
imagePlane.parent = this.mesh;
// text https://www.babylonjs-playground.com/#TMHF80
// TODO: cleanup this mess of the dynamic texture:
let text = this.info['image'];
var temp = new BABYLON.DynamicTexture("DynamicTexture", 64, scene);
var tmpctx = temp.getContext();
let maxWidth = 1700; // at some point texture starts doing messy things.. let's avoid that by squeezing text.
tmpctx.font = config['font'];
var DTWidth = Math.min(tmpctx.measureText(text).width, maxWidth);
var planeHeight = 3;
var DTHeight = 256; //or set as wished
var ratio = planeHeight/DTHeight;
var planeWidth = DTWidth * ratio;
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", {width:DTWidth, height:DTHeight}, scene, false);
dynamicTexture.hasAlpha = true;
var ctx = dynamicTexture.getContext();
ctx.font = config['font'];
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();
this.mesh.material = mat;
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
this.mesh.rotation.y = Math.PI; // rotate 180 deg. to avoid looking at backside from the start.