AM
Animated Mathematics
Setting up the MEE
The MEE is suitable for all operating systems including Chromebooks. Follow the simple steps below and start exploring mathematics.
| Five Simple Steps |
|---|
| Create a Folder on the desktop or some other place |
| Download a text editors. Windows users are recommended to use Notepad++ , Macintosh user can use Komodo Edit, and Chrome users can install the Caret Extension. |
| Download index.html into folder |
| Download maths.js into folder |
| Through your text editor run the html code in Firefox or Chrome, or any other up to date browser. |
The HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="The Maths Exploration Environment">
<meta name="author" content="Vinay Narayan">
<title>Math Exploration Environment</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
canvas {
width: 100%;
height: auto;
}
</style>
<script src="http://animated-mathematics.net/tbobject.js"></script>
<script src="http://animated-mathematics.net/screenobject1.js"></script>
<script src="http://animated-mathematics.net/circleobject.js"></script>
<script src="http://animated-mathematics.net/triangleobject.js"></script>
<script src="http://animated-mathematics.net/rectobject.js"></script>
<script src="http://animated-mathematics.net/polygon.js"></script>
<script src="http://animated-mathematics.net/commonxx.js"></script>
<script src="http://animated-mathematics.net/instances.js"></script>
<script src="maths.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-sm-offset-0 col-md-offset-0">
<h1 style="text-align:center;">
<span style="color:blue">
Mathematics Exploration Environment
</span>
</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5 col-sm-offset-1 col-md-offset-1">
<h2 style="text-align:left;">
<span style="color:blue">
Screen
<span>
</h2>
</div>
<div class="col-xs-12 col-sm-5 col-md-5 col-sm-offset-0 col-md-offset-0">
<h2 style="text-align:left;">
<span style="color:green">
Text Box
</span>
</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5 col-sm-offset-1 col-md-offset-1" >
<div style="position:relative;">
<canvas id="dummy" width="500" height="500" style="border:2px solid red;background:transparent;z-index: 1;width:500px;height:500px" ></canvas>
<canvas id="sc" width="500" height="500" style="border:3px solid red; background:transparent;z-index: 2; width:500px;height:500px;position:absolute;left:0px;top:0px;"></canvas>
<canvas id="fc" width="1000" height="1000" style="border:3px solid green; background:transparent;z-index: 3;width:500px;height:500px;position:absolute;left:0px;top:0px;"></canvas>
<canvas id="shape" width="1000" height="1000" style="border:3px solid blue; background:transparent;z-index: 4;width:500px;height:500px;position:absolute;left:0px;top:0px;"></canvas>
<canvas id="pics" width="1000" height="1000" style="border:3px solid blue; background:transparent;z-index: 5;width:500px;height:500px;position:absolute;left:0px;top:0px;"></canvas>
</div>
</div>
<div class="col-xs-12 col-sm-5 col-md-5 col-sm-offset-0 col-md-offset-0" >
<div style="position:relative;">
<canvas id="tbox" width="500" height="500" style="border:3px solid blue;width:500px;height:500px;"></canvas>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-4 col-sm-offset-5 col-md-offset-5">
<button class="btn btn-danger" onclick="run();">Run Program</button>
<button class="btn btn-danger" onclick="minus();">minus</button>
<button class="btn btn-primary" onclick="plus();">plus</button>
</div>
</div>
<footer>
<span style="color:blue">
Göteborg/Kungsbacka August 2017. Copyright©2017 by Vinay Narayan, all rights reserved.
</span>
</footer>
</div>
</body>
</html>
Explanation
Start of the Head Section
Meta Tags for the search engines. Not important for MEE End of Meta Tags. Boostrap for layout.
You do not need to know the details.
End of Boostrap and Layout.
Loading Objects for MEE.
You do not need to know the details.
End of loading Objects
math.js is the local JavaScript program used by the MEE. The name can be changed.
End of Head Section
Start of Body Section
The body contains the layout for the whole webpage which includes 2 canvases, the text, and 3 buttons.
IMPORTANT
The functions run(),minus(), and plus() are saved in the math.js file.
run() is executed when "Run Program" button is pressed.
minus() is executed when the "Minus" button is pressed.
plus() is executed when the "Plus" button is pressed.
The names of these functions can be changed here.
End of Body
and HTML file.
JavaScript
var c=-4;
var m=1;
function run(){
var mxplusc=function(x){
return m*x+c;
}
screen.axis(-15,15,-15,15);
screen.quadratic(1,-8,19,6,"purple",-15,15);
screen.generic(6,"green",mxplusc,-15,15);
}
function plus(){
m=m+0.1;
screen.clear();
run();
}
function minus(){
m=m-0.1;
screen.clear();
run();
}
Explanation
The functions run(),minus(), and plus() are saved
in the math.js file.
run() is executed when "Run Program" button is pressed.
minus() is executed when the "Minus" button is pressed.
plus() is executed when the "Plus" button is pressed.
The names of these functions can be changed here.
run() is executed when "Run Program" button is pressed.
minus() is executed when the "Minus" button is pressed.
plus() is executed when the "Plus" button is pressed.
The names of these functions can be changed here.