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

unspeakably many changes

Browse Source
This commit is contained in:
Shoofle 2023-09-12 23:00:04 -04:00
parent 06cdda7925
commit a469213658
3 changed files with 166 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
articles/circle_script/circle_setter.html
View File

@ -10,13 +10,21 @@
</head>
<body>
<style type="text/css">
path, circle {
fill: none;
stroke: #aaa;
stroke-width: 3px;
}
svg { draggable: false; }
#testbed { display: none; }
td svg {
width: 100px;
width: 3.5em;
height: 3.5em;
}
th label svg {
display: none;
width:3.5em;
height:3.5em;
}
#consonant-grid, #vowel-grid {
margin-left: auto;
@ -36,18 +44,8 @@
height: 50%;
}
svg#arena circle, svg#arena path { fill: none; stroke: #600; }
svg#arena .consonant { stroke: #600; fill: none; }
svg#arena .radical { stroke: #004; }
svg#arena circle.radical { fill: black; }
svg#arena circle { stroke: #044; }
.highlit { fill: red; }
.veryhighlit { fill: green; }
.clicked { fill: darkgreen; }
.placeholder { fill: lightblue; }
.chosen { fill: blue;stroke: red; }
rect { fill:transparent; }
#delete { fill:pink; }
@ -74,37 +72,6 @@
color: lightgray;
}
</style>
<svg id="testbed" width=800><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="angle-1" class="megaglyph"><path
style="opacity:1;fill:none;stroke:#000000;stroke-width:2.88527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -14.06223,75.917879 H 39.968325 L 39.843832,126.71158"
class="glyph" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 5.6174494,75.22561 C 6.0813724,41.977797 -0.2589083,-1.1670398 -0.2589083,-1.1670398"
class="line_2"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 22.988704,75.145855 C 23.452627,41.898043 28.865062,-0.93751155 28.865062,-0.93751155"
class="line_3"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 14.502302,74.634887 c 0.463923,-33.247813 0,-74.22767555 0,-74.22767555"
class="line_1" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -6.0317653,62.94798 C 7.2673588,45.937471 9.7416152,47.32924 13.298357,50.576701"
id="path1720" class="dot_2"/>
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 4.9623979,42.300769 C 18.261522,25.29026 20.735778,26.682029 24.292521,29.92949"
id="path1720-7" class="dot_1"/>
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 16.096549,63.950507 C 29.395673,46.939999 31.86993,48.331768 35.426672,51.579229"
id="path1720-1" class="dot_3"/>
</g></svg>
<div class="row-fluid">
<div class="span4"><!-- consonants -->
@ -140,34 +107,27 @@
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_1_u" name="glyphs" value="consonant-mound-1.svg">
<label for="shape_1_u"><svg>
<label for="shape_1_u"><svg >
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="mound-1 megaglyph"
transform="translate(25,0)"><path
style="fill:none;stroke:#000000;stroke-width:3.38618;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -22.108869,113.14142 C -14.825778,68.277574 38.195123,67.792033 47.420373,112.9472"
class="glyph"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 12.100818,78.237112 c 0.463923,-33.247812 0,-74.2276752 0,-74.2276752"
class="line_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 3.5161518,80.328763 C 3.9800748,47.08095 -2.3602059,3.9361133 -2.3602059,3.9361133"
class="line_2"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 20.887406,80.249008 C 21.351329,47.001196 26.763764,4.1656416 26.763764,4.1656416"
class="line_3"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -6.9323217,68.201226 C 6.3668024,51.190717 8.8410588,52.582486 12.397801,55.829947"
class="dot_2" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 4.0618415,47.554015 C 17.360965,30.543506 19.835221,31.935275 23.391964,35.182736"
class="dot_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 15.195992,69.203753 C 28.495116,52.193245 30.969373,53.585014 34.526115,56.832475"
class="dot_3" /></g>
</svg></label>
@ -385,15 +345,12 @@
</form>
</div>
<div class="span4 ">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-75 -105 150 210" draggable="false">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-75 -105 150 210" draggable="false" >
<rect x="-200" y="-1" width="400" height="2"/>
<defs>
</defs>
<g transform="translate(-100,0)" id="place_group">
<g transform="scale(0.5)" >
<rect x="-30" y="-70" width="60" height="70"/>
<image x="-25" y="-70" class="radical placeholder"/>
<image x="-25" y="-50" class="glyph placeholder"/>
<g transform="translate(-100,0)" id="consonant_place_group">
<g id="consonant_copy_from_here">
<rect x="-15" y="-35" width="30" height="35"/>
<g id="consonant_put_it_in_here" transform="translate(-12,-45) scale(0.3)"></g>
</g>
</g>
@ -408,280 +365,105 @@
</g>
</svg>
</div>
<div class="span4">
<div class="span4"><!-- vowels -->
<div id="vowel-grid">
<div class="vowel megaglyph">
<svg>
<path
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
class="base-omega vowel-base" />
<path
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
class="base-mound vowel-base" />
<path
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345"
class="base-loop vowel-base" />
<circle
class="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
<path
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887"
class="emphasis-outer" />
<circle
class="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
<path
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
class="emphasis-inner" />
<path
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
class="base-mound" />
<path
class="triangle-inner"
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z" />
<path
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
class="emphasis-inner" />
<circle
class="dot-on"
cx="12.646866"
cy="31.411909"
r="7.9595795" />
</svg>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887"
id="emphasis-outer" />
</svg>
[ɑ, a], box or bah
<svg viewBox="0 0 24 80" >base-omega dot-outer emphasis-outer</svg> [ɑ, a], box or bah
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
</svg>
[ʌ, ə], but or schwa
<svg viewBox="0 0 24 80" >base-omega dot-outer</svg> [ʌ, ə], but or schwa
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
id="emphasis-inner" />
</svg>
[i], beat
<svg viewBox="0 -12 24 80" >base-mound dot-inner emphasis-inner</svg> [i], beat
</div>
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
</svg>
[ɪ], bit
<svg viewBox="0 -12 24 80" >base-mound dot-inner</svg> [ɪ], bit
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<path
sodipodi:type="star"
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="triangle-inner"
sodipodi:sides="3"
sodipodi:cx="12.602679"
sodipodi:cy="15.606641"
sodipodi:r1="8.7842556"
sodipodi:r2="8.4311752"
sodipodi:arg1="-1.565766"
sodipodi:arg2="-0.51856839"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z"
inkscape:transform-center-x="0.11044414"
inkscape:transform-center-y="-0.12140727" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
id="emphasis-inner" />
</svg>
[u], boot
<svg viewBox="0 -12 24 80" >base-mound triangle-inner emphasis-inner</svg> [u], boot
</div>
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<path
sodipodi:type="star"
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="triangle-inner"
sodipodi:sides="3"
sodipodi:cx="12.602679"
sodipodi:cy="15.606641"
sodipodi:r1="8.7842556"
sodipodi:r2="8.4311752"
sodipodi:arg1="-1.565766"
sodipodi:arg2="-0.51856839"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z"
inkscape:transform-center-x="0.11044414"
inkscape:transform-center-y="-0.12140727" />
</svg>
[ʊ], book
<svg viewBox="0 -12 24 80" >base-mound triangle-inner</svg> [ʊ], book
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887"
id="emphasis-outer" />
</svg>
[ɛi, e], bait
<svg viewBox="0 -12 24 80" >base-mound dot-outer emphasis-outer</svg> [ɛi, e], bait
</div>
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48084;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
id="base-mound"
sodipodi:nodetypes="cczcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
</svg>
[ɛ], bet
<svg viewBox="0 -12 24 80" >base-mound dot-outer</svg> [ɛ], bet
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
<path
style="fill:none;stroke:#000000;stroke-width:3.49271999;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
id="emphasis-inner" />
</svg>
[o, ɔu], won't, boat
<svg viewBox="0 0 24 80" >base-omega dot-inner emphasis-inner</svg> [o, ɔu], won't, boat
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
</svg>
[ɔ], bawk
<svg viewBox="0 0 24 80" >base-omega dot-inner</svg> [ɔ], bawk
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
style="fill:none;stroke:#000000;stroke-width:3.48083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
id="base-omega"
sodipodi:nodetypes="cczzzcc" />
<circle
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.49272;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="dot-on"
cx="12.646866"
cy="31.411909"
r="7.9595795" />
</svg>
[æ], bat
<svg viewBox="0 0 24 80" >base-omega dot-on</svg> [æ], bat
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345"
id="base-loop"
sodipodi:nodetypes="ccssc" />
<circle
id="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
</svg>
[au], cow
<svg viewBox="0 0 24 80" >base-loop dot-outer</svg> [au], cow
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345"
id="base-loop"
sodipodi:nodetypes="ccssc" />
<circle
id="dot-on"
cx="12.646866"
cy="31.411909"
r="7.9595795" />
</svg>
[ai, aɪ], by
<svg viewBox="0 0 24 80" >base-loop dot-on</svg> [ai, aɪ], by
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >
<path
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345"
id="base-loop"
sodipodi:nodetypes="ccssc" />
<circle
id="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
</svg>
[ɔi, ɔɪ], boy
<svg viewBox="0 0 24 80" >base-loop dot-inner</svg> [ɔi, ɔɪ], boy
</div>
</div>
</div>
@ -689,7 +471,5 @@
</div>
<hr>
<h2 id="xthing">x value is something</h2>
</body>
</html>

160
articles/circle_script/circle_setter.js
View File

@ -1,57 +1,46 @@
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;
const vowels = [];
const consonants = [];
$(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) {
$('td > svg').on("mousedown", 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) {
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
var g = make_new_glyph_from($("#consonant_copy_from_here"));
g.position = mouse_position;
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
currently_dragging = g;
})
$('.vowel-example > svg').on("mousedown", function(event) {
let receptacle = $('#vowel_put_it_in_here');
let selected = $(this);
receptacle.html(selected.html());
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
var g = make_new_glyph_from($("#vowel_copy_from_here"));
g.position = mouse_position;
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
currently_dragging = g;
});
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);
});
$('td > svg').each(function() { this.setAttribute('viewBox',"0 30 40 100");});
populate_consonant_grid();
populate_vowels();
});
function populate_consonant_grid() {
@ -77,7 +66,6 @@ function populate_consonant_grid() {
});
}
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.
@ -100,6 +88,20 @@ function split_megaglyph(megaglyph) {
return [one, two, three, four, five];
}
function populate_vowels() {
megaglyph = $(".vowel.megaglyph");
$(".vowel-example svg").each((i, ex) => {
let glyphs = $(ex).text().replace(/(\s|\n)+/g,",").split(",").filter((a) => a!="")
$(ex).text("");
$.each(glyphs, (i, e) => {
let wanted_class = "." + e;
let glyph_original = megaglyph.find(wanted_class);
let new_glyph = glyph_original.clone();
$(ex).append(new_glyph);
});
});
}
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
@ -107,57 +109,45 @@ function on_mouse_down(event) {
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) {
function make_new_consonant(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.element.find("#consonant_put_it_in_here").attr("id","");
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);
x.handles = [];
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
$.each(x.handles, () => $(svg).append(this));
update_handles(x);
glyphs.push(x);
return x;
}
function make_new_glyph_from(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.element.find("#consonant_put_it_in_here").attr("id","");
x.element.find("#vowel_put_it_in_here").attr("id","");
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);
x.handles = [];
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2))
$(svg).append(x.handles[0]).append(x.handles[1]);
update_handles(x);
glyphs.push(x);
return x;
}
@ -166,6 +156,7 @@ 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);
$.each(currently_dragging.handles, function() { $(this).remove(); });
currently_dragging.element.remove();
currently_dragging = null;
}
@ -173,8 +164,7 @@ function on_mouse_up(event) {
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)
update_handles(currently_dragging);
}
currently_dragging = null;
@ -192,19 +182,23 @@ function is_in_delete_region(p) {
}
$(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) {
update_handles(currently_dragging);
currently_dragging.position = add(currently_dragging.position, mouse_move);
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));
}
});
});
function update_handles(g) {
set_loc(g.handles[0], get_global_point_at_length(svg, g.element.find('path.glyph,path.vowel-base')[0], 0))
set_loc(g.handles[1], get_global_point_at_length(svg, g.element.find('path.glyph,path.vowel-base')[0], 1000))
}

15
articles/circle_script/circle_setter_utils.js
View File

@ -1,3 +1,9 @@
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
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;}
var svg;
@ -70,4 +76,13 @@ function remove(list, element) {
function appropriate_angle(point) {
return -Math.atan2(point.x, point.y);
}
function newsvg(element) {
document.createElementNS(svg_ns, element);
}
function set_loc(elem, point) { return $(elem).attr("cx", point.x).attr("cy",point.y)}
function get_global_point_at_length(svg, path, distance) {
return path.getPointAtLength(distance).matrixTransform(path.getTransformToElement(svg));
}