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).