Hyperbolica Web Apps?

[AdrianAntico]

Random question (not an issue). Have you considered creating a web app layout that conforms to hyperbolic geometry? Or even web components that have the property? I was thinking it would be super cool and I'd be able to squeeze so much more inside the app. Sorry if this question is inappropriate here. Not sure how else to get a hold of you to ask.

[ErikOnBike]

Hi Adrian. I have to admit, had to look up Hyperbolic Web Apps. Not sure if I fully understand the effect/consequence of such geometry/layout. Do you have any software examples you can refer to? One idea that pops to mind is something a former colleague came up with for an app we were building: having an object centred in your UI with all directly related objects neatly positioned around it. Pressing the center object opens a kind of 'edit' view on the object. On the 'main' view the user can drag a related item into the center, replacing the center element (and now showing the directly related items of this newly centred object). This UI gives a generic navigation mechanism as a graph in which you can move around. Like a sphere on which all (direct) object relations are shown nearby. Not sure if I explained it well enough. Don't have a working example to show unfortunately. Interested to hear/see what your ideas are.

[AdrianAntico]

@ErikOnBike thanks for getting back to me!!

"One idea that pops to mind is something a former colleague came up with for an app we were building: having an object centred in your UI with all directly related objects neatly positioned around it. Pressing the center object opens a kind of 'edit' view on the object. On the 'main' view the user can drag a related item into the center, replacing the center element (and now showing the directly related items of this newly centred object). This UI gives a generic navigation mechanism as a graph in which you can move around. Like a sphere on which all (direct) object relations are shown nearby. Not sure if I explained it well enough."

I believe I'm thinking of something similar. The two main ideas are 1. creating a poincare disc type of component for storing action buttons and 2. having an entire webpage based on a poincare disc properties (probably much harder).

For the component (which I believe is the easier of the two) the main idea would be to enable having more buttons exposed vs requiring a user to go through a series of clicks to get to a spot on the page to select the buttons of choice. Secondly, it would be super cool and I don't think anyone has done something like that yet (or at least I haven't come across any). The poincare disc would act similarly to those wheel spinners inside cars do to adjust the navigation menu. Each square could hold 1 or more buttons and like you said the surrounding space could be where I put the most related set of buttons. Holonomy would probably be an issue but I'm guessing that can be corrected (like those car rims that don't spin when a car is in motion).

Edit: this webpage has a mechanism for spinning the poincare disc and the concept component could perhaps behave similarly? http://www.malinc.se/noneuclidean/en/poincaretiling.php

[ErikOnBike]

Hi @AdrianAntico. Interesting idea definitely, surpasses the idea I mentioned ;-). I like it! :-) An important question is: do you realise that CodeParadise is tightly connected to the Smalltalk (and currently only Pharo) development environment? It does not create standalone Web Components which you can reuse in other environments. If you start to develop using CodeParadise you can incorporate other WebComponents, but it would require some integration. I did this for ChartJS and Shoelace for example. CodeParadise aims to remove the need to write Javascript code and be able to program in Smalltalk both on the server as well as in the client.

If you are okay with developing in Smalltalk: What is the interaction you envision with such a poincare disc? Like would it drag anywhere you drag within the poincare? Or would it have special handles (like the two white dots in the example you provided)? Any other form? Would there be keyboard support in some way? Use cursor keys to rotate across the two axis?

[AdrianAntico]

Hi @ErikOnBike,

I did notice the usage of SmallTalk and I suspect the constraints will be too many for a prototype at this point, at least in light of the stack I'm currently using. I was thinking of reverse engineering that web page as a starting point but I definitely wanted to see if you had already done something similar. Hyperbolica was the inspiration for all this so I had to ask :) Fantastic game by the way!

"What is the interaction you envision with such a poincare disc? Like would it drag anywhere you drag within the poincare? Or would it have special handles (like the two white dots in the example you provided)? Any other form? Would there be keyboard support in some way? Use cursor keys to rotate across the two axis?"

Great questions. I would probably start with a draggable surface and see how that plays out. For arrow keys, perhaps the use of arrows could provide simple movement from one tile to another connected tile.

I think the holonomy effect would be the first issue to resolve. My initial thoughts would be to have the buttons within the tiles do the adjusting instead of trying to correct the surface, but I could be wrong. If the buttons were circular, I could probably just rotate the text label and not the button itself. Maybe 100% of the rotation occurs once a button is front and center, but I'm guessing there could be some math to distribute the corrected amounts over a series of tiles (relative to center).

[ErikOnBike]

Hi @AdrianAntico. I have to think about whether I want to invest in such a component at the moment. There are many things I want to add to CodeParadise. And time is limited. Not sure if this would be high up on priority. Since it matches this other idea I mentioned, it does tickle my curiosity, but not sure yet. I'm keeping it open for now. Please inform me if you do continu on another path with this idea. I'll try to report back if I have anything relevant to add. Don't hesitate to add some thoughts and ideas!

[AdrianAntico]

Hi @ErikOnBike sounds good. I think reverse engineering the poincare disc on that one website will be the fastest route to getting something put together that I can use. I'll definitely keep you posted about any progress. Thanks for hearing me out!

[astares]

@AdrianAntico Did you see https://github.com/ItsNickBarry/hyperbolic-canvas?

[AdrianAntico]

@astares I didn't see that! Thanks for sharing.

[ErikOnBike]

@AdrianAntico :-) please thank @astares since he put the link there! :-)

[ErikOnBike]

@AdrianAntico okay if I close this as a current issue? I'm okay with keeping it open if you want to continu discussing this idea as a component within CodeParadise. If you're using another idea/framework/technology I'm eager to learn, since (as said) a similar idea for navigation has been on my mind.

[AdrianAntico]

@ErikOnBike feel free to close it :) I can still shoot you a note over here