An SVG for an Article

I've been burning my days away on SteemIt. Their design works best if one has an image with each post.

I wanted to write a post about René DesCartes. For the image I thought I would simply graph a function. I forgot how difficult it is to graph functions in HTML. This is what I ended up with. It has the function function, an ellipse and a circle.

The Code

Here is the JavaScript that produced the curve. It is eight lines. I thought it would take 15 minutes to write. It took several hours because JavaScript has become a convoluted monster that does not behave intuitively.

var polly= document.getElementById('polly');
var x = -333;

for (var i = 0; i < 111; i++) {
  // Apparently, I have to create the point in the for loop.
  var point = svg.createSVGPoint();
  point.x = x;
  point.y = Math.floor(-(200* Math.exp(-((x * x)/10000) / 2)));

  polly.points.appendItem(point);
  x += 8;
}

You can see the full page by viewing the source of this page.

All I do is create a polyline in an SVG block. I then define a huge number of points on the line so that it looks smooth.

The thing that threw me is that I have to create a point object inside the loop. I really don't like this code.

Credits

I got the image for the word "Analytical Geometry" from FontMeme.com. You type in a word and get a PNG with the word in an elegant font.

Figuring out how to credit code is extremely difficult. I trolled around looking for different ideas about graphing equations. I started with an example on GitHub by tyler neylon. The only thing I kept from this example was the idea to graph exp(-(x * x) / 2).