The Beauty of Mathematics - Integration

index.html

<div class="container">
    <svg>
	 <g transform="translate(125, 75) scale(0.85)">
	  <line x1="150" y1="600" x2="150" y2="25" stroke="#fff" />
      <line x1="150" y1="600" x2="1000" y2="600" stroke="#fff" />
	  
	  <line x1="250" y1="600" x2="250" y2="620" stroke="#fff" />
	  <line x1="350" y1="600" x2="350" y2="620" stroke="#fff" />
	  <line x1="450" y1="600" x2="450" y2="620" stroke="#fff" />
	  <line x1="550" y1="600" x2="550" y2="620" stroke="#fff" />
	  <line x1="650" y1="600" x2="650" y2="620" stroke="#fff" />
	  <line x1="750" y1="600" x2="750" y2="620" stroke="#fff" />
	  <line x1="850" y1="600" x2="850" y2="620" stroke="#fff" />
	  <line x1="950" y1="600" x2="950" y2="620" stroke="#fff" />
	  
	  <line x1="125" y1="500" x2="175" y2="500" stroke="#fff" />
	  <line x1="125" y1="400" x2="175" y2="400" stroke="#fff" />
	  <line x1="125" y1="300" x2="175" y2="300" stroke="#fff" />
	  <line x1="125" y1="200" x2="175" y2="200" stroke="#fff" />
	  <line x1="125" y1="100" x2="175" y2="100" stroke="#fff" />
	  
	  <text x="242" y="652">1</text>
	  <text x="342" y="652">2</text>
	  <text x="442" y="652">3</text>
	  <text x="542" y="652">4</text>
	  <text x="642" y="652">5</text>
	  <text x="742" y="652">6</text>
	  <text x="842" y="652">7</text>
	  <text x="942" y="652">8</text>
	  
	  <text x="90" y="510">5</text>
	  <text x="80" y="410">10</text>
	  <text x="80" y="310">15</text>
	  <text x="80" y="210">20</text>
	  <text x="80" y="110">25</text>
	  
      <path d="M150,600 C150,600 520,-325 1000,600" fill="none" stroke-width="2" stroke="#9D81BA" />
	  <path d="M664,637.89c-8.34-6-12.31-5.13-16.24,3.69-6.13,13.76-8.93,28.51-12.07,43.13-8.52,39.63-14.31,79.76-22.14,119.52-9.63,
	  48.9-19.93,97.66-33.92,145.55-2.94,10.07-6.74,19.88-13,28.51-7.25,10-16.37,13.82-26.18,10.78-5.21-1.61-9.08-4.8-10.95-10.08-1.81-5.13-.15-9.56,
	  4.19-11.28a7.65,7.65,0,0,1,9.66,3.84c1.91,4.27.12,8.23-4.88,10.84a13.44,13.44,0,0,0-1.24.83c6.17,5.35,12.38,5,17.64-1.2,4.84-5.69,7.47-12.54,
	  9.77-19.52,7.27-22,11.12-44.82,15-67.57,12.72-74.52,27-148.7,47.06-221.65a140.45,140.45,0,0,1,10-26.59,41.91,41.91,0,0,1,8.75-12.06c9-8.29,23.86-.76,
	  26,8.08,1.22,5-.51,9.06-4.87,10.54-4.12,1.4-7.31,0-9.18-3.74s-.93-7.17,2.54-9.65A28.14,28.14,0,0,1,664,637.89Z" fill="#fff" 
	  transform="translate(650, -200) scale(0.4)"/>
	  
	  <text class="letter" x="142" y="636" style="fill:#feca57;font-size:1.2em;">a</text>
	  <text class="letter" x="998" y="636" style="fill:#feca57;font-size:1.2em;">b</text>
	  <text class="letter" x="885" y="210" style="fill:#feca57">a</text>
	  <text class="letter" x="927" y="60" style="fill:#feca57">b</text>
	  <text class="letter" x="930" y="138">f (x)</text>
	  <text class="letter" x="1000" y="140" style="fill:#26de81">dx</text>
	  <text class="letter" x="290" y="645" style="fill:#26de81;font-size:1.1em;">dx</text>
	  <text id="dx" class="letter" x="285" y="675" style="fill:#26de81;font-size:1.1em;"></text>
	 </g>
    </svg>
  </div>

script.js

let group = document.querySelector('g');
    let path = document.querySelector('path');
	let label = document.querySelector('#dx');
  
    var delta = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    var s = 250.5;
    var e = 350.5;
    var pathStr = 'M' + s + ',' + 600 + ' L' + s + ',' + 620 + ' L' + e + ',' + 620 + ' L' + e + ',' + 600;
	var values = ['1.00', '0.50', '0.25', '0.12', '0.06', '0.03', '0.01'];
  
	delta.setAttributeNS(null, 'd', pathStr);
	delta.setAttributeNS(null, 'fill', 'none');
	delta.setAttributeNS(null, 'stroke-width', 2);
	delta.setAttributeNS(null, 'stroke', '#26de81');
	group.append(delta);

	let limit = 0.7;
	var start = 300;
	var prev = start;
	var delay = 0;
	var dx = 100;

	integrate();

	function setTimer() {
	  setTimeout(function() {
		start = (prev / 2);
		dx = (dx / 2);
		prev = start;
		delay = 0;
		
		s = (s + (dx / 2));
		e = (e - (dx / 2));
		pathStr = 'M' + s + ',' + 600 + ' L' + s + ',' + 620 + ' L' + e + ',' + 620 + ' L' + e + ',' + 600;
		delta.setAttributeNS(null, 'd', pathStr);

		if (dx > limit) {
		  while (group.childNodes.length > 78) {
			group.removeChild(group.lastChild);
		  }
		  integrate();
		}
	  }, 1900);
	}

    function integrate() {
      while (start < 1000) {
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        var height = findY(path, (start - (dx / 2)));
		
        rect.setAttributeNS(null, 'x1', start);
        rect.setAttributeNS(null, 'x2', start);
        rect.setAttributeNS(null, 'y1', 600);
        rect.setAttributeNS(null, 'y2', height);
        rect.setAttributeNS(null, 'stroke-width', dx);
        rect.setAttributeNS(null, 'stroke', '#80DAEB');
        group.append(rect);
		
		if (dx == 100) {
		   TweenMax.from(rect, 0.8, { attr: { y2: 600 }, delay: delay, ease: Sine.easeOut });
		}
        start += (dx + 0.1);
        delay += 0.05;
      }
	  label.textContent = values.shift();
      setTimer();
    }

	function findY(path, x) {
	  let pathLength = path.getTotalLength();
	  var start = 0;
	  var end = pathLength;
	  var target = ((start + end) / 2);

	  x = Math.max(x, path.getPointAtLength(0).x);
	  x = Math.min(x, path.getPointAtLength(pathLength).x);

	  while (target >= start && target <= pathLength) {
		var pos = path.getPointAtLength(target);

		if (Math.abs(pos.x - x) < 0.001) {
		  return pos.y;
		} 
		else if (pos.x > x) {
		  end = target;
		} 
		else {
		  start = target;
		}
		target = ((start + end) / 2);
	  }
	}

style.css

body {
    background-color: #3b3b3b;
    padding: 0;
    margin: 0;
  }

  svg {
    height: 100%;
    width: 100%;
  }
  
  text {
	font-size: 1.5em;
	fill: #ffffff;
  }
  
  .container {
    position: relative;
    margin: 0 auto;
    margin-top: 6%;
    height: 750px;
    width: 1250px;
  }
  
  .letter {
	font-family: serif;
	font-size: 2em;
  }

the-beauty-of-mathematics-integration.markdown

The Beauty of Mathematics - Integration

This is the first part in a series I'm calling the Beauty of Mathematics.

Many people are trained in grade school or university to memorize and carry out the steps needed to solve rigorous equations but how many actually understand what they're all about?

How can we solve for the area under the curve of some function f(x) over a set interval [a, b]? We can do this through a process called integration which is one of the two main operations in Calculus. The main idea is to add up a certain number of rectangles each with a height of f(x) and a width of dx over the interval [a, b] and this should give us an approximation of the area under the curve on that interval.

The problem is that the approximation is less accurate with higher values for dx. This is where, in my opinion, the genius, beauty and elegance of integration comes in. It was discovered that if you keep adding more and more rectangles over the interval each with smaller and smaller widths (dx) the approximation gets better and better. As dx approaches zero, you will end up with the exact area under the curve.

A Pen by Nick Shillingford on CodePen.

License.