0

I am trying to create a graph calculator and making it display the graph correctly on a "canvas". When I load the HTML file and write x e.g it starts from the upper left corner and goes down to the lower right corner. So the problem is that it displays the graph upside down and it does not include negative values. I know that the canvas starts from (0,0) in pixel value in the upper left corner and ends at (300,300) in the lower right corner. I want it to display something like the green canvas from this link: http://www.cse.chalmers.se/edu/course/TDA555/lab4.html

points :: Expr -> Double -> (Int,Int) -> [Point]
points exp scale (x, y) = [(x, realToPix (eval exp (pixToReal x))) | x<-[0..(fromIntegral canWidth)] ]
              where
              pixToReal :: Double -> Double  --converts a pixel x-coordinate to a real x-coordinate
              pixToReal x = x * 0.02
              realToPix :: Double -> Double  --converts a real y-coordinate to a pixel y-coordinate
              realToPix y = y / 0.02
EL-
  • 15
  • 4

1 Answers1

1

You're probably used to working with 2D coordinate systems where positive y is up, but as you noted in HTML canvas positive y goes down. To simulate the coordinate system you want, you need to flip all the y-values over the line y=0 (aka the x-axis).

Here are a few y-values and their corresponding corrections you can use as tests. Note that I'm assuming y has already been scaled properly; it looks like you've already got that part.

  • 150 -> 0
  • 0 -> 150
  • -150 -> 300

The pattern is y_new = -(y_old - 150) where 150 is canvas_height/2. Therefore, after scaling you need to apply this formula to all your y values.

To shift the y-axis to the center you need to do the same sort of thing to derive the appropriate linear transformation.

Sage Mitchell
  • 1,563
  • 8
  • 31
  • Thank you for the suggestion. The y-axis shifted correctly, but when applying x=x*0.02 -150, the y-axis doesn't shift to the center and disappears instead. – EL- Oct 28 '16 at 16:55
  • Ah, my mistake. Thanks for pointing it out. I've edited it out of the post. – Sage Mitchell Oct 28 '16 at 17:23
  • No problems, thank you for the help. x = (x-((fromIntegral y) / 2)) * scale turned out to work correctly. – EL- Oct 28 '16 at 17:46