Skip to content

Instantly share code, notes, and snippets.

@mathdoodle

mathdoodle/index.html

Last active April 21, 2019 01:11
Show Gist options
  • Save mathdoodle/685fc9f997ba060545ef to your computer and use it in GitHub Desktop.
Save mathdoodle/685fc9f997ba060545ef to your computer and use it in GitHub Desktop.
Download ZIP
Zeno's paradoxes
Raw
index.html
<!doctype html>
<html ng-app='doodle'>
<head>
<meta charset='utf-8'/>
<link rel='stylesheet' href='//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<style>
/* STYLE-MARKER */
</style>
<script type="text/javascript" src="http://use.typekit.com/nde6wmn.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": { availableFonts: ["TeX"] },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
messageStyle: 'none'
});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<!-- SCRIPTS-MARKER -->
</head>
<body>
<div class='container'>
<div class='page-header'>
<h1><a href='#'>Zeno's paradoxes</a></h1>
</div>
<div ng-controller='zeno-controller'>
<h3>Achilles and the Tortoise {{step+1}} / {{maxSteps}}</h3>
<label class='checkbox-inline'>
<input type='checkbox' ng-model='audio'/>Audio
</label>
<button ng-click='prev()' ng-show='true'>Back</button>
<button ng-click='next()' ng-show='true'>Next</button>
<div id='info' class="transition">{{text()}}</div>
<div id='steps'>
</div>
<!-- The following div will be the parent of the canvas -->
<div id='zeno'></div>
</div>
</div>
<script>
// CODE-MARKER
</script>
</body>
</html>
Raw
package.json
{
"uuid": "d91e7fbb-9884-4dc7-95e5-fa49e0431c24",
"description": "Zeno's paradoxes",
"dependencies": {
"angular": "1.4.0",
"davinci-mathbox": "latest",
"DomReady": "latest"
},
"operatorOverloading": false,
"name": "zeno's-paradoxes",
"version": "0.1.0"
}
Raw
script.ts
/**
* This is the scope for MySectionController.
*/
interface ZenoScope extends angular.IScope {
audio: boolean;
prev(): void;
next(): void;
/**
* Returns the text for the current step.
*/
text(): string;
/**
* The step is zero-based. Be careful because I think the director is 1-based.
*/
step: number;
maxSteps: number;
}
/**
*
*/
interface Step {
text: string;
mbox: {}[][]
}
/**
* Shared data
*/
var quad = [[[-1, -1], [1, -1]], [[-1, 1], [1, 1]]];
var epsilon = 0.0000001;
var formatter = function (x:number): any {
if (Math.abs(x - 1/3) < epsilon) return '1/3';
if (Math.abs(x - 2/3) < epsilon) return '2/3';
return x;
}
var orangered = 0xE54723;
var green = 0x20c050;
var gold = 0xfeb500;
angular.module('doodle', [])
.controller('zeno-controller', ['$scope', function($scope: ZenoScope) {
// The director is only visible within the controller. i.e. strictly private.
var director: MathBox.Director;
$scope.audio = true;
$scope.step = 0;
// TODO: Can we merge the text with the slides so that it is synchronized?
var steps: Step[] = scriptBuilder();
$scope.maxSteps = steps.length;
ThreeBox.preload([
'../shaders/MathBox.glsl.html',
'../img/achilles.png',
'../img/tortoise.png'
], function(assets) {
// We want to try to put this on our own canvas, instead of spawning a new one.
// It seems that something in the stack uses the identified element as the parent.
var canvasParent = document.getElementById('zeno');
// Something about mathBox is eating the mouse events.
var mathbox = mathBox(canvasParent, {
cameraControls: false, // We don't want camera controls for a slideshow. This is actually the defauklt
cursor: false,
controlClass: undefined, // ThreeBox.OrbitControls, // Trying to see if OrbitControls is eating the mouse events.
elementResize: true,
fullscreen: true,
screenshot: true,
stats: false,
scale: 1,
}).start();
director = new MathBox.Director(mathbox, steps.map(function(step: Step){return step.mbox}));
// The Director crashes if the steps div is missing!!!
document.getElementById('steps').style.opacity = '0';
// This isn't really what we want from AngularJS.
window.addEventListener('touchstart', function (e) {
$scope.$apply(function() {
$scope.next();
});
});
window.addEventListener('keydown', function (e) {
if (e.keyCode == 38 || e.keyCode == 37) {
// This is not AngularJS triggered, so we apply to kick-off a digest cycle.
$scope.$apply(function() {
$scope.prev();
});
}
else if (e.keyCode == 40 || e.keyCode == 39) {
// This is not AngularJS triggered, so we apply to kick-off a digest cycle.
$scope.$apply(function() {
$scope.next();
});
}
else {
return;
}
});
setUp(mathbox, assets);
$scope.$apply(function() {
go(0);
});
});
/**
* This function is idempotent, so it will be smart about reaching the end.
*/
function go(moves: number) {
// Don't allow the step to go out of bounds.
var prevStep = $scope.step;
$scope.step = Math.max(0, Math.min($scope.maxSteps - 1, $scope.step + moves));
director && director.go($scope.step + 1);
if ($scope.audio && $scope.step !== prevStep && $scope.step > prevStep) {
var msg = new window['SpeechSynthesisUtterance']($scope.text())
window['speechSynthesis'].speak(msg);
}
}
$scope.text = function(): string {
return steps[$scope.step].text;
}
$scope.prev = function() {
go(-1);
}
$scope.next = function() {
go(+1);
}
}]);
function scriptBuilder(): Step[] {
return [
{
text: "Use the keyboard arrow keys to step through.",
mbox: pause()
},
{
text: "" +
"The Greek philosopher Zeno devised a collection of paradoxes involving the finite and infinite." +
"One paradox involves a foot race between Achilles and a tortoise.",
mbox: []
},
{
text: "The paradox is told as follows:",
mbox: []
},
{
text: "The tortoise challenges Achilles to a foot race. The tortoise can only run half the speed of Achilles.",
mbox: pause()
},
{
text: "So, to make things fair, the tortoise gets a halfway head start.",
mbox: onYourMarks()
},
{
text: "Our intuition and some simple math tells us that Achilles and the tortoise will finish the course at the same time.",
mbox: onYourMarks()
},
{
text: "How long does it take Achilles to get to the halfway point and where will the tortoise be at that time?",
mbox: pause()
},
{
text: "In that time the tortoise has travelled one quarter of the course and is at the three quarters point.",
mbox: firstIteration()
},
{
text: "How long does it take Achilles to get to the three quarters point and where will the tortoise be?",
mbox: pause()
},
{
text: "We keep on repeating the question.",
mbox: moreIterations()
},
{
text: "No matter which step we consider, the tortoise is always ahead of Achilles. So how is it that they finish together?",
mbox: pause()
}
];
}
/**
* Move Achilles and the Tortoise to their starting positions.
*/
function onYourMarks(): {}[][] {
return [
['animate', '#achilles', {
mathPosition: [0, .65, 0],
mathScale: [.35, .35],
}, {
delay: 50,
duration: 800,
}],
['animate', '#tortoise', {
mathPosition: [.5, -.45, 0],
mathScale: [.35, .35],
mathRotation: [0, 0, 0],
}, {
delay: 50,
duration: 800,
}],
['add', 'axis', {
id: 'smallTicks',
axis: 0,
lineWidth: 3,
color: 0xc0c0c0,
tickScale: 2,
ticks: 16,
opacity: 0.001,
size: .1,
arrow: false,
zIndex: -10,
}, {
delay: 0,
duration: 1,
}],
['add', 'axis', {
id: 'largeTicks',
axis: 0,
lineWidth: 3,
color: 0xb0b0b0,
tickScale: 2,
ticks: 4,
opacity: 0.001,
size: .25,
arrow: false,
zIndex: -10,
}, {
delay: 0,
duration: 1,
}],
['animate', 'axis', {
opacity: 1,
}, {
delay: 300,
duration: 800,
}],
['add', 'curve', {
id: 'ta',
n: 2,
data: [[0, -.04, 0], [0, .25, 0]],
color: orangered,
lineWidth: 4,
zIndex: 20,
}, {
delay: 500,
duration: 700,
}],
['add', 'curve', {
id: 'tt',
n: 2,
data: [[.5, .04, 0], [.5, -.25, 0]],
color: green,
lineWidth: 4,
zIndex: 20,
}, {
delay: 500,
duration: 700,
}],
];
}
function firstIteration() {
return [
['animate', '#achilles', {
mathPosition: [.5, .65, 0],
}, {
delay: 50,
duration: 800,
}],
['animate', '#tortoise', {
mathPosition: [.75, -.45, 0],
}, {
delay: 50,
duration: 800,
}],
['animate', '#ta', {
mathPosition: [.5, 0, 0],
}, {
delay: 50,
duration: 800,
}],
['animate', '#tt', {
mathPosition: [.25, 0, 0],
}, {
delay: 50,
duration: 800,
}],
['add', 'vector', {
id: 'va',
n: 5,
color: orangered,
data: [
[0], [0],
[.5], [.5],
[.75], [.75],
[.875], [.875],
[.9375], [.9375],
],
lineWidth: 6,
size: .1,
zIndex: 0,
mathPosition: [0, 0.2],
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'vector', {
id: 'vt',
n: 5,
color: green,
data: [
[.5], [.5],
[.75], [.75],
[.875], [.875],
[.9375], [.9375],
[.96875], [.96875],
],
lineWidth: 6,
size: .1,
zIndex: 0,
mathPosition: [0, -0.2],
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.5],
[.75], [.75],
[.875], [.875],
[.9375], [.9375],
],
opacity: 1,
}, {
delay: 50,
duration: 800,
}],
['animate', '#vt', {
data: [
[.5], [.75],
[.75], [.75],
[.875], [.875],
[.9375], [.9375],
[.96875], [.96875],
],
opacity: 1,
}, {
delay: 50,
duration: 800,
}],
];
}
function moreIterations() {
return [
// Second iteration
['animate', '#achilles', {
mathPosition: [.75, .65, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#tortoise', {
mathPosition: [.875, -.45, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#ta', {
mathPosition: [.75, 0, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#tt', {
mathPosition: [.375, 0, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.75],
[.75], [.75],
[.875], [.875],
[.9375], [.9375],
],
}, {
delay: 50,
duration: 500,
}],
['animate', '#vt', {
data: [
[.5], [.75],
[.75], [.875],
[.875], [.875],
[.9375], [.9375],
[.96875], [.96875],
],
}, {
delay: 50,
duration: 500,
}],
// Third iteration
['animate', '#achilles', {
mathPosition: [.875, .65, 0],
}, {
delay: 350,
duration: 400,
}],
['animate', '#tortoise', {
mathPosition: [.9375, -.45, 0],
}, {
delay: 350,
duration: 400,
}],
['animate', '#ta', {
mathPosition: [.875, 0, 0],
}, {
delay: 350,
duration: 400,
}],
['animate', '#tt', {
mathPosition: [.4375, 0, 0],
}, {
delay: 350,
duration: 400,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.75],
[.75], [.875],
[.875], [.875],
[.9375], [.9375],
],
}, {
delay: 350,
duration: 400,
}],
['animate', '#vt', {
data: [
[.5], [.75],
[.75], [.875],
[.875], [.9375],
[.9375], [.9375],
[.96875], [.96875],
],
}, {
delay: 350,
duration: 400,
}],
// Fourth iteration
['animate', '#achilles', {
mathPosition: [.9375, .65, 0],
}, {
delay: 350,
duration: 300,
}],
['animate', '#tortoise', {
mathPosition: [.96875, -.45, 0],
}, {
delay: 350,
duration: 300,
}],
['animate', '#ta', {
mathPosition: [.9375, 0, 0],
}, {
delay: 350,
duration: 300,
}],
['animate', '#tt', {
mathPosition: [.46875, 0, 0],
}, {
delay: 350,
duration: 300,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.75],
[.75], [.875],
[.875], [.9375],
[.9375], [.9375],
],
}, {
delay: 350,
duration: 300,
}],
['animate', '#vt', {
data: [
[.5], [.75],
[.75], [.875],
[.875], [.9375],
[.9375], [.96875],
[.96875], [.96875],
],
}, {
delay: 350,
duration: 300,
}],
// Fifth iteration
['animate', '#achilles', {
mathPosition: [.96875, .65, 0],
}, {
delay: 350,
duration: 200,
}],
['animate', '#tortoise', {
mathPosition: [.984375, -.45, 0],
}, {
delay: 350,
duration: 200,
}],
['animate', '#ta', {
mathPosition: [.96875, 0, 0],
}, {
delay: 350,
duration: 200,
}],
['animate', '#tt', {
mathPosition: [.484375, 0, 0],
}, {
delay: 350,
duration: 200,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.75],
[.75], [.875],
[.875], [.9375],
[.9375], [.96875],
],
}, {
delay: 350,
duration: 200,
}],
['animate', '#vt', {
data: [
[.5], [.75],
[.75], [.875],
[.875], [.9375],
[.9375], [.96875],
[.96875], [.984375],
],
}, {
delay: 350,
duration: 200,
}],
];
}
function resetForWall() {
return [
['remove', '#tortoise, #vt, #tt', {
duration: 400,
}],
['animate', '#achilles', {
mathPosition: [0, .65, 0],
}, {
delay: 250,
duration: 800,
}],
['animate', '#ta', {
mathPosition: [0, 0, 0],
}, {
delay: 250,
duration: 800,
}],
['animate', '#va', {
data: [
[0], [0],
[.5], [.5],
[.75], [.75],
[.875], [.875],
[.9375], [.9375],
],
}, {
delay: 250,
duration: 800,
}],
['add', 'platonic', {
id: 'wall',
type: 'cube',
mathScale: [.041, .04, .05],
color: 0x6a5f46,
shaded: false,
mathPosition: [1.041, 0, .05],
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'platonic', {
id: 'wall',
type: 'cube',
mathScale: [.041, .04, .05],
color: 0x7a6f56,
shaded: false,
mathPosition: [1.041, .09, .05],
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'platonic', {
id: 'wall',
type: 'cube',
mathScale: [.041, .04, .05],
color: 0x8a7f66,
shaded: false,
mathPosition: [1.041, .18, .05],
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'platonic', {
id: 'wall',
type: 'cube',
mathScale: [.041, .04, .05],
color: 0x9a8f76,
shaded: false,
mathPosition: [1.041, .27, .05],
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'platonic', {
id: 'wall',
type: 'cube',
mathScale: [.039, .158, .048],
color: 0xe5d7b3,
shaded: false,
mathPosition: [1.041, .125, .05],
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['animate', '#wall', {
opacity: 1,
}, {
delay: 500,
duration: 500,
}],
];
}
function firstIterationToWall() {
return [
// First
['animate', '#achilles', {
mathPosition: [.5, .65, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#ta', {
mathPosition: [.5, 0, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.5],
[.75], [.75],
[.875], [.875],
[.9375], [.9375],
],
opacity: 1,
}, {
delay: 50,
duration: 500,
}],
];
}
function moreIterationsToWall() {
return [
// Second
['animate', '#achilles', {
mathPosition: [.75, .65, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#ta', {
mathPosition: [.75, 0, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.75],
[.75], [.75],
[.875], [.875],
[.9375], [.9375],
],
opacity: 1,
}, {
delay: 50,
duration: 500,
}],
// Third
['animate', '#achilles', {
mathPosition: [.875, .65, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#ta', {
mathPosition: [.875, 0, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.75],
[.75], [.875],
[.875], [.875],
[.9375], [.9375],
],
opacity: 1,
}, {
delay: 50,
duration: 500,
}],
// Fourth
['animate', '#achilles', {
mathPosition: [.9375, .65, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#ta', {
mathPosition: [.9375, 0, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.75],
[.75], [.875],
[.875], [.9375],
[.9375], [.9375],
],
opacity: 1,
}, {
delay: 50,
duration: 500,
}],
// Fifth
['animate', '#achilles', {
mathPosition: [.96875, .65, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#ta', {
mathPosition: [.96875, 0, 0],
}, {
delay: 50,
duration: 500,
}],
['animate', '#va', {
data: [
[0], [.5],
[.5], [.75],
[.75], [.875],
[.875], [.9375],
[.9375], [.96875],
],
opacity: 1,
}, {
delay: 50,
duration: 500,
}],
];
}
function addHalfIntervals() {
return [
['remove', '#achilles', {
delay: 400,
duration: 300,
}],
['animate', 'viewport', {
range: [[-.5, 1.5], [-.25, 1.75], [-1, 1]],
scale: [3.2, 1, 1],
}, {
delay: 400,
duration: 1000,
}],
['animate', '#smallTicks', {
ticks: 32,
}, {
delay: 950,
duration: 500,
}],
['animate', '#largeTicks', {
ticks: 8,
}, {
delay: 950,
duration: 500,
}],
['add', 'axis', {
id: 'labelTicks',
axis: 0,
tickScale: 2,
ticks: 4,
size: .25,
lineWidth: 3,
opacity: 1,
arrow: false,
labels: false,
zIndex: -10,
color: 0xb0b0b0,
}, {
delay: 0,
duration: 1,
}],
['add', 'axis', {
id: 'labels',
axis: 0,
size: 0,
tickScale: 2,
ticks: 8,
lineWidth: 0.0001,
opacity: 0.001,
arrow: false,
labels: true,
formatter: formatter,
distance: 25,
decimals: 8,
zIndex: -10,
color: 0xb0b0b0,
}, {
delay: 0,
duration: 1,
}],
['animate', '#labels', {
ticks: 4,
}, {
duration: 1,
}],
// Step 1
['add', 'surface', {
id: 'd1',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.5, 1.6, 0],
mathScale: [.497, .05, 0],
color: gold,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
// Step 2
['add', 'surface', {
id: 'a2',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.25, 1.4, 0],
mathScale: [.247, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'd2',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.75, 1.4, 0],
mathScale: [.247, .05, 0],
color: gold,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
// Step 3
['add', 'surface', {
id: 'i3',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.25, 1.2, 0],
mathScale: [.247, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'a3',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.625, 1.2, 0],
mathScale: [.122, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'd3',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.875, 1.2, 0],
mathScale: [.122, .05, 0],
color: gold,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
// Step 4
['add', 'surface', {
id: 'i4',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.25, 1.0, 0],
mathScale: [.247, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'j4',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.625, 1.0, 0],
mathScale: [.122, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'a4',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.8125, 1.0, 0],
mathScale: [.0595, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'd4',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.9375, 1.0, 0],
mathScale: [.0595, .05, 0],
color: gold,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
// Step 5
['add', 'surface', {
id: 'i5',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.25, .8, 0],
mathScale: [.247, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'j5',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.625, .8, 0],
mathScale: [.122, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'k5',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.8125, .8, 0],
mathScale: [.0595, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'a5',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.90625, .8, 0],
mathScale: [.02825, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'd5',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.96875, .8, 0],
mathScale: [.02825, .05, 0],
color: gold,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
// Step 6
['add', 'surface', {
id: 'i6',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.25, .6, 0],
mathScale: [.247, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'j6',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.625, .6, 0],
mathScale: [.122, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'k6',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.8125, .6, 0],
mathScale: [.0595, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'l6',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.90625, .6, 0],
mathScale: [.02825, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'a6',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.953125, .6, 0],
mathScale: [.012625, .05, 0],
color: orangered,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['add', 'surface', {
id: 'd6',
n: [2, 2],
live: false,
data: quad,
zIndex: 30,
mathPosition: [0.984375, .6, 0],
mathScale: [.012625, .05, 0],
color: gold,
shaded: false,
opacity: 0.001,
}, {
delay: 0,
duration: 1,
}],
['animate', '#labels, #labelTicks', {
opacity: 1,
}, {
delay: 1500,
duration: 500,
}],
['animate', '#a2', {
opacity: 1,
}, {
delay: 1100,
duration: 500,
}],
['animate', '#i3, #a3', {
opacity: 1,
}, {
delay: 1300,
duration: 500,
}],
['animate', '#i4, #j4, #a4', {
opacity: 1,
}, {
delay: 1500,
duration: 500,
}],
['animate', '#i5, #j5, #k5, #a5', {
opacity: 1,
}, {
delay: 1700,
duration: 500,
}],
['animate', '#i6, #j6, #k6, #l6, #a6', {
opacity: 1,
}, {
delay: 1900,
duration: 500,
}],
];
}
function pause(): {}[][] {
return [];
}
/**
* Construct the viewport, camera, and all the objects in the stage.
*/
function setUp(mathbox: MathBox.Stage, assets: {[name:string]:any}) {
mathbox
.viewport({
type: 'cartesian',
range: [[0, 1], [-1, 1], [-1, 1]],
scale: [1.6, 1, 1],
rotation: [0, 0, 0],
})
.camera({
orbit: 3.5,
phi: τ/4,
theta: 0,
})
.transition(300)
.surface({
id: "achilles",
n: [2, 2],
domain: [[-.3125, .3125], [-1, 1]],
expression: function (x: number, y: number) { return [x, -y, 0]; },
color: 0xFFFFFF,
shaded: false,
map: assets['achilles'],
mapColor: 1,
mathPosition: [.25, .3, 0],
mathScale: [.5, .5],
zIndex: -60,
live: false,
})
.surface({
id: "tortoise",
n: [2, 2],
domain: [[-.3125, .3125], [-1, 1]],
expression: function (x: number, y: number) { return [x, -y, 0]; },
color: 0xFFFFFF,
shaded: false,
map: assets['tortoise'],
mapColor: 1,
mathPosition: [.75, -.45, 0],
mathRotation: [0, Math.PI, 0],
mathScale: [.5, .5],
zIndex: -50,
live: false,
});
}
Raw
style.less
html, body { height: 100%; }
body { margin: 0; padding: 0 }
canvas { display: block }
#info {
position: absolute;
left: 50%;
bottom: 50px;
z-index: 20;
width: 300px;
margin-left: -150px;
padding: 25px;
background: rgba(0, 0, 0, .5);
color: #fff;
font-family: "Lucida Grande", sans-serif;
font-size: 16px;
text-align: center;
border-radius: 3px;
text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);
opacity: 1;
}
#info.transition {
-webkit-transition: opacity 300ms ease-in-out;
-moz-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
#info kbd {
background: #aaa;
box-shadow: 0px 1px 1px rgba(0, 0, 0, .3);
border-radius: 3px;
padding: 3px;
margin: 3px;
font-family: inherit;
}
.mathbox-label {
font-family: 'klavika-web', sans-serif;
font-weight: normal;
font-style: normal;
text-shadow:
3px 0px 1px rgb(255, 255, 255),
-3px 0px 1px rgb(255, 255, 255),
0px -3px 1px rgb(255, 255, 255),
0px 3px 1px rgb(255, 255, 255),
2px 2px 1px rgb(255, 255, 255),
-2px 2px 1px rgb(255, 255, 255),
2px -2px 1px rgb(255, 255, 255),
-2px -2px 1px rgb(255, 255, 255),
3px 2px 1px rgb(255, 255, 255),
-3px 2px 1px rgb(255, 255, 255),
3px -2px 1px rgb(255, 255, 255),
-3px -2px 1px rgb(255, 255, 255),
1px 3px 1px rgb(255, 255, 255),
-1px 3px 1px rgb(255, 255, 255),
1px -3px 1px rgb(255, 255, 255),
-1px -3px 1px rgb(255, 255, 255),
-1px -1px 1px rgb(255, 255, 255),
-1px 1px 1px rgb(255, 255, 255),
1px -1px 1px rgb(255, 255, 255),
1px 1px 1px rgb(255, 255, 255);
}
Raw
tsconfig.json
{
"allowJs": true,
"checkJs": true,
"declaration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"jsx": "react",
"module": "system",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"removeComments": false,
"skipLibCheck": true,
"sourceMap": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"target": "es5",
"traceResolution": true
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment