You took the UX to a whole new level. Good one.
I disagree, since it took me a few to realize the sliders were even moveable, and moving them at an angle is a PITA. It looks just fine without the rotation. Function > form, please.
You can fix it using your browser’s inspector to disable the transforms in the TelescopeExplorable__controls CSS class.
I’d say you’re right when it comes to a real-world application, but for a demonstration/PoC, I was quite impressed, even if a linear transformation isn’t that foreign at first.
It seems to be just a bit of fun and made me say, “Wow!” It would seem appropriate to be positive about this rather than complain.
I find @icefox disagreement explained and well justified.
You might not like the negativity of the comment, nevertheless it’s pretty subjective and probably helpful for the author of the page.
This is definitely something I was worried about when I skewed the controls, which is why I limited it to a 6 degree rotation. Thanks for the feedback - sometimes it’s a balancing act between whimsy and usable, and I tend to agree with you that usability is non-negotiable.
What were you looking for with the sliders - an initial focus state?
Thanks for taking my griping gracefully, sorry if I was overly grumpy. I should maybe just not post first thing in the morning. :-)
With the sliders, it was more the fact that they were rotated at all that made my mind skim over the fact that they were real, and the fact that they’re in a non-platform color/style didn’t really help. I just automatically assumed it was a static image, ‘cause it countered expectations. It just took a while for my coffee-deprived brain to process “wait, you CAN rotate UI elements, can’t you?” and try it.
no worries! I always appreciate feedback. And that makes total sense about the rotation and custom styles - I’ll keep that in mind for the future. Thanks!
When I set the width and height sliders lower than the preset, I get panning instead of zooming. What’s up with that?
It’s the alignment value for preserveAspectRatio. Basically, there are a bunch of different behaviours* for when the aspect ratios don’t match, and this is using the default. It does scale as expected if you set width and height to the same value.
(*by “a bunch” I mean three each for width and height)
yep! What @tentacloids said, and I wanted to drop a link to the MDN docs:
(edit: just saw that it was linked to already! 🙌)
The default value is meet, which scales the svg based on three requirements:
Still figuring out a way to explain this in the guide without confusing more than helping.
I like this, it’s a really nice way to express this concept. I love the illustrations on this too — they’re even SVG :) What did you use to draw them with?
thanks! The person is from Pablo Stanley’s Humaaans and I drew the telescope in Figma
Seeing the viewport stuff made me think a lot about how cameras work in a lot of game engines. I wonder if browsers are performant with culling in SVGs (if so, would probably be nice for simulations of stuff like tabletop board games)
This is exactly it, the math is identical to what game engines do. Look up “projection matrix” for details.
As for culling, I don’t know, but if the SVG’s are rendered with GPU’s rather than something CPU-side like Cairo, the answer is almost certainly “yes”.
It’s all Cairo/Skia for now (until Pathfinder gets integrated into WebRender into Firefox)
Looks like Skia can use a GPU backend for rendering, but I don’t know anything about it beyond that.
Does switching to this page’s tab bring Firefox (Nightly 72.0a1 (2019-11-25) (64-bit)) to a crawl for anyone else?
oh that’s strange! I’m seeing an issue on Firefox as well - thanks for flagging! I’ll have to look into it, although it smells like a rabbit hole
As a data point: works fine for me on FF 69.0.1 (Linux)
Nope, fine here. (linux)
Something weird is happening with this page for me - FF 70.0.1. The sliders taking seconds to respond when moved.
Cool to get on here and see the top story by an old coworker :)
Who you calling old?
Hope all is good with you!!