diff --git a/parade.js b/parade.js index 79d24c6..71d90bc 100644 --- a/parade.js +++ b/parade.js @@ -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.