How to have multiple of the same objects appear at once - javascript

I am writing a simple program, in this I want multiple ellipses to appear at the same time, is there a function for this to happen or a method to follow for multiple ellipses of the same kind to be produced all across the screen in different places?

Related

Routing algorithm for drawing non-intersecting lines

I'm working on a flowchart system in JS, that allows the user to click on one element followed by another, and the program inserts an arrow connecting them. For this, I need a line-drawing algorithm which meets the following criteria:
Only straight lines/90deg turns
Guaranteed to take an efficient route, such that...
... it can take into consideration other lines (as it cannot intersect) - e.g, if I insert one line, and then another, it is able to draw the second without having to rearrange the first, or take a wildly inefficient route to get to its destination to avoid the first line.
If you know any algorithms which fit the bill (I've only found ones that match just one or at most two of the criteria), I'd be interested; also, if there's a JS implementation I can steal then please link that too.
Some notes:
Time complexity does not matter, as long as the result is aesthetically pleasant
There can be multiple lines originating from or entering one element. This is to allow for loopbacks/subroutines.
Lines can go on top of each other, just not perpendicularly across one another.
Examples:
image 1
I click on one element...
image 2
... and then on another, which then inserts the arrow between them.
image 3
If I continue this, I expect to get a linear sequence, with the arrows inserted automagically.
image 4
Alternatively, I can make use of multiple inputs/outputs to get a more closed chart, generating a more complex result.
image 5
I should be able to do this in any order to get the same result.

Rendering Speed: more objects or more scenes?

I'm trying to make a game that has three scenes, each with different functions, but they all need the same three.js objects in them.
My question is: in terms of rendering speed, is it better to use three cameras, and just reposition the blocks when I change from one scene to another, or use three scenes which all hold the same types of objects but they are actually different objects and they don't have to be moved?
If you don't understand that, imagine this: I have a scene full of three.js objects shaped like letters, and they spell a paragraph. I want a new paragraph with the same letters, but is it better for the rendering speed to move all the letters around, or flip to a scene that has already been loaded with the same letters, but in the shape of the new paragraph?
I am totally open to alternative ways of accomplishing this task, as long as they are only with JavaScript.
Thank you very much!
I believe you're referencing the wrong problem. Two scenes with 50 objects each will render in (relatively) the same amount of time on the GPU. The "rendering speed" you're considering includes scene processing to reposition your letters. So the real problem you're facing is finding a minimal number of operations in order to position your letters from one scene to the next.
If we make a few assumptions:
You don't care about memory
You don't care about the time it takes to initially set up the scenes
You don't plan on rearranging the letters further than the given scenes
Then the fastest you can go is to have separate copies of all the objects. You wouldn't need to perform any repositioning, so you would jump directly to the render step.

Is it possible to highlight 2 series at once in Dygraphs?

I've got a whole set of graphs I produce from a financial model: each one has, say, 5-10 data series on it.
I now want to compare the outputs of two different models: they produce exactly equivalent data series, just with (probably) different numbers in them. I can see three ways of displaying a comparison:
have a graph just showing 2 series, one from each model. Allow the user to select which series to show. This is pretty easy to do, but has the disadvantage that it doesn't show any relationships there might be between series coming from the same model.
Have side by side graphs, one for each model. The highlighting is synchronized, so that the series highlighted on one is highlighted on the other, and the same x value is also highlighted. It seems that this is possible (see this question). This has the disadvantage that the two versions of the series you are most interested in at the moment (the one that is highlighted) are on different charts, so are more difficult to compare.
Have a graph showing all the series from both models. Use the same colors for the series, but have model 1 solid line and model 2 dotted line, say. When you highlight one series, its pair is also highlighted (presumably using the highlight callback). But is it possible to highlight two series at once? This would definitely be my preferred option, if it's possible.
So, is it possible to highlight two series at once? Or, alternatively, is there a better way to show the comparison?
It's not possible to highlight two series at once (in the sense of highlightSeriesOpts), but you can do something similar. When the selected series changes, call:
g.updateOptions({series: { otherSeriesName: { strokeWidth: 2 } })
Or however you want to indicate highlighting. You can do this using highlightCallback and unhighlightCallback.

Drag and drop divs using AngularJS

I'm creating a simple task manager where tasks are regrouped by steps. Therefore, many steps can have many tasks. Currently, I have my angularJS model mapped properly. What I want to do right now is to be able to reorder the divs representing the steps.
For example, if I have three steps named 1,3,2 I want to be able to drag the step 2 and move it above step 3 therefore putting them in the order 1,2,3. To do so, I would have to modify my angularJs model accordingly.
What I have currently, is that the ui is responding, I can see the step changing positions, but my the array containing all the steps stays in the same order... Is there a way to reorder this array or at least a way to get the new position of the step ?
http://plnkr.co/edit/bjsgQz?p=preview
You may want to consider using ui-sortable; I've used it on one of my own projects for allowing drag-and-drop reordering, and it's worked rather well. I should point out that it does have a dependency on JQuery/JQueryUI (for the sortable widget), but it was worth it for us.

Multiple canvases? [duplicate]

If we use multiple <canvas> on a single html page does it hamper the performance of the application that is being developed and does the code get very bulky and require more time to load the page?
Sometimes multiple canvases results in better performance. It's best to test if you can afford the time.
Say you are making a program that has items on the screen and allows the user to draw a selection box.
With one canvas, to draw the selection box you'd have to redraw all of the elements over and over to update the selection box that the user sees since they are all on the same canvas.
Or, you can have two canvases, one with the objects and then another one in front for things like "tools" (like the selection box graphics). Here two canvases may be more efficient.
Other times you may want to have a background that changes very rarely and foreground objects that change all the time. Instead of redrawing all of them at 60 frames per second, you make a background canvas and foreground canvas, and only have the foreground's objects redraw at the fast speed. Here two canvases ought to be more efficient than one, but it may be more optimal to "cache" that background canvas as an image and drawing the image first each frame.
I've used dozens of canvases on the same page display different graphs using a javascript graphing library. The graphs are quite fast, it's gathering the data for them that's a bit slow in our case.
If you want you can wait to do all your drawing until the rest of the page loads by kicking it off from the onLoad function.
Also, HTML5Rocks says it is a best approach.
According to Mark Pilgrim, it's a good idea to use multiple canvases.
See This Link
Using multiple canvases can simplify things on your end, by isolating regions of the screen to update and isolating input events. If your page is well-suited for dividing-up regions of the screen, I say go for it.
A single instance runs smoothly, more does not affect rendering on page. Data is the factor of slowing canvas down. In order to increase page loading time, you can simply call canvas rendering methods after page loading.

Categories