Why is the y axis inverted in the HTML DOM and in SVG? - html

The y axis instead of going upwards, goes downwards, whilst the x axis has the normal sense from left to right. Why?
It is one of the most annoying obstacles when doing the graphic part of a website because the geometry has to be recalculated, as the usual calculation as in the cartesian plane will be wrong. So, why does this happen? Is there a specific reason? Did they not notice that they were betraying traditional mathematics?

Related

WinRT XAML Toolkit Charting: Hide legend without clipping?

I'm using the WinRT XAML Toolkit v1.6.1.3. I have a very small graph that fits on a GridView tile and the legend takes up room that I'd rather give to the graph:
Setting the LegendStyle's Visibility to Collapsed doesn't do anything.
I have read that people have had success with just setting the LegendStyle's Width to 0. However, when I do that, I get weird clipping issues with the right and bottom axes:
Does anyone know how of a way to hide the legend without clipping the axes?
Never mind, it seems that the clipping is due to the weird axis setup I have (I'd like to have one Y axis on the left for the first two series and a second Y axis on the right for the third series), not hiding the legend. Adding a LegendStyle with Width set to 0 works great for hiding the legend. I'll post another question for the axes.

AS3: 3D axes rotation

I've built a 3D icosahedron in AS3 that I'm going to use as a 20-sided die. With rotationX, rotationY, and rotationZ all set to 0, it looks like the top left picture. Now I'm trying to find the proper rotations for each number so that the face is perpendicular to the screen, like in the top right picture for #1. The problem is that when I rotate it one way, the axes of rotation are changed as well. For example, in the bottom left picture when I was trying to do #2, I set rotationZ to 108, but now rotationX will not turn it straight downwards as it did before.
I could just eyeball it and get approximate rotations that looked about right, but I would rather have exact rotations. Any ideas?
Nevermind, I needed to use Matrix3D instead for my rotations.

AS3 spin text around center?

I am trying to get an effect like this:
http://www.welcomeanimations.com/welcome_animated_gifs_rotating_sign_orange_chrome_k_1.htm
I have tried all sorts of things:
Matrix translation/rotation - spins the text around the 'Z' axis, instead of 'Y'
Adding TextField to a sprite, and Sprite.rotationY++: reg. point is upper left corner
Adding to MovieClip - same as above (an article said MovieClip's reg. point was centered).
This should be trivial?!?! Help me stackoverflow, you're my only hope!
So you have to remember, Display objects scale and rotate around their local coordinate system. so when you put a textfield in a sprite, you need to center it in that sprite's coordinate system. And doing that for textfields is annoying because their width/height isn't always accurate but there is trick for that: get visual bounds, but normally you can take half of somethings width and height
I've created a prototype for you on wonderfl so you can see the solution working in action. Click on the blue square to see how the local coordinate system messes with the rotation
Finally as you use thing you might find things not rotating in 3D space quite right, this should be able to fix that.

Align the coordinate labels of the triangles, so that they never collide with each other. Actionscript 3

Im trying to achieve something similar to the flash movie in the below link.
http://mathopenref.com/coordtrianglearea.html
As we drag the points of the triangle, the coordinates labels, ( A(1,2)) are properly aligned and arrange themselves so that they never collide with each other and never falls inside the triangle.
Please guide me..
Thanks in advance.
in the example you gave, the textfield seems to be aligned outside the triangle on the angle bisection of the corresponding corner.
for the position in one corner, take the two vectors to the other corners. normalize them and then add them and normalize the resulting vector again. this gives you the vector v of the angle bisection in that corner. multiply the vector with a negative constant and add it to the corner, and you'll obtain a position p outside the triangle. finally, if the angle of v is between pi/2 and -pi/2 (pointing right) align the right border of the label to p, and the left border otherwise.
for simple vector calculations, please see flash.geom.Point.

Generate random coordinates from area outside of a rectangle?

I'm working on a simple tutorial, and I'd like to randomly generate the positions of the red and green boxes in the accompanying images anywhere inside the dark gray area, but not in the white area. Are there any particularly elegant algorithms to do this? There are some hackish ideas I have that are really simple (continue to generate while the coordinates are not outside the inside rectangle, etc.), but I was wondering if anyone had come up with some neat solutions.
Thanks for any help!
Simplicity is a sort of elegance in its own right, so I agree with Jon: take a Monte Carlo approach and continue sampling until you get a valid value.
If you wanted to guarantee that you'd never place the red or green squares inside the white box, you could use the following simple algorithm:
Determine the height hS and width wS of the square you're placing.
Divide the gray area into 8 rectangular regions R = {R1, R2, ... R8}, defined by the white box. (Imagine a tic-tac-toe grid with the white box at the center; this defines the surrounding eight regions.)
Let P(S is placed in Ri) = A(Ri) / A(R), where A(Ri) is the area in which the center of S can be placed: that is, a region which is of area (hRi - hS) ยท (wRi - wS).
Select a region according to the above probabilities. Then select a point in that region from a uniform distribution of the available x- and y-coordinates.
Done!
I would personally go with the simple "keep sampling until you get a valid value" approach unless there's a chance that you'll have a very large white rectangle against a grey rectangle which isn't much bigger. To me, simpler is almost always better.
An alternative would be to work out how many possible pixels there will be, and generate a random number in that range. Then effectively number the pixels from top left to bottom right. Work out whether the given random sample is in the top section, the bottom section or the middle (which you can do by just seeing if it's less than the first pixel on the top line of the white rectangle, or less than the first pixel on the line below the white rectangle). Once you've worked that out, it's a simple matter of working out the row, then the pixel within the row. This isn't hugely hard, but it is pretty fiddly and easy to get wrong. Note that this is determining a single random pixel: as you're generating large squares, you should consider the range of valid pixels for the top left corner of the square, and find a sample in that range.