shoofle/shooflenet
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first draft of circle script writings

Browse Source
This commit is contained in:
Shoofle 2020-12-11 00:31:49 -05:00
parent 5550215d5a
commit e4e639b065
3 changed files with 477 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

472
articles/circle_script.article.html
View File

@ -1,400 +1,82 @@
<article> <article>
<style type="text/css"> <h3>An introduction to Circle Script (Version... 3?)</h3>
svg circle, svg path { fill: none; } <p>Circle script is a writing system that I made up. The fundamental gimmick of it is that words and sentences in it form circles.</p>
svg .glyph { stroke: #600; fill: none; } <img src="/circle_script/circle_script_example_1.jpg" alt="A large glyph composed of nested circles." />
svg .vowel { stroke: #044; } <p>It's largely decorative, has vague intentions at being phonetic, and I like using it in art! The other primary use case is writing cute notes to people I like.</p>
svg .radical { stroke: #004; } <h4>Here's the overview of how to read circle script:</h5>
svg circle.radical { fill: black; } <p>To read circle script, you start at whatever spot is marked with a little line segment outside the circle, parallel to it. If that's not present, you can usually start at the bottom. Walk around the circle widdershins (counterclockwise) and decode each shape and glyph you encounter, turning them into sounds.</p>
svg .enclosure { stroke: #000; } <img src="/circle_script/circle_script_example_1.jpg" alt="A circle script glyph showing a single word-circle, with a small line outside the circle for a starting-point indicator." />
</style> <p>If you're reading a whole sentence, you walk around the circle widdershins (counterclockwise), and read each word as you come across it. For each word, you read it starting from the point where it touches the circle that contains it, so you kind of reorient as you go.</p>
<div class="row-fluid"> <p>Also, you might have noticed that some of the shapes inside word-circles have lines connecting them. Those are decorative! A lot of the component parts of the circle script writing system have places for lines to come off. These can be connected as you like, but the... proper? I guess? fancy, perhaps? way to use them is to draw connecting lines between words which are conceptually linked. You might use those lines to connect an adjective with the noun it modifies, or the names of two people who care about each other. There's a lot of room for poetic embellishment in drawing lines between words!</p>
<div class="span6 offset3"> <p>Of course, you can also just draw the lines out in a way that looks cool. :)</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-105 -105 210 210"> <h4>Okay, now the meat of circle script: How to read words!</h5>
<defs> <p>To read circle script, you need to understand consonants and vowels. Consonants are easier, so we'll start with those. Consonants are drawn with marks that float above (inside) the continuous line of the circle. Each consonant is composed of a shape, which corresponds to what kind of sound it is, and a diacritic, which indicates where in the mouth it is made. Additionally, if the consonant is <a href="https://en.wikipedia.org/wiki/Voice_(phonetics)">voiced</a>, the shape will generally be drawn with a doubled line.</p>
<path id="mound" d="M-10,0 H-8 A9,8 0,0,1 8,0 H10" class="glyph"></path> <p><strong>Phew!</strong> That sounded complicated. It's not so bad, really - I'm going to give you a grid, and you can just find the sound you want, and it'll tell you how to draw it. All of that business about kinds of sounds, places in mouths, and voice just means this is a featural script, so that similar sounds are indicated by similar-looking letters.</p>
<g id="mound2"> <aside><p>In this version of circle script, consonants do not distort the overall shape, and vowels do. In versions 1 and 2, it was the other way around!</p></aside>
<path d="M-10,0 H-8 A9,8 0 0,1 8,0 H10" class="glyph"></path> <table id="consonant-grid">
<path d="M-6,0 A7,6 0,0,1 6,0" class="glyph"></path> <thead>
</g> <tr class="header">
<path id="omega" d="M-10,0 H-4 A7,7 0,1,1 4,0 H10" class="glyph"></path> <th></th>
<g id="omega2"> <th scope="col" class="diacritic-header"><img src="consonant-diacritic-1.png" /></th>
<path d="M-10,0 H-4 A7,7 0,1,1 4,0 H10" class="glyph"></path> <th scope="col" class="diacritic-header"><img src="consonant-diacritic-2.png" /></th>
<path d="M-1,-1 A4.5,4.5 0,1,1 1,-1" class="glyph"></path> <th scope="col" class="diacritic-header"><img src="consonant-diacritic-3.png" /></th>
</g> <th scope="col" class="diacritic-header"><img src="consonant-diacritic-4.png" /></th>
<path id="angle" d="M-10,0 H-6 L0,-8 L6,0 H10" class="glyph"></path> <th></th>
<g id="angle2"> </tr>
<path d="M-10,0 H-6 L0,-8 L6,0 H10" class="glyph"></path> </thead>
<path d="M-4,0 L0,-5.3333 L4,0" class="glyph"></path> <tbody>
</g> <tr>
<path id="chalice" d="M-10,0 H-6 A15,15 0,0,1 -10,-6 A15,10 0,0,0 10,-6 A15,15 0,0,1 6,0 H10" class="glyph"></path> <th scope="row" class="consonant-shape"><img src="consonant-shape-1-unvoiced.png" /></th>
<g id="chalice2"> <td>[m] <strong>m</strong>ap</td>
<path d="M-10,0 H-6 A15,15 0,0,1 -10,-6 A15,10 0,0,0 10,-6 A15,15 0,0,1 6,0 H10" class="glyph"></path> <td>[n] <strong>n</strong>ope</td>
<path d="M-8.5,-3 A 14,9 0,0,0 8.5,-3" class="glyph"></path> <td></td>
</g> <td>[ŋ] ha<strong>ng</strong></td>
<path id="loop" d="M-10,0 H-8 C6,0 6,-10 0,-10 C-6,-10 -6,0 6,0 H10" class="glyph"></path> <th scope="row" class="consonant-shape"><img src="consonant-shape-1-voiced.png" /></th>
<g id="loop2"> </tr>
<path d="M-10,0 H-8 C6,0 6,-10 0,-10 C-6,-10 -6,0 6,0 H10" class="glyph"></path> <tr>
<circle r="2" cx="0" cy="-6" class="glyph"></circle> <th scope="row" class="consonant-shape"><img src="consonant-shape-2-unvoiced.png" /></th>
</g> <td>[p] <strong>p</strong>ear, [b] <strong>b</strong>at</td>
<path id="weird_up" d="M -4,-4 A 4,6 0,0,0 0,-8 A 4,6 0,0,0 4,-4" class="vowel"></path> <td>[t] <strong>t</strong>alk, [d] <strong>d</strong>eal</td>
<path id="weird_down" d="M -4,-8 A 4,6 0,0,0 0,-4 A 4,6 0,0,0 4,-8" class="vowel"></path> <td></td>
</svg> <td>[k] <strong>k</strong>ale, [g] <strong>g</strong>ulp</td>
<th scope="row" class="consonant-shape"><img src="consonant-shape-2-voiced.png" /></th>
</tr>
<tr>
<th scope="row" class="consonant-shape"><img src="consonant-shape-3-unvoiced.png" /></th>
<td>[f] <strong>f</strong>ace, [v] <strong>v</strong>eer</td>
<td>[s] <strong>s</strong>ight, [z] <strong>z</strong>oot</td>
<td>[ʃ] <strong>sh</strong>ort, [ʒ] mea<strong>s</strong>ure</td>
<td></td>
<th scope="row" class="consonant-shape"><img src="consonant-shape-3-voiced.png" /></th>
</tr>
<tr>
<th scope="row" class="consonant-shape"><img src="consonant-shape-4-unvoiced.png" /></th>
<td>[θ] <strong>th</strong>in, [ð] <strong>th</strong>at</td>
<td></td>
<td>[tʃ] <strong>ch</strong>alk, [dʒ] <strong>j</strong>u<strong>dg</strong>e</td>
<td></td>
<th scope="row" class="consonant-shape"><img src="consonant-shape-4-voiced.png" /></th>
</tr>
<tr>
<th scope="row" class="consonant-shape"><img src="consonant-shape-5-unvoiced.png" /></th>
<td>[w] <strong>w</strong>alk</td>
<td>[ɹ] <strong>r</strong>eal, [l] <strong>l</strong>atent</td>
<td>[ʎ] <strong>y</strong>eet</td>
<td>[h] <strong>h</strong>edonism</td>
<th scope="row" class="consonant-shape"><img src="consonant-shape-5-voiced.png" /></th>
</tr>
</tbody>
</table>
<p>If you're familiar with the <a href="https://en.wikipedia.org/wiki/International_Phonetic_Alphabet">international phonetic alphabet</a> this might look somewhat familiar! (Although I've taken some heavy liberties to make this fit into a grid and match with my American understanding of what sounds are similar) Each square in the grid shows the two consonants (one unvoiced, one unvoiced) indicated by that combination of diacritic (above) and shape (from the side). The unvoiced version (on the left, in a grid square) is indicated by the single-line version of the shape, seen on the left side of the grid. The voiced version uses the double-line version, seen on the right side of the grid. I've included the IPA transcription for the consonants, along with an example of that sound in my dialect, which is probably roughly <a href="https://en.wikipedia.org/wiki/General_American_English">General American English</a>.</p>
<p>Vowels are a little more haphazard. Have you ever really thought about vowels? They're pretty messed up, especially in English. We were all taught the five vowels are a, e, i, o, u, and sometimes y. It turns out that while we have five and a half <em>letters</em> we call vowels, in English, they correspond to anywhere between twelve and fifteen different <em>sounds</em>. And those sounds aren't even necessarily the ones you're thinking of - a lot of the things we think of as individual vowels, like the /i/ in "r<strong>i</strong>ght", are actually diphthongs, composed of two vowels that we run together.</p>
<p>Anyway, the vowels are vaguely organized according to whatever I thought made sense, into a handful of "sequences". In general, they're drawn by changing the shape of the overall circle defining a word - as you're drawing that circle, you make a detour to trace out the vowel shape. That overall shape indicates the sequence, and it's narrowed further down by lines or circles drawn on it. Is it lines? Is it circles? Who knows, I haven't decided yet!</p>
<p>The examples I give are based on my accent, so if there's any confusion, consult a resource like <a href="https://ipachart.com">ipachart.com</a> for recordings of vowels. Several common diphthongs are available as vowel shapes.</p>
<div id="vowels-container">
<div class="vowel-sequence"></div>
<div class="vowel-sequence"></div>
<div class="vowel-sequence"></div>
<div class="vowel-sequence"></div>
</div> </div>
</div>
<hr>
<input type="text" value="shoof~l ihs ~ bihg dohrk" />
<h3>Available Sounds:</h3>
<p id="sounds_list"></p>
<script type="text/javascript">
var svg_ns = "http://www.w3.org/2000/svg";
var xlink_ns = "http://www.w3.org/1999/xlink";
function cos_deg (angle) { return Math.cos(angle * Math.PI / 180); }
function sin_deg (angle) { return Math.sin(angle * Math.PI / 180); }
function norm (vector) {
var norm = Math.sqrt(vector.x*vector.x + vector.y*vector.y);
return {x: vector.x / norm, y: vector.y / norm};
}
function sub (a, b) { return {x: a.x-b.x, y: a.y-b.y}; }
function add (a, b) { return {x: a.x+b.x, y: a.y+b.y}; }
function mul (a, b) {
if ("x" in a) { return {x: a.x*b, y: a.y*b}; }
return a*b;
}
// Table is the table of what letters mean what things!
// Each entry in the table is a list of columnar cells.
// Each column corresponds to a particular radical configuration.
// Each cell is a list of strings which will be recognized in parsing.
var table = {};
// Main consonants!
table["mound"] = [ ["m"], ["n"], [], ["ng"]];
table["omega"] = [ ["p"], ["t"], [], ["k", "c", "q"]];
table["angle"] = [ ["f", "ph"], ["s"], ["sh"], []];
table["loop"] = [ ["th"], [], ["ch"], []];
table["chalice"] = [["w"], ["r"], ["y"], ["h"]];
// Alternate (mostly, voiced) consonants!
table["mound2"] = [ [], [], [], []];
table["omega2"] = [ ["b"], ["d"], [], ["g"]];
table["angle2"] = [ ["v"], ["z"], ["zh"], []];
table["loop2"] = [ ["dh"], [], ["j"], []];
table["chalice2"] = [[], ["l"], [], []];
// Vowels in the eat/ate/at and oh/ow/aw tracks!
table["above double"] = [["ee"], ["ay"], ["a"]];
table["above single"] = [["ih"], ["eh", "e"], ["ah"]];
table["below"] = [["oh", "o"], ["ow", "ou"], ["aw"]];
// Vowels on the line!
table["on the line double"] = [["uh"], ["oo"]];
table["on the line single"] = [["~"], ["u"]];
// The weird ones!
table["weird up"] = [["i"]];
table["weird down"] = [["oy", "oi"]];
// These lists simply list out which radicals should be shown.
// four_rad_options contains the radicals array that should be passed to make glyphs in rows with four columns.
// three_rad_options contains the radicals array that will be passed to make glyphs in rows with three columns.
// And so on.
// These are consumed in make_new_glyph().
// Basically, each glyph has a number of locations that radicals are placed.
// If a shape is in the third column of a four-column row, then we look at four_rad_options, and see that the
// third element is [null, "dot", "dot"]. So that shape will have no radical in the first position, and dots in
// both the second and third positions.
var four_rad_options = [];
four_rad_options.push(["dot", null, null]);
four_rad_options.push(["line", null, null]);
four_rad_options.push([null, "dot", "dot"]);
four_rad_options.push([null, "line", "line"]);
var three_rad_options = [];
three_rad_options.push(["line", null]);
three_rad_options.push([null, null]);
three_rad_options.push([null, "line"]);
var two_rad_options = [];
two_rad_options.push([null, null]);
two_rad_options.push(["line", "line"]);
var one_rad_options = [];
one_rad_options.push([]);
var rad_options = [one_rad_options, two_rad_options, three_rad_options, four_rad_options];
// Invert the table of shapes, and the lists of radical options, into a lookup table.
// The keys are phrases recognized as coding a sound, and the values are objects describing the appearance of the glyph that should result.
var lookup = {};
$.each(table, function(shape_name, row) {
var radical_options = rad_options[row.length - 1];
$.each(row, function(radical_index, valid_sequences) {
var current_radicals = radical_options[radical_index];
$.each(valid_sequences, function(i, phrase) {
lookup[phrase] = {name: shape_name, radicals: current_radicals};
});
});
});
var consonant_shapes = "mound omega angle chalice loop ";
consonant_shapes = consonant_shapes + consonant_shapes.replace(/ /gi, "2 ");
consonant_shapes = consonant_shapes.split(" ");
console.log(consonant_shapes);
var vowel_shapes = "above double,above single,below,on the line double,on the line single,weird up,weird down".split(",");
// Defines the positions of the radicals for glyphs. Should perhaps be moved to live in the XML?
// Maybe each symbol could be a group, and then have radical shapes identified by their classes,
// and then dynamically shown/hidden?
var consonant_radical_positions = {
"mound": [{x: 0, y: -8}, {x: -3, y: -7}, {x: 3, y: -7}],
"omega": [{x: 0, y: -16}, {x: -3, y: -15}, {x: 3, y: -15}],
"angle": [{x: 0, y: -12}, {x: -3, y: -10}, {x: 3, y: -10}],
"loop": [{x: 0, y: -14}, {x: -3, y: -14}, {x: 3, y: -14}],
"chalice": [{x: 0, y: -7}, {x: -3, y: -7}, {x: 3, y: -7}]
};
// Ensure that all the doubled glyphs have the same radical positions as their singled counterparts.
$.each(consonant_shapes, function(i, name) {
if (name.slice(0, -1) in consonant_radical_positions) {
consonant_radical_positions[name] = consonant_radical_positions[name.slice(0, -1)];
}
});
var radical_backup = 3.5;
var radical_length = 3;
var radical_length_vowel = 6;
var vowel_radius = 4;
var inset = 5;
var word_radius = [14, 14, 14, 16, 20, 24, 28, 32];
var sentence_radius = 80;
var the_big_word;
function new_glyph(symbol_name, radicals) {
var glyph;
if ($.inArray(symbol_name, consonant_shapes) != -1) {
glyph = new_consonant(symbol_name, radicals);
}
if ($.inArray(symbol_name, vowel_shapes) != -1) {
glyph = new_vowel(symbol_name, radicals);
}
glyph.name = symbol_name;
glyph.radicals = radicals;
return glyph;
}
function new_vowel(symbol_name, radicals) {
var s = {handles: {}, vectors: []};
s.handles.circle_in = {x: 0, y: 0};
s.handles.circle_out = {x: 0, y: 0};
s.handles.radicals = [];
if (symbol_name == "weird up" || symbol_name == "weird down") {
s.e = ns_elem('use', svg_ns, {'xlink:href': '#' + symbol_name.replace(" ", "_")}, xlink_ns);
s.handles.center = {x: 0, y: -6};
}
else {
s.e = ns_elem('g', svg_ns);
if (symbol_name.indexOf("above") != -1) { s.handles.center = {x: 0, y: -8}; }
if (symbol_name.indexOf("below") != -1) { s.handles.center = {x: 0, y: 8}; }
if (symbol_name.indexOf("on the line") != -1) { s.handles.center = {x: 0, y: 0}; }
s.handles.radicals.push({x: 0, y: s.handles.center.y - vowel_radius});
s.handles.radicals.push({x: 0, y: s.handles.center.y + vowel_radius});
var vowel_out = $(ns_elem('circle', svg_ns));
vowel_out.attr({r: vowel_radius, cx: s.handles.center.x, cy: s.handles.center.y}).attr('class', 'vowel');
$(s.e).append(vowel_out);
if (symbol_name.indexOf("double") != -1) {
var vowel_in = $(ns_elem('circle', svg_ns));
vowel_in.attr({r: vowel_radius/3, cx: s.handles.center.x, cy: s.handles.center.y}).attr('class', 'vowel');
$(s.e).append(vowel_in);
}
$.each(radicals, function (index, value) {
if (value != "line") { return true; }
var start = s.handles.radicals[index]; var d = norm(sub(start, s.handles.center));
var end = { x: start.x + d.x * radical_length_vowel, y: start.y + d.y * radical_length_vowel};
var line = ns_elem('path', svg_ns);
$(line).attr('d', 'M ' + start.x + ', ' + start.y + ' L ' + end.x + ', ' + end.y);
$(line).attr('class', 'radical')
$(s.e).append(line);
});
}
$.each(s.handles, function(index, value) { if (index != "radicals") { s.vectors.push(value); } });
$.each(s.handles.radicals, function(index, value) { s.vectors.push(value); });
return s;
}
function new_consonant(symbol_name, radicals) {
var s = {e: ns_elem('g', svg_ns), handles: {}, vectors: []};
s.handles.center = {x: 0, y: 0};
s.handles.circle_in = {x: -10, y: 0};
s.handles.circle_out = {x: 10, y: 0};
s.handles.radicals = {};
$.extend(true, s.handles.radicals, consonant_radical_positions[symbol_name]);
$(s.e).append(ns_elem('use', svg_ns, {'xlink:href': '#' + symbol_name}, xlink_ns));
$.each(radicals, function(index, value) {
var radical_position = s.handles.radicals[index];
if (value == "dot") {
var circle = $(ns_elem('circle', svg_ns));
circle.attr({r: 1, cx: radical_position.x, cy: radical_position.y});
circle.attr('class', 'radical');
$(s.e).append(circle);
}
if (value == "line") {
var d = norm(sub(radical_position, s.handles.center));
var start = sub(radical_position, mul(d, radical_backup));
var end = add(radical_position, mul(d, radical_length));
var line = $(ns_elem('path', svg_ns));
line.attr('d', 'M' + start.x + ',' + start.y + ' L' + end.x + ',' + end.y);
line.attr('class', 'radical');
$(s.e).append(line);
}
});
$.each(s.handles, function(index, value) { if (index != "radicals") { s.vectors.push(value); } });
$.each(s.handles.radicals, function(i, vector) { s.vectors.push(vector); });
return s;
}
function transform_for_circle(radius, angle, glyph) {
var group = ns_elem('g', svg_ns);
$(group).attr('transform', 'rotate(' + (-1*angle) + ') translate(0 ' + radius + ')');
$(group).append(glyph.e);
$.each(glyph.vectors, function (name, value) {
// Translate the vector.
var translated = {};
translated.x = value.x;
translated.y = value.y + radius;
// Rotate the vector.
var rotated = {};
rotated.x = translated.x * cos_deg(-angle) - translated.y * sin_deg(-angle);
rotated.y = translated.x * sin_deg(-angle) + translated.y * cos_deg(-angle);
// Change the vector in-place.
value.x = rotated.x;
value.y = rotated.y;
});
glyph.e = group;
return glyph;
}
function enclose(radius, list_of_glyphs) {
var length = list_of_glyphs.length;
angle_step = 360 / length;
var enclosure = {e: ns_elem('g', svg_ns), children: [], handles: {}, vectors: [] };
$.each(list_of_glyphs, function (index, glyph) {
var the_glyph = transform_for_circle(radius, angle_step*index, glyph);
enclosure.children.push(the_glyph);
$(enclosure.e).append(the_glyph.e);
$.each(the_glyph.vectors, function (i, vector) { enclosure.vectors.push(vector); });
});
$.each(enclosure.children, function (index) {
var current = enclosure.children[index];
var next = enclosure.children[(index+1) % length];
var npd = "M " + current.handles.circle_out.x + " " + current.handles.circle_out.y;
var arc = "A" + radius + "," + radius + " 0,0,0 ";
if (length != 1) {
npd = npd + arc + next.handles.circle_in.x + "," + next.handles.circle_in.y + " ";
}
else {
npd = npd + arc + "0," + (next.handles.circle_in.y - radius - radius) + " ";
npd = npd + arc + next.handles.circle_in.x + "," + next.handles.circle_in.y + " ";
}
var arc = $(ns_elem('path', svg_ns)).attr('d', npd).attr('class', 'enclosure');
$(enclosure.e).append(arc);
});
$(enclosure.e).attr('transform', 'translate(0 ' + (-radius - inset) + ')');
$.each(enclosure.vectors, function (i, vector) {
vector.y = vector.y - radius - inset;
});
enclosure.handles.circle_in = {x: 0, y: 0};
enclosure.handles.circle_out = {x: 0, y: 0};
enclosure.vectors.push(enclosure.handles.circle_in);
enclosure.vectors.push(enclosure.handles.circle_out);
return enclosure;
}
function letters_from_string(str) {
str = str.toLowerCase();
str = str.replace(/x/g, "ks");
str = str.replace(/qu/g, "kw");
str = str.replace(/q/g, "k");
var tokens = [];
while (str.length != 0) {
var results = consume_token(str);
str = results.str;
if (results.success) {
tokens.push(results.token);
}
}
return tokens;
}
function consume_token(str) {
if (str[0] == " ") {
return consume_token(str.slice(1));
}
var out = {success: false};
var the_tip = str.slice(0,2);
if (the_tip in lookup) {
out.success = true;
out.str = str.slice(2);
out.token = lookup[the_tip];
console.log(out);
console.log(the_tip, out.token);
}
else if (the_tip[0] in lookup) {
out.success = true;
out.str = str.slice(1);
out.token = lookup[the_tip[0]];
}
return out;
}
function interpret_input(str) {
var words = [];
$.each(str.split(" "), function (i, word) {
var tk = letters_from_string(word);
var glyphs = [];
$.each(tk, function (i, letter_glyph) {
glyphs.push(new_glyph(letter_glyph.name, letter_glyph.radicals));
});
var r = word_radius[word_radius.length-1];
if (glyphs.length < word_radius.length) {
r = word_radius[glyphs.length];
}
words.push(enclose(r, glyphs));
});
var out = enclose(sentence_radius, words);
out = transform_for_circle(sentence_radius+inset, 0, out);
return out;
}
$(document).ready(function () {
function change_word(str) {
if (the_big_word && the_big_word.e) { $(the_big_word.e).remove(); }
the_big_word = interpret_input(str);
$('svg').append(the_big_word.e);
}
change_word($('input').val());
$('input').change(function() { change_word($(this).val()); });
$('input').keyup(function() { change_word($(this).val()); });
$('svg').append(the_big_word.e);
$('#sounds_list').text(Object.keys(lookup).join(", "));
});
</script>
<script type="text/javascript">
function ns_elem () { if (typeof arguments[0] === "undefined") { console.log('There was an error in the element assist function. Called with no valid tag name!');} var elem; if (typeof arguments[1] === "string") { elem = document.createElementNS(arguments[1], arguments[0]); for (var i=2; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } else { elem = document.createElement(arguments[0]); for (var i=1; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } return elem;}
</script>
</article> </article>

BIN
articles/circle_script/circle_script_example_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 370 KiB

400
articles/circle_script_generator.article.html Normal file
View File

@ -0,0 +1,400 @@
<article>
<style type="text/css">
svg circle, svg path { fill: none; }
svg .glyph { stroke: #600; fill: none; }
svg .vowel { stroke: #044; }
svg .radical { stroke: #004; }
svg circle.radical { fill: black; }
svg .enclosure { stroke: #000; }
</style>
<div class="row-fluid">
<div class="span6 offset3">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-105 -105 210 210">
<defs>
<path id="mound" d="M-10,0 H-8 A9,8 0,0,1 8,0 H10" class="glyph"></path>
<g id="mound2">
<path d="M-10,0 H-8 A9,8 0 0,1 8,0 H10" class="glyph"></path>
<path d="M-6,0 A7,6 0,0,1 6,0" class="glyph"></path>
</g>
<path id="omega" d="M-10,0 H-4 A7,7 0,1,1 4,0 H10" class="glyph"></path>
<g id="omega2">
<path d="M-10,0 H-4 A7,7 0,1,1 4,0 H10" class="glyph"></path>
<path d="M-1,-1 A4.5,4.5 0,1,1 1,-1" class="glyph"></path>
</g>
<path id="angle" d="M-10,0 H-6 L0,-8 L6,0 H10" class="glyph"></path>
<g id="angle2">
<path d="M-10,0 H-6 L0,-8 L6,0 H10" class="glyph"></path>
<path d="M-4,0 L0,-5.3333 L4,0" class="glyph"></path>
</g>
<path id="chalice" d="M-10,0 H-6 A15,15 0,0,1 -10,-6 A15,10 0,0,0 10,-6 A15,15 0,0,1 6,0 H10" class="glyph"></path>
<g id="chalice2">
<path d="M-10,0 H-6 A15,15 0,0,1 -10,-6 A15,10 0,0,0 10,-6 A15,15 0,0,1 6,0 H10" class="glyph"></path>
<path d="M-8.5,-3 A 14,9 0,0,0 8.5,-3" class="glyph"></path>
</g>
<path id="loop" d="M-10,0 H-8 C6,0 6,-10 0,-10 C-6,-10 -6,0 6,0 H10" class="glyph"></path>
<g id="loop2">
<path d="M-10,0 H-8 C6,0 6,-10 0,-10 C-6,-10 -6,0 6,0 H10" class="glyph"></path>
<circle r="2" cx="0" cy="-6" class="glyph"></circle>
</g>
<path id="weird_up" d="M -4,-4 A 4,6 0,0,0 0,-8 A 4,6 0,0,0 4,-4" class="vowel"></path>
<path id="weird_down" d="M -4,-8 A 4,6 0,0,0 0,-4 A 4,6 0,0,0 4,-8" class="vowel"></path>
</svg>
</div>
</div>
<hr>
<input type="text" value="shoof~l ihs ~ bihg dohrk" />
<h3>Available Sounds:</h3>
<p id="sounds_list"></p>
<script type="text/javascript">
var svg_ns = "http://www.w3.org/2000/svg";
var xlink_ns = "http://www.w3.org/1999/xlink";
function cos_deg (angle) { return Math.cos(angle * Math.PI / 180); }
function sin_deg (angle) { return Math.sin(angle * Math.PI / 180); }
function norm (vector) {
var norm = Math.sqrt(vector.x*vector.x + vector.y*vector.y);
return {x: vector.x / norm, y: vector.y / norm};
}
function sub (a, b) { return {x: a.x-b.x, y: a.y-b.y}; }
function add (a, b) { return {x: a.x+b.x, y: a.y+b.y}; }
function mul (a, b) {
if ("x" in a) { return {x: a.x*b, y: a.y*b}; }
return a*b;
}
// Table is the table of what letters mean what things!
// Each entry in the table is a list of columnar cells.
// Each column corresponds to a particular radical configuration.
// Each cell is a list of strings which will be recognized in parsing.
var table = {};
// Main consonants!
table["mound"] = [ ["m"], ["n"], [], ["ng"]];
table["omega"] = [ ["p"], ["t"], [], ["k", "c", "q"]];
table["angle"] = [ ["f", "ph"], ["s"], ["sh"], []];
table["loop"] = [ ["th"], [], ["ch"], []];
table["chalice"] = [["w"], ["r"], ["y"], ["h"]];
// Alternate (mostly, voiced) consonants!
table["mound2"] = [ [], [], [], []];
table["omega2"] = [ ["b"], ["d"], [], ["g"]];
table["angle2"] = [ ["v"], ["z"], ["zh"], []];
table["loop2"] = [ ["dh"], [], ["j"], []];
table["chalice2"] = [[], ["l"], [], []];
// Vowels in the eat/ate/at and oh/ow/aw tracks!
table["above double"] = [["ee"], ["ay"], ["a"]];
table["above single"] = [["ih"], ["eh", "e"], ["ah"]];
table["below"] = [["oh", "o"], ["ow", "ou"], ["aw"]];
// Vowels on the line!
table["on the line double"] = [["uh"], ["oo"]];
table["on the line single"] = [["~"], ["u"]];
// The weird ones!
table["weird up"] = [["i"]];
table["weird down"] = [["oy", "oi"]];
// These lists simply list out which radicals should be shown.
// four_rad_options contains the radicals array that should be passed to make glyphs in rows with four columns.
// three_rad_options contains the radicals array that will be passed to make glyphs in rows with three columns.
// And so on.
// These are consumed in make_new_glyph().
// Basically, each glyph has a number of locations that radicals are placed.
// If a shape is in the third column of a four-column row, then we look at four_rad_options, and see that the
// third element is [null, "dot", "dot"]. So that shape will have no radical in the first position, and dots in
// both the second and third positions.
var four_rad_options = [];
four_rad_options.push(["dot", null, null]);
four_rad_options.push(["line", null, null]);
four_rad_options.push([null, "dot", "dot"]);
four_rad_options.push([null, "line", "line"]);
var three_rad_options = [];
three_rad_options.push(["line", null]);
three_rad_options.push([null, null]);
three_rad_options.push([null, "line"]);
var two_rad_options = [];
two_rad_options.push([null, null]);
two_rad_options.push(["line", "line"]);
var one_rad_options = [];
one_rad_options.push([]);
var rad_options = [one_rad_options, two_rad_options, three_rad_options, four_rad_options];
// Invert the table of shapes, and the lists of radical options, into a lookup table.
// The keys are phrases recognized as coding a sound, and the values are objects describing the appearance of the glyph that should result.
var lookup = {};
$.each(table, function(shape_name, row) {
var radical_options = rad_options[row.length - 1];
$.each(row, function(radical_index, valid_sequences) {
var current_radicals = radical_options[radical_index];
$.each(valid_sequences, function(i, phrase) {
lookup[phrase] = {name: shape_name, radicals: current_radicals};
});
});
});
var consonant_shapes = "mound omega angle chalice loop ";
consonant_shapes = consonant_shapes + consonant_shapes.replace(/ /gi, "2 ");
consonant_shapes = consonant_shapes.split(" ");
console.log(consonant_shapes);
var vowel_shapes = "above double,above single,below,on the line double,on the line single,weird up,weird down".split(",");
// Defines the positions of the radicals for glyphs. Should perhaps be moved to live in the XML?
// Maybe each symbol could be a group, and then have radical shapes identified by their classes,
// and then dynamically shown/hidden?
var consonant_radical_positions = {
"mound": [{x: 0, y: -8}, {x: -3, y: -7}, {x: 3, y: -7}],
"omega": [{x: 0, y: -16}, {x: -3, y: -15}, {x: 3, y: -15}],
"angle": [{x: 0, y: -12}, {x: -3, y: -10}, {x: 3, y: -10}],
"loop": [{x: 0, y: -14}, {x: -3, y: -14}, {x: 3, y: -14}],
"chalice": [{x: 0, y: -7}, {x: -3, y: -7}, {x: 3, y: -7}]
};
// Ensure that all the doubled glyphs have the same radical positions as their singled counterparts.
$.each(consonant_shapes, function(i, name) {
if (name.slice(0, -1) in consonant_radical_positions) {
consonant_radical_positions[name] = consonant_radical_positions[name.slice(0, -1)];
}
});
var radical_backup = 3.5;
var radical_length = 3;
var radical_length_vowel = 6;
var vowel_radius = 4;
var inset = 5;
var word_radius = [14, 14, 14, 16, 20, 24, 28, 32];
var sentence_radius = 80;
var the_big_word;
function new_glyph(symbol_name, radicals) {
var glyph;
if ($.inArray(symbol_name, consonant_shapes) != -1) {
glyph = new_consonant(symbol_name, radicals);
}
if ($.inArray(symbol_name, vowel_shapes) != -1) {
glyph = new_vowel(symbol_name, radicals);
}
glyph.name = symbol_name;
glyph.radicals = radicals;
return glyph;
}
function new_vowel(symbol_name, radicals) {
var s = {handles: {}, vectors: []};
s.handles.circle_in = {x: 0, y: 0};
s.handles.circle_out = {x: 0, y: 0};
s.handles.radicals = [];
if (symbol_name == "weird up" || symbol_name == "weird down") {
s.e = ns_elem('use', svg_ns, {'xlink:href': '#' + symbol_name.replace(" ", "_")}, xlink_ns);
s.handles.center = {x: 0, y: -6};
}
else {
s.e = ns_elem('g', svg_ns);
if (symbol_name.indexOf("above") != -1) { s.handles.center = {x: 0, y: -8}; }
if (symbol_name.indexOf("below") != -1) { s.handles.center = {x: 0, y: 8}; }
if (symbol_name.indexOf("on the line") != -1) { s.handles.center = {x: 0, y: 0}; }
s.handles.radicals.push({x: 0, y: s.handles.center.y - vowel_radius});
s.handles.radicals.push({x: 0, y: s.handles.center.y + vowel_radius});
var vowel_out = $(ns_elem('circle', svg_ns));
vowel_out.attr({r: vowel_radius, cx: s.handles.center.x, cy: s.handles.center.y}).attr('class', 'vowel');
$(s.e).append(vowel_out);
if (symbol_name.indexOf("double") != -1) {
var vowel_in = $(ns_elem('circle', svg_ns));
vowel_in.attr({r: vowel_radius/3, cx: s.handles.center.x, cy: s.handles.center.y}).attr('class', 'vowel');
$(s.e).append(vowel_in);
}
$.each(radicals, function (index, value) {
if (value != "line") { return true; }
var start = s.handles.radicals[index]; var d = norm(sub(start, s.handles.center));
var end = { x: start.x + d.x * radical_length_vowel, y: start.y + d.y * radical_length_vowel};
var line = ns_elem('path', svg_ns);
$(line).attr('d', 'M ' + start.x + ', ' + start.y + ' L ' + end.x + ', ' + end.y);
$(line).attr('class', 'radical')
$(s.e).append(line);
});
}
$.each(s.handles, function(index, value) { if (index != "radicals") { s.vectors.push(value); } });
$.each(s.handles.radicals, function(index, value) { s.vectors.push(value); });
return s;
}
function new_consonant(symbol_name, radicals) {
var s = {e: ns_elem('g', svg_ns), handles: {}, vectors: []};
s.handles.center = {x: 0, y: 0};
s.handles.circle_in = {x: -10, y: 0};
s.handles.circle_out = {x: 10, y: 0};
s.handles.radicals = {};
$.extend(true, s.handles.radicals, consonant_radical_positions[symbol_name]);
$(s.e).append(ns_elem('use', svg_ns, {'xlink:href': '#' + symbol_name}, xlink_ns));
$.each(radicals, function(index, value) {
var radical_position = s.handles.radicals[index];
if (value == "dot") {
var circle = $(ns_elem('circle', svg_ns));
circle.attr({r: 1, cx: radical_position.x, cy: radical_position.y});
circle.attr('class', 'radical');
$(s.e).append(circle);
}
if (value == "line") {
var d = norm(sub(radical_position, s.handles.center));
var start = sub(radical_position, mul(d, radical_backup));
var end = add(radical_position, mul(d, radical_length));
var line = $(ns_elem('path', svg_ns));
line.attr('d', 'M' + start.x + ',' + start.y + ' L' + end.x + ',' + end.y);
line.attr('class', 'radical');
$(s.e).append(line);
}
});
$.each(s.handles, function(index, value) { if (index != "radicals") { s.vectors.push(value); } });
$.each(s.handles.radicals, function(i, vector) { s.vectors.push(vector); });
return s;
}
function transform_for_circle(radius, angle, glyph) {
var group = ns_elem('g', svg_ns);
$(group).attr('transform', 'rotate(' + (-1*angle) + ') translate(0 ' + radius + ')');
$(group).append(glyph.e);
$.each(glyph.vectors, function (name, value) {
// Translate the vector.
var translated = {};
translated.x = value.x;
translated.y = value.y + radius;
// Rotate the vector.
var rotated = {};
rotated.x = translated.x * cos_deg(-angle) - translated.y * sin_deg(-angle);
rotated.y = translated.x * sin_deg(-angle) + translated.y * cos_deg(-angle);
// Change the vector in-place.
value.x = rotated.x;
value.y = rotated.y;
});
glyph.e = group;
return glyph;
}
function enclose(radius, list_of_glyphs) {
var length = list_of_glyphs.length;
angle_step = 360 / length;
var enclosure = {e: ns_elem('g', svg_ns), children: [], handles: {}, vectors: [] };
$.each(list_of_glyphs, function (index, glyph) {
var the_glyph = transform_for_circle(radius, angle_step*index, glyph);
enclosure.children.push(the_glyph);
$(enclosure.e).append(the_glyph.e);
$.each(the_glyph.vectors, function (i, vector) { enclosure.vectors.push(vector); });
});
$.each(enclosure.children, function (index) {
var current = enclosure.children[index];
var next = enclosure.children[(index+1) % length];
var npd = "M " + current.handles.circle_out.x + " " + current.handles.circle_out.y;
var arc = "A" + radius + "," + radius + " 0,0,0 ";
if (length != 1) {
npd = npd + arc + next.handles.circle_in.x + "," + next.handles.circle_in.y + " ";
}
else {
npd = npd + arc + "0," + (next.handles.circle_in.y - radius - radius) + " ";
npd = npd + arc + next.handles.circle_in.x + "," + next.handles.circle_in.y + " ";
}
var arc = $(ns_elem('path', svg_ns)).attr('d', npd).attr('class', 'enclosure');
$(enclosure.e).append(arc);
});
$(enclosure.e).attr('transform', 'translate(0 ' + (-radius - inset) + ')');
$.each(enclosure.vectors, function (i, vector) {
vector.y = vector.y - radius - inset;
});
enclosure.handles.circle_in = {x: 0, y: 0};
enclosure.handles.circle_out = {x: 0, y: 0};
enclosure.vectors.push(enclosure.handles.circle_in);
enclosure.vectors.push(enclosure.handles.circle_out);
return enclosure;
}
function letters_from_string(str) {
str = str.toLowerCase();
str = str.replace(/x/g, "ks");
str = str.replace(/qu/g, "kw");
str = str.replace(/q/g, "k");
var tokens = [];
while (str.length != 0) {
var results = consume_token(str);
str = results.str;
if (results.success) {
tokens.push(results.token);
}
}
return tokens;
}
function consume_token(str) {
if (str[0] == " ") {
return consume_token(str.slice(1));
}
var out = {success: false};
var the_tip = str.slice(0,2);
if (the_tip in lookup) {
out.success = true;
out.str = str.slice(2);
out.token = lookup[the_tip];
console.log(out);
console.log(the_tip, out.token);
}
else if (the_tip[0] in lookup) {
out.success = true;
out.str = str.slice(1);
out.token = lookup[the_tip[0]];
}
return out;
}
function interpret_input(str) {
var words = [];
$.each(str.split(" "), function (i, word) {
var tk = letters_from_string(word);
var glyphs = [];
$.each(tk, function (i, letter_glyph) {
glyphs.push(new_glyph(letter_glyph.name, letter_glyph.radicals));
});
var r = word_radius[word_radius.length-1];
if (glyphs.length < word_radius.length) {
r = word_radius[glyphs.length];
}
words.push(enclose(r, glyphs));
});
var out = enclose(sentence_radius, words);
out = transform_for_circle(sentence_radius+inset, 0, out);
return out;
}
$(document).ready(function () {
function change_word(str) {
if (the_big_word && the_big_word.e) { $(the_big_word.e).remove(); }
the_big_word = interpret_input(str);
$('svg').append(the_big_word.e);
}
change_word($('input').val());
$('input').change(function() { change_word($(this).val()); });
$('input').keyup(function() { change_word($(this).val()); });
$('svg').append(the_big_word.e);
$('#sounds_list').text(Object.keys(lookup).join(", "));
});
</script>
<script type="text/javascript">
function ns_elem () { if (typeof arguments[0] === "undefined") { console.log('There was an error in the element assist function. Called with no valid tag name!');} var elem; if (typeof arguments[1] === "string") { elem = document.createElementNS(arguments[1], arguments[0]); for (var i=2; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } else { elem = document.createElement(arguments[0]); for (var i=1; i<arguments.length; i+=2) { if (typeof arguments[i+1] === "undefined") { for (var key in arguments[i]) { elem.setAttribute(key, arguments[i][key]); } break; } else { for (var key in arguments[i]) { elem.setAttributeNS(arguments[i+1], key, arguments[i][key]); } } } } return elem;}
</script>
</article>