am trying to use WebGL to plot a 3D surface. My problem is that it is not letting me provide the x and the y values. It plots the z axis values against the values of x ranging from 0 to n and the values of y ranging from 0 to m (all integral values).
How can I make a surface where I can also provide the x and the y values for the 3D surface construction. Also if its not possible to do it in WebGL then what solution can I use?
PS Also, WebGL tooltip function doesnt function. any comments on that?
I'm guessing that you are saying that you can't specify the scale of x and y relative to the plotted (z) value?
What you need is to apply a non-uniform scale to the entire surface (the modelview matrix), so that the X and Y axes are stretched into the shape you want. Are you using three.js or a similar library, or... ? The answer will define the specific commands you should use.
As an example, let's say that you have a 100x50 plot, with the spacing forced by the library to 1.0 between x and y. Instead, you want the size to be 300x200 in x and y. You would scale the matrix by (3,4,1).
If you want to change the displayed range of your Z data, I would suggest adjusting its zero point (i.e., translating it up or down to be centered) and then scaling appropriately as-needed.
Related
I saw a d3 helper function which can create an svg arc: making an arc in d3.js
Is there a way to bend an existing svg into an arc in d3.js? If not, how can it be done in JavaScript? The initial image could be a square with negative space inside that makes a silhouette of something like a cat.
I included a drawing of what I want. I eventually want to make more and create a ring, and then concentric rings of smaller transformations.
I think conformal mapping is the way to go. As an example, I have started with the original square source and the circularly arranged (and appropriately warped) squares using conformal mapping. See the Circular Image and the Corresponding Square Image. Note, however, that I first converted the SVG source into a png image, and then applied conformal mapping transformation to each pixel in the png image. If anyone has a method of mapping entirely in the SVG domain [where the source uses only straight lines and bezier curves], pl. let us know!
I am not able to provide the code -- it is too complex and uses proprietary libraries). Here is a way to do it.
In order to compute the conformal mapping, I used a complex algebra library. JEP is one example. For each pixel in the OUTPUT image, you set Z = (x, y) where (x, y) are the coordinates of the pixel and Z is a complex variable with real part x and imaginary part y. Then you compute NEWZ = f(Z) where f is any function you want. for circle, I used an expression such as "(ln(Z*1)/pi)*6-9" where the log (ln) provides circularity, the 6 implies 6 bent squares in a circle and the -9 is a scaling factor to center and place the image. From the (X, Y) values of the NEWZ, you look up the old image to find the pixel to place in the new image. When the (X, Y) values are outside the size of the old image, I just use tiling of the old image to determine the pixel. When X and Y are fractional (non-integer) you average the neighbors in a weighted way.
I'm trying to render only slice of my 3d object. In orthographic camera I want camera.near as 2.0 and camera.far as 1.5 then iterate and give camera.near = 1.5 and camera.far = 1.0. And so on. But it is not working. When I pass smaller value(2) to camera.near and larger value (10) to camera.far it kind of works. But I want just the opposite. I thought Z axis is coming outward from the screen.
The z axis in Three.js is positive coming "out."
HOWEVER: the reason things can seem funny is that when you are setting view matrices, you actually specify the near/far planes as distance from the viewer. This is from the OpenGL spec:
Parameters
nearVal, farVal
Specify the distances to the nearer and farther depth
clipping planes. These values are negative if the plane is to be
behind the viewer.
FYI when you are using a perspective matrix, both values are always positive.
I want to create application like a google map in which zoom and panning is present and markers are not get scaled but they translate to their respective position.
My project is need to plot JSON data(x, y co-ordinates) on Pdf/image/svg file.. and when zoomed the data only pdf/image/svg file should zoom and data on that should translate to their respective position but should not scale.
I never found any relevant example. All examples are like plot data on canvas or on svg elements..etc
My Query is.... Is this kind of application can be create with Canvas + javascript ?
Or any other language need to use or any plugin?
You sure can.
I designed a mapping system that loads json ( geoJson at that ) onto a canvas.
Symbols etc. I deliberately didn't scale, so that should be what you like to do.
Effectively, everything you do is either in device units ( pixel ) and real world units ( logical ).
I store all my data in logical units, and when drawn, convert them into device units.
Since there is a difference between coordinate systems ( screen uses top left as 0,0 ) you have to calculate an offset between the two. Add a scale and you can zoom.
Initial scale is width of screen / width of data. Use a single scale value and scale X and Y by it to avoid stretching when you zoom.
Once you store your top, left and scale, you can convert any logical units to device units by:
Device point x = (logical point x - left) * scale
Device point y = (top - logical point y) * scale // Cartesian system correction!
and back to logical units by
Logical point x = (device point x/scale) + left
Logical point y = top - (device point y/scale) // Cartesian system correction!
Hope that helps!
I am trying to draw a chart using d3-js. I want X axis values to be [0.25yrs; 0.50yrs; 1yr; 2yrs; 5 yrs; 10yrs; 15yrs; 20yrs; 30 yrs; 50 yrs]. This can be done using d3's tickValues() & tickFormat() functions. But I need to maintain certain distance between 0.25, 0.50 & 1 year ticks, because most values belong to these years & more distance between them will reduce overlapping of drawn circles.
The tick position I need is something like :
You can see the distance between .01 and .02 in above image. How can we do that?
You will need to implement a custom scale that maps your input range to this non-uniform output range. Then you can give this scale to your axis and it will draw the ticks accordingly.
You could have a look at the scales that D3 provides if anything is close enough to what you want (a log scale maybe?), but if you can't find anything you have no choice but to implement your own.
Basically, I'm trying to do 3D projection on a 2D canvas with simulation of depth. As a general rule, bodies that are further away are "shaded" more and smaller than bodies that are closer to the viewer. The only thing missing is having bodies that are further away always drawn behind bodies that are closer.
Sometimes, bodies that are further away are drawn behind closer bodies, but there are always small bodies that get drawn in front of larger ones, meaning that the ones that are further away sometimes appear in front of bodies that are supposed to be closer.
I try to solve it by sorting the bodies by the z-position. The bodies array is an array of objects with 0 containing an array of the body's position, 0 being x, 1 being y, 2 being z. I first have the position of the bodies updated according to rotations in the x, y, and z axes, stored into the np value of the body object, then do the sorting, and draw the bodies. I've tried changing how the array is sorted, changing the order of the loop, but still no cigar.
Just wondering if anyone can point me in the right direction to get this 3D "engine" behaving correctly. Any help is appreciated. Some quick notes: Rotations along the three axes are accomplished using the Q/A, W/S, and E/D keys, zooming in and out of the z-axis is accomplished using the R/F keys, and the default rotation about the z-axis can be accomplished using the P key. What I'm trying to do is located here:
http://jsbin.com/aholu/5/
You're sorting on the original xyz values instead of the transformed np values. I got it to look right by switching...
bodies.sort(function(a,b) {return a[0][2]-b[0][2]});
to
bodies.sort(function(a,b) {return a.np[1]-b.np[1]});
with change see http://home.comcast.net/~trochoid/mod5.html
I don't follow all of your code so this may not be a total solution. Specifically, I thought it'd be sorted on np[2] for the transformed z value, but np[1] gives correct looking results. I guess maybe you switch these coords. Also, it looks like you're transforming and projecting the z value and the code fix above sorts on this projected z value. It seems to work out ok but I've never projected the z value itself, just use the transformed z to project xy. Anyways, Looks good!
Trochoid. I had to access from a different computer and still haven't registered, so I have to add this as an answer instead of a comment.
If you notice, the axis of rotation for x and y are rotated when you rotate any other axis (eg. if you press W to rotate, then rotate a different axis, then press W again, you will notice that the helix in your code rotates the same way). T
his is not so with the z axis. No matter how you rotate the x and y axes, the z axis will always rotate "right-to-left" (eg. in default configuration, helix is spiraling along z-axis, or axis rotated using the E/D keys, but if you rotate the helix along any other axis, rotating using the E/D keys no longer spirals the helix).
I don't know why the behavior would be different in that axis, so I would like your assistance to get that rotation working properly. Thank you.
I am aware that this is not answering the original question, but depending on what you are trying to acchieve in general be aware that there is also 'parallax scrolling' (example) (esp. in CSS3 (example).