July 9, 2018
Code & Design
Single-User, On-Gaze, Dynamic Album Preview:
Single-User, On-Gaze, Dynamic Album Preview: https://musicworldtest2.neocities.org/
which…
Experiment sprint number three is now underway as the first intra-week sprint. For this sprint I once again elected to extend the previous sprint since I finished just short of the target/goal delivery.
This time around, our goal is to finally deliver a simple immersive artist album discography that’s controlled by a headset gaze.
Starting again from our previous sprint, a small & seemingly insignificant bug unexpectedly popped out towards the end. Specifically, clicking an Album Button successfully changed the Album Environment & Album Track; however, what it did not do is update size of the new album selected. No matter what album we clicked, only the first album remained larger than the rest — this could be really confusing to users as it’s no longer clear that a new album preview is now playing.
But the really annoying thing here is that the logic is the exact same for changing all three state properties: environment, track & selected album. When a new box is selected, emit a state change that in turn updates attributes on three components — so why was the selected album property the only updated state property not rendering???
Unfortunately I took a disproportionate amount of time (close to ~90 mins) to answer the previous question, but, fortunately, the answer illuminated low-level A-Frame knowledge that in retrospect I’m glad I took the time to learn. A-Frame’s default attribute updating function, setAttribute(), is the right tool for the job 99% of the time; as luck would have it, updating the scale of a component through re-setting attributes is one of the few 1% instances where setAttribute() is the wrong tool of choice.
For a handful of core attributes (position, rotation, scale & visibility), A-Frame demands accessing the lower-level Three.JS methods for performance reasons. An applied example of the previous is as follows:
document.querySelector(“#albumThree”).object3D.scale.set(.75, .75, .75);
And off I went to test. Now when an Album Box is clicked, all three property changes are appropriately reflected — the new active Album Box successfully resizes!
With close to an hour left, it’s looking like I might ship our intended goal (for the first time in this series…). With our active album box now successfully re-scaling, the only bug left is switching the event-triggers on our album box buttons from “clicking” to “gazing” — the mixed reality equivalent of “hover.”
A quick Google search led to a neat forum discussing the different trigger methods that are native to Javascript; within those methods I found the declaration that made the most sense: “mouseenter.”
this.el.addEventListener(‘mouseenter’, function (evt) {
var target = String(‘#’ + el.id);
if (el.id == “albumOne”) {
console.log(“Album one was clicked”);
... rest of state changes when Album one is clicked
And that is all she wrote — finished early of our intended goal for once. As I was looking at the final product, found here, https://musicworldtest2.neocities.org/ , an idea bubbled up that I’d like to make the focus of the next sprint: I’d like to add another layer of immersive-ness to the album discography by implementing nothing short of a music visualizer.
On to WebVR Experiment 4!
New Public Components & Technologies Used:
None / ninguno / niel
