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!
Related
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 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.
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 7 years ago.
Improve this question
I'd like to create a java-script image editor.
We have an ability to drag and drop multiple images to our editor and then with following properties,
Undo
Redo
Move upward position
Move backward position
Drag and Drop
Change background color
Finally create and save a single image with all our modifications.
I'd like to go with jquery/ prototype library to develop the same. But I'm not sure about my selection and want to know is there any other library to complete my requirement. Please suggest a better one if I'm wrong.
I think that the choice of a library to do your coding is not the case here. Use any you are comfortable with. I would only wonder how such editor should be made. If the requirements about the app will not change, you can easily create your editor using html and css or svg (raphael js, adobe snap js). If you consider adding further image processing in the future than canvas rendering is your way to go (example)
Also if you plan to add image resizing and rotating but need to support older browsers (like IE8 or IE7) you should use raphael with svg.
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've already built the animation part, used JS to control the in SVG element.
Now what I want to achieve is something like this:
I tried to use paths.getBoundingClientRect() to get the distance between viewport's border to the path's highest position, so I can make the whole background change when the peak reaches a certain position. (if (rect.top <= 100) {...})
But I don't know how to control irregularly shaped areas' attributes.
Any possible solution?
Thank you very much.
i have used http://d3js.org for that sort of thing. it is very good. It provides a simple library to help you draw the graphs you want using svg. I think the particular part you are looking for is called library.
This is the API call.
https://github.com/mbostock/d3/wiki/SVG-Shapes#area
Some links below to examples and code for using d3js
http://bl.ocks.org/mbostock/3894205
http://bl.ocks.org/mbostock/3883195
http://mbostock.github.io/d3/talk/20111018/area-gradient.html
http://bl.ocks.org/NPashaP/113f7fea0751fa1513e1
http://bl.ocks.org/mbostock/1667367
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 9 years ago.
Improve this question
I am looking to build a personal code playground. Basically I am looking to make 3 Code Mirror text areas for HTML, CSS and JS, Basically I am puzzled on how to make a result box. Any help would be appreciated... Thanks :)
Just to clarify I am looking for a way (I am aware of iFrames) to submit code from 3 "CodeMirrors" and then gets applied to a result area below. I am also looking for pointers as to how todo this as I have only been coding 6 months.
Approach 1 - using iframes:
It's the approach used by jsfiddle. Create 3 textareas to put your code (html, javascript, css). When the user press a button, you can send an ajax request to the server, sending the 3 texts, in order to generate a temporary page that is the composition of the various parts and returning its URL. Then create an iframe that points to it (or update the src of an existing one).
It's quite simple.
Approach 2 - client side:
You can append both the html, css and js in the actual page. It's quite simple, but can generate various issues with conflicting styles, ids and javascript functions/variables names (that you must manage manually).