As far as I'm aware, there isn't any particular way of doing depth in SVG. Elements are drawn in the order they appear, so if something needs to go behind something else, it must be earlier in the document.
I'm trying to create an animation, which for simplicity let's say it's the Earth orbiting the Sun. Doing this from above would be easy enough, just follow a circular path. However I want to have it viewed from a quite shallow angle, so the Earth would be going behind the Sun.
My current idea is to have two Earths, one before and one after the Sun. Something like...
<use xlink:href="#earth" />
<use xlink:href="#sun" />
<use xlink:href="#earth" />
Then I animate the two Earths, one going right-to-left and the other left-to-right, and alternating their visibility to only appear half the time. With the appropriate timing, this results in a single Earth being seen to orbit the Sun.
Honestly I quite like this idea, but I'm just wondering if anyone knows of a better way to do this kind of "3D-like" thing.
Why have two of the complicated things? It would be much easier to have two suns. Animate your earth on a continuous elliptical path. Then switch between your two suns at the right times.
You can create two sibling <g> elements (call them topLayer / bottomLayer or alike), and then move your planet elements from one layer to another without duplicating them
Related
I'm aware my question is maybe somewhat lazy. But I hope someone could maybe give me head start with my idea, or can provide me with an existing code example that points me in the right direction.
I want to create an organic shape/blob that more or less fills up existing space, but wraps around typographical elements. Whenever these elements move around, the shape should adjust itself accordingly. I was looking at Paper.js where examples like http://paperjs.org/examples/candy-crash/ and http://paperjs.org/examples/voronoi/ make it seem like this should be possible.
You can use the path.subtract() boolean operation, along with the path.smooth() function to smooth your shape with the type of smoothing of your choice.
Here is a demo sketch. You can also try to smooth the rectangles ; and maybe randomly add points on your curves or randomly displace all segment handles.
I am placing icons with a fixed diameter/radius on a line using d3.scaleTime. This works well except for the case in which dates are close to one another, leading to an unwanted overlap.
In that specific case, I would want the icons to "relax" and not touch.
My code rather complex, including animations etc. — so I drew the problem here:
These are my attempts:
I looked at d3-force for collision prevention, but I was not quite sure how to merge such an approach with an existing time scale. Could this be helpful? http://jsbin.com/gist/fee5ce57c3fc3e94c3332577d1415df4 However, it may occur that the icons then do not align on a horizontal straight line anymore, which is a disadvantage, because I do not want them to spread vertically.
I also thought about calculating overlaps and then manually adjusting the data so that the overlap does not occur. That, however seems a bit more complex because I would have to somehow recursively find the best position for every icon.
Could interpolation help me? I thought there must be something like "snap to grid", but then two icons could snap to the same position, couldn't they?
Which d3 concept makes most sense to solve this problem?
We need to convert some specific stream 2D video to 3D video with some symbologies on it. To make an example:
<iframe width="640" height="360" src="https://www.youtube.com/embed/-YKYjigYgok" frameborder="0" allowfullscreen></iframe>
edit: I added the video link here due to some errors in HTML insertion.
this is something similar to our project. As you can see, heights are indexed as colors, some shades, shadows are also are seen. the question is, can we convert those mountains and other shapes into 3D in a simple way? I ve seen many 2D-3D converters out in the market but they are undeterministic. We want to make our niche software for this and don't know where to start. We can utilize colors and shadows(for height and light direction) and also we have the altitude of the plane. Once we handle the mountains and other contents, putting 3D symbology is not an issue for us.
What I seek here is just some direction to get this done in a fastest way. Regards.
I think what you're looking for is called heightmap. You start from a 2d matrix with the height values in every cell and generate a 3D terrain based on the matrix.
The naive way to do it is to assign a vertex to each point in the matrix and then link them together with simple triangles.
As you can imagine is your map is large this will mean a lot of triangles. There are techniques that try to compress flat spaces or things that are very far away so that you spend the triangles on areas where they add more details. See for example quad-trees. This is also why some renderings seem non-deterministic since the algorithm is going to change the geometry on far away things in a way that it becomes visible. This can be solved by tunning the algorithms and put a larger weight on how visible the change is. A cheap-ish way of doing it is to measure the volume difference between the different levels of details, but only works decently when you don't have sharp spikes or pits in you map.
I assume assigning colors to the heights is not a problem here.
I am in the process of learning how to create a lens flare application. I've got most of the basic components figured out and now I'm moving on to the more complicated ones such as the glimmers / glints / spikeball as seen here: http://wiki.nuaj.net/images/e/e1/OpticalFlaresLensObjects.png
Or these: http://ak3.picdn.net/shutterstock/videos/1996229/preview/stock-footage-blue-flare-rotate.jpg
Some have suggested creating particles that emanate outwards from the center while fading out and either increasing or decreasing in size but I've tried this and there are just too many nested loops which makes performance awful.
Someone else suggested drawing a circular gradient from center white to radius black and using some algorithms to lighten and darken areas thus producing rays.
Does anyone have any ideas? I'm really stuck on this one.
I am using a limited compiler that is similar to C but I don't have any access to antialiasing, predefined shapes, etc. Everything has to be hand-coded.
Any help would be greatly appreciated!
I would create large circle selections, then use a radial gradient. Each side of the gradient is white, but one side has 100% alpha and the other 0%. Once you have used the gradient tool to draw that gradient inside the circle. Deselect it and use the transform tool to Skew or in a sense smash it. Then duplicate it several times and turn each one creating a spiral or circle holding Ctrl to constrain when needed. Then once those several layers are in the rotation or design that you want. Group them in a folder and then you can further effect them all at once with another transform or skew. WHen you use these real smal, they are like little stars. But you can do many different things when creating each one to make them different. Like making each one lower in opacity than the last etc...
I found a few examples of how to do lens-flare 'via code'. Ideally you'd want to do this as a post-process - meaning after you're done with your regular render, you process the image further.
Fragment shaders are apt for this step. The easiest version I found is this one. The basic idea is to
Identify really bright spots in your image and potentially down sample it.
Shoot rays from the fragment to the center of the image and sample some pixels along the way.
Accumalate the samples and apply further processing - chromatic distortion etc - on it.
And you get a whole range of options to play with.
Another more common alternative seems to be
Have a set of basic images (circles, hexes) and render them as a bunch of bright objects, along the path from the camera to the light(s).
Composite this image on top of the regular render of you scene.
The problem is in determining when to turn on lens flare, since it is dependant on whether a light is visible/occluded from a camera. GPU Gems comes to rescue, with better options.
A more serious, physically based implementation is listed in this paper. This is a real-time version of making lens-flares, but you need a hardware that can support both vertex and geometry shaders.
I have a "complex" problem where I have a bunch of tooltips (orange) on top of elements (black) that can be randomly placed on screen. The tooltips are a big square with a triangle in the middle of one of it's 4 sides pointing though the element direction. By default, the triangle will be in the middle of the element, but can be moved as long as it stay close to it, so we can't easily understand it refer to this element and not another one.
The problem is, the tooltip must NOT overlap each other, and can't be out of screen.
Image of my tooltip problem
I thought about first placing every tooltips to their default position (triangle pointing down), and then check if they are out of screen or overlap another one, and if so, try another position. But using this technique (which is probably the simplest one), I do not guarantee the best placement since once a tooltip has been placed, I will not replace him if another one can't fit anywhere otherwise it become too complex.
Does someone have any tips/idea how to deal with this type of problem?
Thanks!!
This looks like an instance of the map labelling problem. Wikipedia has an article about it.
You could place all the tooltips using some sort of physical simulation of repulsive electrical charges, similar to what is done in some algorithms for drawing graphs. You could model each tooltip as an object attached with a soft spring to its black box, while simulating a strong repulsive force between all the tooltips and between a tooltip and the edge of the image. You calculate all the forces and move the tooltips iteratively, until all positions converge. You could play with making the force scale as inverse square, inverse cube, etc to find nice results.
This might be a bit of work to implement, but should probably give decent results for simple cases. It is probably impossible to guarantee that a good solution always exists, since if you add too many tooltips, your image will be full.