JSFiddle 1
This is my first try at a JSFiddle link. Thanks to Joe Ogletree for the assist!
Borges / Bloch Iteration 1
This is the first iteration of my project turning the ideas presented in William Goldbloom Bloch’s “The Unimaginable Mathematics of Borges’ Library of Babel” into a interactive conceptual design piece for teaching mathematics, programming and other things.
Step 1: Get a high-level conceptual overview of the ideas -> Basically the Table of Contents:
———————————————————————————————————–
1 -> Combinatorics: Contemplating Variations of the 23 Letters
2 -> Information Theory: Cataloging the Collection
3 -> Real Analysis: The Book of Sand
4 -> Topology and Cosmology: The Universe (Which Others Call the Library)
5 -> Geometry and Graph Theory: Ambiguity and Access
6 -> More Combinatorics: Disorderings into Order
7 -> A Homomorphism: Structure into Meaning
8 -> Critical Points
9 -> Openings
After browsing through these chapters, I determined that the next step is to
focus on the “Information Theory” chapter.
Canvas Drawing Framework Iteration 2
Here is another potential component of the Canvas Drawing framework that I started in the last post. This is adapted from the Mozilla website:
https://developer.mozilla.org/samples/canvas-tutorial/2_3_canvas_lineto.html
function drawShape() {
<pre id="line1"> var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// Filled Triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// Stroked Triangle
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else {
alert( 'You need another browser to view this demo.');
}
}
// The HTML associated with this function looks like the following:
<html>
<head>
<script type="text/javascript">
function drawShape() { }
</script>
</head>
<body onload="drawShape();"></body>
<canvas id="tutorial" width="150" height="150"></canvas>
</html>
Canvas Drawing Framework Iteration 1.
The following code is the beginning of a small framework used to test Canvas drawings.
It is adapted from David Flanagan’s JavaScript: The Definitive Guide, 5th edition.
<html>
<head>
<script>
function makeCanvas(id, width, height) {
var canvas = document.createElement("canvas");
canvas.id = id;
canvas.width = width;
canvas.height = height;
return canvas;
}
function pieChart(canvas, data, cx, cy, r, colors, labels, lx, ly) {}
function init() {
var canvas = makeCanvas("canvas", 600, 400);
document.body.appendChild(canvas);
pieChart("canvas", [12,23,34,45], 200, 200, 150,
["red", "blue", "yellow", "green"],
["North", "South", "East", "West"],
400, 100);
}
</script>
</head>
<body onload="init()"></body>
</html>
Logics I.
I decided to use K.M. Kontopoulos' (a/k/a Dr.K) The Logics of Social Stucture as a source to demonstrate various ways to organize concepts. Consider this Iteration 1. More will unfold in coming days and weeks. I'm not sure exactly where its going, but I am going trust in the process of incremental innovation. (The Logics of Structuration) (Micrologics) (1. The logic of organizational hierarchies) (2. The logic of flows and impaired flows) (...) (16. The logic of voting) (Mesologics) (17. The logic of fluctuation) (18. The logic of nucleation (catalysis, autocatalysis)) (...) (34. The logic of parsing) (Macrologics) (35. The logic of swamping) (36. Rules of pruning) (...) (40. The logic of metaptations)
Emacs in the browser
As of a few days ago, I turned the corner on Emacs, and I am able to glimpse how powerful it is. Anyway, I found this amazing thing:
http://www.ymacs.org/demo/
Closure code
<pre>// from the Mozilla Developer Center website on 'Closures'
// https://developer.mozilla.org/en/JavaScript/Guide/Closures
// not a closure
function init() {
var name = "Mozilla";
function displayName() {
alert(name);
}
displayName();
}
// a closure
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
// a 'slightly more interesting' closure
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
print(add5(2));
print(add10(2));
// practical closures
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12 px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
function makeSizer(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
function setupButtons() {
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
}
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>
// emulating private methods with closures
var Counter = (function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
})();
alert(Counter.value()); /* Alerts 0 */
Counter.increment();
Counter.increment();
alert(Counter.value()); /* Alerts 2 */
Counter.decrement();
alert(Counter.value()); /* Alerts 1 */
// multiple counters
var makeCounter = function() {
var privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
},
value: function() {
return privateCounter;
}
}
};
</pre>
Frame for Fluid 960 Grid System
This is a high level frame for the excellent Fluid 960 Grid System
http://www.designinfluences.com/fluid960gs/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Fluid 960 Grid System | 12-column Grid</title> <link rel="stylesheet" type="text/css" href="reset.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/text.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/grid.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" /> <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]--> <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]--> </head> <body> <div class="container_12"></div> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <script type="text/javascript" src="js/jquery-fluid16.js"></script> </body> </html>
leave a comment