{"id":10786,"date":"2016-05-25T16:01:54","date_gmt":"2016-05-25T08:01:54","guid":{"rendered":"http:\/\/www.intmath.com\/blog\/?p=10786"},"modified":"2016-05-25T16:03:35","modified_gmt":"2016-05-25T08:03:35","slug":"conic-sections-interactive-applet","status":"publish","type":"post","link":"https:\/\/www.intmath.com\/blog\/mathematics\/conic-sections-interactive-applet-10786","title":{"rendered":"Conic sections interactive applet"},"content":{"rendered":"<p>I recently updated the <a href=\"https:\/\/www.intmath.com\/plane-analytic-geometry\/conic-sections-summary-interactive.php\">conic sections interactive applet<\/a>, part of the Plane Analytic Geometry section. <\/p>\n<p>The applet  now uses a different back-end meaning that it's now mobile-friendly and somewhat more convincing. <\/p>\n<p>Using the applet you can explore the conic shapes that occur when you slice a double cone by a plane at various angles and positions.<\/p>\n<p>You will get either a <strong>circle, ellipse, parabola<\/strong> or <strong>hyperbola<\/strong>. Such curves are called <strong>conic sections<\/strong>, since they are the result of slicing a cone with a plane.<\/p>\n<h2>Example output<\/h2>\n<p>When the plane's angle is less than the cone's side angle, we get an ellipse, as follows: <\/p>\n<div class=\"imgCenter\">\n<p><img loading=\"lazy\" src=\"\/blog\/wp-content\/images\/2016\/05\/conic-section-ellipse.png\" alt=\"ellipse conic section\" width=\"228\" height=\"206\" \/><br \/>\n  Conic section  - Ellipse <\/p>\n<\/p>\n<\/div>\n<p>If the angle of the plane is greater than the angle of the sides of the cone, the result is a hyperbola:<\/p>\n<div class=\"imgCenter\"><img loading=\"lazy\" src=\"\/blog\/wp-content\/images\/2016\/05\/conic-section-hyperbola2a.png\" alt=\"hyperbola conic section\" width=\"156\" height=\"191\" \/><br \/>\n  Conic section  - Hyperbola<\/div>\n<p> At various extremeties, you get a <strong>degenerate conic<\/strong>, which is either a:<\/p>\n<ul>\n<li><strong>Point<\/strong> (e.g. when the plane passes through the point joining the two cones)<\/li>\n<li><strong>Intersecting lines<\/strong> (e.g. when the plane is parallel to the axis of the two cones, and passes through the origin)   <\/li>\n<\/ul>\n<p>Here's an example of the latter case:<\/p>\n<div class=\"imgCenter\"><img loading=\"lazy\" src=\"\/blog\/wp-content\/images\/2016\/05\/conic-section-degenerate-hyperbola2.png\" alt=\"degenerate hyperbola\" width=\"193\" height=\"197\" \/><br \/>\n  Degenerate hyperbola (2 straight lines) <\/div>\n<h2>Developing  the interactive applet<\/h2>\n<p>I developed the applet using the brilliant <a href=\"http:\/\/threejs.org\/\">Three.js<\/a> library by <a href=\"http:\/\/mrdoob.com\/\">MrDoob<\/a>.<\/p>\n<p>Constructing each of the conic section curves <em class=\"textem\">should<\/em> have been a straightforward process of finding the intersection between the plane (at various angles) and the cone(s), then looping around the resulting curve at small intervals and joining the points.<\/p>\n<p>However, each conic type threw up its own challenges.  For example, I could draw the hyperbolas on the <em>x-y<\/em> (horizontal) plane, then rotate them at the correct angle and then move them into position, but the other curves didn't play nicely with that approach and I had to try all sorts of different ways.<\/p>\n<p>The &quot;fun&quot; issue is that eah situation was multi-variable. That is, by being able to move the plane left and right, and up and down, and at different angles, a lot of testing was necessary to make sure it all worked as intended.  <\/p>\n<h3>The math involved <\/h3>\n<p>There's always a lot of mathematical thinking involved in creating these interactive applets, as there is for creating any interactive visual app, especially games. <\/p>\n<p>For the current conic sections applet, I needed to use and calculate:<\/p>\n<ol>\n<li>3D vectors and angles<\/li>\n<li>Solving quadratic equations<\/li>\n<li>Intersection between a cone and a plane<\/li>\n<li>Trigonometric ratios (sin, tan)  <\/li>\n<li>Finding square roots<\/li>\n<li>Ellipse formula<\/li>\n<li>Parabola formula<\/li>\n<li>Hyperbola formula<\/li>\n<li>Straight line formula<\/li>\n<li>Slopes of lines in 2D and 3D<\/li>\n<li>Rotation angles in 2D and 3D      <\/li>\n<li>Modelling (finding a function to fit given data, e.g. for the degenerate hyperbola cases) <\/li>\n<\/ol>\n<p>The link again: <a href=\"https:\/\/www.intmath.com\/plane-analytic-geometry\/conic-sections-summary-interactive.php\">Conic Sections Summary Interactive<\/a> <\/p>\n<p class=\"alt\">See the <a href=\"https:\/\/www.intmath.com\/blog\/mathematics\/conic-sections-interactive-applet-10786#comments\" id=\"comms\">1 Comment<\/a> below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>  <a href=\"https:\/\/www.intmath.com\/blog\/mathematics\/conic-sections-interactive-applet-10786\"><img loading=\"lazy\" src=\"https:\/\/www.intmath.com\/blog\/wp-content\/images\/2016\/05\/conic-section-ellipse_th.png\" alt=\"Conic sections interactive applet\" width=\"128\" height=\"100\" class=\"imgRt\" \/><\/a><br \/>\nThis interactive applet allows you to explore the concept of slicing a cone by a plane at various angles and positions, resulting in conic sections.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mo_disable_npp":""},"categories":[4],"tags":[134,109,127],"_links":{"self":[{"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/posts\/10786"}],"collection":[{"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/comments?post=10786"}],"version-history":[{"count":0,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/posts\/10786\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/media?parent=10786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/categories?post=10786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/tags?post=10786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}