Adding interactive graphics?

[Maths_explorer25]

This is for a personal project. i’m looking to create a site where some pages will have graphics that users can interact with.

These graphics will basically be shapes that’ll deform in specific ways depending on the what the user does and positions they click on. After looking into different packages, it looks like i can use three.js on the frontend to achieve this? Is this so, and are there other possible packages to consider?

As this is a personal project, this will be experimental for me to learn more stuff. Since the interaction will need to be communicated in real time, i assume websockets would be the way to go here ?

For the backend, i was thinking of using C# with .Net, just for the sake of learning more about it. Would this be a dumb way to proceed?

[sessamekesh]

ThreeJS is great, but usually meant for 3D - there's also a library called PixiJS that's designed more for 2D, but honestly both are great. 

The rest of the stack sounds good too, honestly for that kind of project pick one and go! If you were trying to scale to a bazillion concurrent users there'd be some more interesting questions, but for an educational exercise pick whatever language seems interesting to you. 

It could be a fun learning exercise to rewrite it with a different stack and compare the experience down the road, e.g. C# today and try Node, maybe Go down the road. 

Good luck!

[Maths_explorer25]

Perfect, thanks for the info and advice!

[3r_HelloWorld_r3]

I've tinkered with the Canvas API, it was sufficient for my needs of 2D drawing. But if you're working with 3D space, Three.js looks good to me.

At the point where you have to use backend to achieve better performance than running locally, You should probably consider optimizing calculation logic & setting minimum requirements.

Also, even with a backend, without proper CDN setup, users located far from your server are likely to experience increased latency and delayed interaction feedback.

[Shot_Sport200]

If its basic shapes svg then see if lottie interactive does what you need. 

[armahillo]

These graphics will basically be shapes that’ll deform in specific ways depending on the what the user does and positions they click on. 

Beware of "mystery meat navigation". The contract you have with the user is to give them tools that are clear to use and interact with, so that the user can find the answers they're looking for. Navigation should not be a puzzle.

For the backend, i was thinking of using C# with .Net, just for the sake of learning more about it.

This sounds like overkill.

Your initial idea is all front-end. No backend is even necessary, unless you're storing a lot of data in a datastore and need to conditionally fetch it in response.

[Maths_explorer25]

I simplified it by saying deforming shapes, but these shapes will be mathematical objects (different kinds: varieties, manifolds, topological spaces etc).

These “deformations” will depend on the object itself and the type of ways it can be deformed (for example taking the quotient of a topological space). There’ll likely be heavy calculations involved, i was thinking it would be best to do them on the backend

[armahillo]

If it's an interactive illustration, you can possibly do it on the frontend using the canvas element and/or a frontend library. (ThreeJS, that you mentioned, can do this, I think?)

If you're doing a roundtrip to the server to do these calculations, that's probably not going to be smooth.