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

metadata shown underneeth image

Browse source
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 shapeWidth: 100, // 8 shape of animation: width
shapeHeight: 1300, // 8 shape of animation: height; 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; 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 // polyfill
@ -282,6 +284,12 @@ class Parade {
this.changeSorterImage(); this.changeSorterImage();
} }
reset() {
// for use in terminal only. Quick way to test
localStorage.clear();
location.reload();
}
play() { play() {
// play audio for n seconds: // play audio for n seconds:
// extend timeout if it's already playing // extend timeout if it's already playing
@ -369,7 +377,7 @@ class Parade {
for(let i in this.images) { for(let i in this.images) {
// create the Meshes with the images in the scene // 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; this.target_position_time = time_complete;
} }
makeMesh(scene) { makeMesh(scene, config) {
this.mesh = new BABYLON.TransformNode();
var planeOptions = { var planeOptions = {
// TODO: should size be dynamic? // TODO: should size be dynamic?
height: 5.4762, height: 5.4762,
@ -411,14 +420,49 @@ class ParadeImage {
sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back 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.roughness = 1;
mat.emissiveColor = new BABYLON.Color3.White(); 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. this.mesh.rotation.y = Math.PI; // rotate 180 deg. to avoid looking at backside from the start.