from which I took the code to draw the Cartesian grid.
Let’s start; first of all I had to make some assumptions, to simplify the code:
Circumference will have a predefined radius and its centre will be in the cartesian origin i.e. point (0,0)
Parabola will be centered in the cartesian origin
Wikipedia has a nice explanation of the circumference and parabola; what we really need is their cartesian equation and so:
Circumference (centre in the origin)
So, after a brief explanation of what it’s needed let’s start coding:
Create a simple HTML page with a Canvas object and a form with two buttons, one for the circumference and one for the parabola.
var parabola_button = document.getElementById('parabola');
var circle_button = document.getElementById('circle');
The actual drawing action is made up of two functions, called by pressing one of the two buttons; as an example I will write the circumference one:
As you can see, on the button click event the “circlePressed” function is called; this function calls draw_circle which takes two arguments, the radius and the line colour. This function simply calculates the y value based on the x value and the radius using this formula:
You also have to remember that for each x point there are two y points, due to the nature of circumference and square root, so you will have to draw both of them.
The function starts by checking if any other graph is being drawn, if so, an alert is displayed. Then it starts setting an initial point with the x equal to the negative value of the radius. After that an interval of 33 ms is set so to animate the graph.In the drawing function a path is started using the canvas context beginPath method, the path is then moved to the initial point and two 1 pixel rectangles are drawn. Afterwards the path must be closed and a the new x,y values are calculated and the rectangles are drawn again. To end the recursion, the function checks whether or not the current x value is bigger than the radius, if so, the time interval is cleared and the function is terminated. And here is the result:
The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.