diff --git a/articles/circle_script/circle_script.article.html b/articles/circle_script/circle_script.article.html index 5b7e655..46d5c5c 100644 --- a/articles/circle_script/circle_script.article.html +++ b/articles/circle_script/circle_script.article.html @@ -1,60 +1,63 @@ -
- + + + + +

An introduction to Circle Script (Version... 3?)

Circle script is a writing system that I made up. The fundamental gimmick of it is that words and sentences in it form circles.

A large glyph composed of nested circles.

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.

-

Here's the overview of how to read circle script:

+

Here's the overview of how to read circle script:

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.

A circle script glyph showing a single word-circle, with a small line outside the circle for a starting-point indicator.

If you're reading a whole sentence, you walk around the circle 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.

@@ -414,4 +417,5 @@ table > img {

If you merge caught-cot, it is preferred to use the strong vowel /a~ɑ/ rather than the weak /ɔ/ vowel.

-
+ + \ No newline at end of file diff --git a/articles/circle_script/circle_setter.html b/articles/circle_script/circle_setter.html index 0fdc425..a201fa4 100644 --- a/articles/circle_script/circle_setter.html +++ b/articles/circle_script/circle_setter.html @@ -1,162 +1,695 @@ + + + -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- -

Available Sounds:

-

- - +

x value is something

\ No newline at end of file diff --git a/articles/circle_script/circle_setter.js b/articles/circle_script/circle_setter.js new file mode 100644 index 0000000..cdaa3de --- /dev/null +++ b/articles/circle_script/circle_setter.js @@ -0,0 +1,210 @@ +var currently_dragging = null; // if this is null, we have nothing being dragged. if it's not null, then it will represent the glyph object (as goes in the glyphs array) which is currently being dragged + +const selection_thresh = 10; +var major_radius; +const glyphs = []; + +var embed; + + +$(document).ready(function() { + svg = $('svg#arena')[0]; + major_radius = parseFloat($('circle').attr('r')); + + //$.each(glyphs, function(idx, glyph) { + // glyph.element.appendTo($(svg)); + //}) + + $(document).on("mouseup", on_mouse_up); + $("#place_group").on("mousedown", omd_consonant); + $("#vowel_place_group").on("mousedown", omd_vowel); + + // handle changing the consonants + $('#consonant_form input').on('change', function(event) { + let glyph = $("#consonant_form input[name='glyphs']:checked").val(); // checked value for the glyph should be here + let radical = $("#consonant_form input[name='radicals']:checked").val(); // checked value for the radical should be here + + add_class($('svg #glyph-' + glyph + '-' + radical), 'chosen'); + + $('#place_group image.radical').attr("href", radical); + $('#place_group image.glyph').attr("href", glyph); + + }); + + $('td > svg').on("click", function(event) { + let receptacle = $("#consonant_put_it_in_here"); + let selected = $(this); + receptacle.html(selected.html()); + }) + + // handle changing the vowels + $('.vowel-example > svg').on("click", function(event) { + let receptacle = $('#vowel_put_it_in_here'); + let selected = $(this); + receptacle.html(selected.html()); + }); + + var t = $("#testbed"); + var glyphs = split_megaglyph(t.find(".angle-1")); + $.each(glyphs, function(idx, glyph) { + glyph.attr("transform", `translate(${100 + idx*100}, 0)`); + t.append(glyph); + }); + + populate_consonant_grid(); +}); + +function populate_consonant_grid() { + // this function expects that there's a #consonant-grid table, where each row corresponds to a glyph set + // the cells of the row need to be filled with the various possible configurations of that glyph + // so like, the in a given row should contain a .megaglyph svg group, which contains the base glyph plus all possible radicals. + // then we use the split_megaglyph function to generate the five possible configurations out of that megaglyph + // and insert the five configured glyphs into their corresponding (td) cells of the table + + $("#consonant-grid tbody tr").each(function (asdf, row) { // iterate over the rows in the table + + // row will now be something like + // that is, a tr containing one th on either end plus a td for each consonant in this row + var head = $(row).find("th:first-child svg"); // this is the header for the row, which should contain the .megaglyph object + var megaglyph = head.find(".megaglyph"); + var glyphs = split_megaglyph(megaglyph); // now this is a list of the configured consonant symbols + + $(row).find("td").each(function(idx, cell) { // iterate over the cells in the row + // cell will now be a cell which contains the IPA for that cell's consonants, plus the canvas into which to insert the configured consonant symbol + + $(cell).find("svg").append(glyphs[idx]); + }); + }); +} + + +function split_megaglyph(megaglyph) { + // megaglyph is an svg object which contains all the possible radicals at once. + // this should return a list of new glyphs, cloned frmo megaglyph, each of which contains only the radicals it wants. + var one = megaglyph.clone(); + one.find('.line_1,.line_2,.line_3,.dot_2,.dot_3').remove(); // only .dot_1 + remove_class(one, "megaglyph"); + var two = megaglyph.clone(); + two.find('.line_2,.line_3,.dot_1,.dot_2,.dot_3').remove(); // line 1 only + remove_class(two, "megaglyph"); + var three = megaglyph.clone(); + three.find('.line_1,.line_2,.line_3,.dot_1').remove(); // only dots 2 and 3 + remove_class(three, "megaglyph"); + var four = megaglyph.clone(); + four.find('.line_1,.dot_1,.dot_2,.dot_3').remove(); //lines 2 and 3 + remove_class(four, "megaglyph"); + var five = megaglyph.clone(); + five.find('.line_1,.line_2,.line_3').remove(); // all three dots + remove_class(five, "megaglyph"); + + return [one, two, three, four, five]; +} + + +function on_mouse_down(event) { + // this is called on an element when the mouse is clicked down on it. event.data will contain the glyph object + + currently_dragging = event.data; +} + +function on_mouse_down_create_from(source) { + // call this with a source place (from which it should copy some svg) to get an onmousedown for creating that glyph + return function(event) { + const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); + var g = make_new_glyph(source); + g.position = mouse_position; + set_transform(g.element, mouse_position, appropriate_angle(mouse_position)); + + currently_dragging = g; + } +} + +function omd_consonant(event) { + console.log("WHDSFLKJ"); + const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); + var g = make_new_glyph($("#place_group")); + g.position = mouse_position; + set_transform(g.element, mouse_position, appropriate_angle(mouse_position)); + + currently_dragging = g; +} + +function omd_vowel(event) { + const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); + var g = make_new_glyph($("#vowel_copy_from_here")); + g.position = mouse_position; + set_transform(g.element, mouse_position, appropriate_angle(mouse_position)); + + currently_dragging = g; +} + + +function omd_consonant(event) { + const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); + var g = make_new_glyph($("#place_group")); + g.position = mouse_position; + set_transform(g.element, mouse_position, appropriate_angle(mouse_position)); + + currently_dragging = g; +} + +function make_new_glyph(source) { + // create a new glyph object by copying the elements pointed to by source + // this will add it to the svg and to the glyphs list + var x = {}; + x.angle = 0; + x.element = source.clone().attr("id","").attr("onclick", "").attr("onmousedown", ""); + x.position = {x:0, y:0}; + set_transform(x.element, x.position, 0); + x.element.on("mousedown", x, on_mouse_down); + $(svg).append(x.element); + glyphs.push(x); + return x; +} + +function on_mouse_up(event) { + // this is called on the whole document when the mouse is released on it. event.data is meaningless. this should handle releasing the current dragged element, if it exists. + if (currently_dragging != null && is_in_delete_region(currently_dragging.position)) { + remove(glyphs, currently_dragging); + currently_dragging.element.remove(); + currently_dragging = null; + } + + if (currently_dragging != null) { + currently_dragging.position = mul(norm(currently_dragging.position), major_radius); + set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position)); + //currently_dragging.element.attr("x", currently_dragging.position.x); + //currently_dragging.element.attr("y", currently_dragging.position.y) + } + + currently_dragging = null; +} + +function is_in_delete_region(p) { + r = $("#delete"); + first = {x:parseFloat(r.attr("x")), y:parseFloat(r.attr("y"))}; + second = {x:parseFloat(r.attr("width"))+first.x, y:parseFloat(r.attr("height"))+first.y}; + + if (p.x > first.x && p.x < second.x && p.y > first.y && p.y < second.y) { + return true; + } + return false; +} + +$(document).mousemove(function(event) { + + const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); + const mouse_move = sub(mouse_position, previous_mouse_position); + + $("#xthing").text("position is " + mouse_position.x + " " + mouse_position.y); + + previous_mouse_position = mouse_position; + var s_position = mouse_position; + // get the position inside the svg tag for the mouse + + if (currently_dragging != null) { + currently_dragging.position = add(currently_dragging.position, mouse_move); + set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position)); + + } +}); \ No newline at end of file diff --git a/articles/circle_script/circle_setter_utils.js b/articles/circle_script/circle_setter_utils.js new file mode 100644 index 0000000..49523b4 --- /dev/null +++ b/articles/circle_script/circle_setter_utils.js @@ -0,0 +1,73 @@ +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 -1) { // only splice array when item is found + list.splice(index, 1); // 2nd parameter means remove one item only + } +} + +function appropriate_angle(point) { + return -Math.atan2(point.x, point.y); +} \ No newline at end of file diff --git a/articles/circle_script/consonant-angle-1.svg b/articles/circle_script/consonant-angle-1.svg index 4b7f51e..ce65b3f 100644 --- a/articles/circle_script/consonant-angle-1.svg +++ b/articles/circle_script/consonant-angle-1.svg @@ -1,32 +1,26 @@ - - - - - - - - - - image/svg+xml - - - - - - image/svg+xml - - - + d="M -14.06223,75.917879 H 39.968325 L 39.843832,126.71158" + id="glyph" /> diff --git a/articles/circle_script/consonant-grid.svg b/articles/circle_script/consonant-grid.svg new file mode 100644 index 0000000..8c44026 --- /dev/null +++ b/articles/circle_script/consonant-grid.svg @@ -0,0 +1,668 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/articles/circle_script/consonant-loop-1.svg b/articles/circle_script/consonant-loop-1.svg index aef79b6..bda8aad 100644 --- a/articles/circle_script/consonant-loop-1.svg +++ b/articles/circle_script/consonant-loop-1.svg @@ -1,32 +1,26 @@ - - - - - - - - - - image/svg+xml - - - - - - image/svg+xml - - - + sodipodi:nodetypes="csssc" /> diff --git a/articles/circle_script/consonant-mound-1.svg b/articles/circle_script/consonant-mound-1.svg index b199181..381029c 100644 --- a/articles/circle_script/consonant-mound-1.svg +++ b/articles/circle_script/consonant-mound-1.svg @@ -1,32 +1,32 @@ - - - - - - - - - - image/svg+xml - - - - - - image/svg+xml - - - + sodipodi:nodetypes="cc" /> diff --git a/articles/circle_script/consonant-ohm-1.svg b/articles/circle_script/consonant-ohm-1.svg index c67afae..0317b6d 100644 --- a/articles/circle_script/consonant-ohm-1.svg +++ b/articles/circle_script/consonant-ohm-1.svg @@ -1,32 +1,26 @@ - - - - - - - - - - image/svg+xml - - - - - - image/svg+xml - - - + sodipodi:nodetypes="cczcc" /> diff --git a/articles/circle_script/consonant-wave-1.svg b/articles/circle_script/consonant-wave-1.svg index 0238b05..cc223cd 100644 --- a/articles/circle_script/consonant-wave-1.svg +++ b/articles/circle_script/consonant-wave-1.svg @@ -1,32 +1,26 @@ - - - - - - - - - - image/svg+xml - - - - - - image/svg+xml - - - + d="M -22.617516,106.41574 C -10.15982,87.804245 -3.4056477,76.397198 -3.4056477,76.397198 c 0,0 -3.1519473,26.266232 11.2569551,26.116132 C 22.260209,102.36324 26.913083,76.847476 26.913083,76.847476 l 23.414466,29.868454" + id="glyph" + sodipodi:nodetypes="ccscc" /> diff --git a/articles/circle_script/example-diacritic-5.svg b/articles/circle_script/example-diacritic-5.svg index 0765d33..c17ba8b 100644 --- a/articles/circle_script/example-diacritic-5.svg +++ b/articles/circle_script/example-diacritic-5.svg @@ -1,25 +1,24 @@ + sodipodi:docname="example-diacritic-5.svg" + inkscape:version="1.2.2 (b0a8486, 2022-12-01)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + inkscape:swatch="solid"> + width="96px" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -55,7 +57,7 @@ image/svg+xml - + @@ -65,13 +67,15 @@ id="layer1"> + d="M -9.779535,53.505783 C 3.5195891,36.495274 5.9938455,37.887043 9.5505876,41.134504" + id="path1720" /> + + d="M 12.348779,54.50831 C 25.647903,37.497802 28.12216,38.889571 31.678902,42.137032" + id="path1720-1" />