Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want to create a interactive 3D Human through which we can take inputs by clicking on the body parts.
Is it possible to create it using JavaScript, AngularJS or Three.js
Basically anything is possible with JavaScript.
Going with three.js seems to be the best solution since it's a 3D library.
So the answer to your question would be yes. Will it be easy? Probably not.
https://threejs.org/examples/webgl_morphtargets_human.html
https://www.kineman.com/
KineMan is the ultimate web application for learning and demonstrating human joint behavior, and for creating complex human poses.
Unlike any other online human anatomy/kinesiology model or mannequin app, KineMan allows YOU to move the joints: simply, precisely, and realistically. You can select from over 100 joints (and 170 degrees of freedom), and move them simply by clicking & dragging on the skeleton. You’ll observe biomechanically-realistic behaviors, owing to movement parameters (like ranges of motion) derived from scientific sources.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm looking to create a Conway's Game of Life-type dynamic image that cycles through these general patterns (below).
Is it possible to create these types with Javascript? Or am I better off looking to a 3D application and cycling through an array of pre-define images?
Looking at your examples, I believe you could easily write Javascript code to generate these images. Personally, I would look to generating an SVG. You can do that without a library, but you may find a library like SVG.js helpful to play with.
I would look at the images as a 3x3 grid of your circles that you effectively randomly turn on or off (according to your desired logic). Then you could easily generate the "connector" lines between them.
After you have your 3x3 grid looking how you want it, you could apply a 45° rotation to the group and you are done.
With the above complete, you could then get the svg content and submit it to a server, save it to a file, etc.
If you have any experience with svg / js, you will likely be able to get this done very quickly.
Good luck to you!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I need to make a really complicated diagram for a website, in which the hierarchy will be a bit messy: arrows will go up and down, sometimes an element will point to several others, and sometimes there will be several elements pointing to the same one. I have found this method, but it doesn't allow more than one parent for an element and therefore won't do the trick in this case.
It has to be done in HTML/CSS, because my intention is to add some Javascript to change the content of the blocks dinamically.
This is an example of the level of complexity I need to achieve:
You might want to take a look at this
http://thecodeplayer.com/walkthrough/css3-family-tree
Another to look for is SpaceTree example by "Nicolas Garcia Belmonte" but not a pure CSS solution. It is compatible with IE and most of browsers. Definitely worth a try.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I love the way the sliders on this web site work. How in the world can I make ones that look and act like them? In particular, I love that everything they are connected to update on the fly. I love that they are non-linear. They have a large touch input grab zone but a small slider icon. And I love that the don't engage if a mobile users touches them but then slides their finger off. It does a great job of preventing accidental touches.
https://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html
I tried using a JS library called ionRangeSlider, but it doesn't feel as slick as the NYT ones. And it doesn't prevent accidental touch inputs.
Any help would be very appreciated.
You could probably achieve something similar using a traditional slider coupled with chartJS.
If you're looking for a more exact technology stack, builtwith.com may help:
https://builtwith.com/?https%3a%2f%2fwww.nytimes.com%2finteractive%2f2014%2fupshot%2fbuy-rent-calculator.html
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I have a requirement to build a website where the user can choose a design from a standard template and a number of optional parts. So for example, it could be selecting an outfit, where there is a fixed template image of a person, and the user selects different colour trousers, shirts, socks etc from a scrolling list of images. When the user selects a particular item from the list, the image appears on the template giving an indication of the overall look.
It doesn't have to be too fancy with any moving images or transitions, but just the ability to overlay fixed images onto the template.
What would be my best choice of technology and way of going about it? Standard HTML? Css? Javascript? Something more server orientated such as JSP? Would appreciate any input.
You can solve it in many ways, it mostly depends on your requirements and what you're comfortable with doing.
Personally I would have done it with plain javascript based on the description you gave.
Requirements:
Change images during runtime.
JavaScript does a good job with this.
Predefined coordinates for where the overlay needs to be positioned.
Some type of storage for the coordinates, simplest possible would be hardcoded values in your script.
Ability to position the image as an overlay at said coordinates.
CSS with position: absolute; can be used for this.
Image stacking and index logic.
Can be done with JavaScript.
This is the simplest solution to the problem given. If you have more complex needs like zooming or resizing, you may want to check out <canvas>.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I im currently in the making of a mobile application (prototype), which need to created in html, css and js. I made a low-fidelity prototype with paper cards, but now i need to create it as a website.
I was thinking about setting in a picture of a smartphone (iphone/android) and then edit the content inside that screen to point out that it should be run on a smartphone.
So if you emagine a i picture of a smartphone, and then inside the screen i wanne create some kind of box where all my content should go, but i am not quite sure what the best way to do that is. Should i use a canvas, a iframe or something different?
If there are any other inputs you are more than welcome to fire them at me.
I created a video to see how a user, unknown to the project, would interact with my low fidelity prototype, and thats what i am building my html prototype from.
The video can be found here if it is to any interest.
https://www.youtube.com/watch?v=TVXhEwGYYfg
(don't mind the text, it is in danish and just describes what the user is dooing)
Hope you can give me a hand to get startet.
Regards,
Nissen, Michael
Sounds like what you need is to start with reading something like this Introduction to Mobile Prototyping with HTML, CSS and JavaScript