CODEWITHSUNDEEP
canvas3dhtml5-canvas
Navaneet
Navaneet

Reputation: 1387

Canvas 3d to plot a point

I just saw the link of canvas on How To Create 3D Graphics Using Canvas (Windows).

How can I use the same to plot a simple point such as (x,y,z)=(3,2,5)? Any ideas how to do this?

Upvotes: 1

Views: 2292

Answers (1)

jing3142
jing3142

Reputation: 1871

The example it takes you through is specifically designed to plot and view a 3D function of the form z=f(x,y)

First a brief explanation of what is happening within the code then a consideration of plotting individual points.

If you goto the sample page canvas3dRotation.html and view the source code, you will find the following:

Surface.prototype.equation = function(x, y)
      /*
        Given the point (x, y), returns the associated z-coordinate based on the provided surface equation, of the form z = f(x, y).
      */
      {
        var d = Math.sqrt(x*x + y*y); // The distance d of the xy-point from the z-axis.

        return 4*(Math.sin(d) / d); // Return the z-coordinate for the point (x, y, z). 
      }

This sets up the given equation.

The following code stores all the points required to draw the equation. These are stored in the surface.points array.

Surface.prototype.generate = function()
      /*
        Creates a list of (x, y, z) points (in 3 x 1 vector format) representing the surface.
      */
      {
        var i = 0;

        for (var x = constants.xMin; x <= constants.xMax; x += constants.xDelta)
        {
          for (var y = constants.yMin; y <= constants.yMax; y += constants.yDelta)
          {
            this.points[i] = point(x, y, this.equation(x, y)); // Store a surface point (in vector format) into the list of surface points.              
            ++i;
          }
        }
      }

Using this method is obviously at lot quicker than writing out all the points you want plotting individually and no 3D example would be based on just one point.

However suppose you wanted to plot individual points then you would delete the line at 357 surface.generate() and replace it with code to plot all your individual points. That means new code

So firstly add a new method to the code

Surface.prototype.plot = function(x, y, z)
      /*
        add the point (x, y, z)  (in 3 x 1 vector format) to the surface.
      */
      {
            this.points.push(point(x, y, z)); // Store a surface point
      }

Then instead of surface.generate(), use surface.plot(3,2,5).

Of course their example had 8100 points so plenty more to plot or find a way to generate all the points you want to plot.

Hope this has helped to get you started.

Upvotes: 2

Related Questions