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

unspeakably many changes

Browse Source
main
Shoofle 1 year ago
parent 06cdda7925
commit a469213658
3 changed files with 162 additions and 373 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 368
      articles/circle_script/circle_setter.html
  2. 152
      articles/circle_script/circle_setter.js
  3. 15
      articles/circle_script/circle_setter_utils.js

368
articles/circle_script/circle_setter.html
Unescape View File

@ -10,13 +10,21 @@
</head> </head>
<body> <body>
<style type="text/css"> <style type="text/css">
path, circle {
fill: none;
stroke: #aaa;
stroke-width: 3px;
}
svg { draggable: false; }
#testbed { display: none; } #testbed { display: none; }
td svg { td svg {
width: 100px; width: 3.5em;
height: 3.5em;
} }
th label svg { th label svg {
display: none; display: none;
width:3.5em;
height:3.5em;
} }
#consonant-grid, #vowel-grid { #consonant-grid, #vowel-grid {
margin-left: auto; margin-left: auto;
@ -36,18 +44,8 @@
height: 50%; height: 50%;
} }
svg#arena circle, svg#arena path { fill: none; stroke: #600; } 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; } 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; } rect { fill:transparent; }
#delete { fill:pink; } #delete { fill:pink; }
@ -74,37 +72,6 @@
color: lightgray; color: lightgray;
} }
</style> </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="row-fluid">
<div class="span4"><!-- consonants --> <div class="span4"><!-- consonants -->
@ -140,34 +107,27 @@
<tr> <tr>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_1_u" name="glyphs" value="consonant-mound-1.svg"> <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 <g
inkscape:label="Layer 1" inkscape:label="Layer 1"
inkscape:groupmode="layer" inkscape:groupmode="layer"
class="mound-1 megaglyph" class="mound-1 megaglyph"
transform="translate(25,0)"><path 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" d="M -22.108869,113.14142 C -14.825778,68.277574 38.195123,67.792033 47.420373,112.9472"
class="glyph" class="glyph"
sodipodi:nodetypes="cc" /><path 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" d="m 12.100818,78.237112 c 0.463923,-33.247812 0,-74.2276752 0,-74.2276752"
class="line_1" /><path 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" d="M 3.5161518,80.328763 C 3.9800748,47.08095 -2.3602059,3.9361133 -2.3602059,3.9361133"
class="line_2" class="line_2"
sodipodi:nodetypes="cc" /><path 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" d="M 20.887406,80.249008 C 21.351329,47.001196 26.763764,4.1656416 26.763764,4.1656416"
class="line_3" class="line_3"
sodipodi:nodetypes="cc" /><path 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" d="M -6.9323217,68.201226 C 6.3668024,51.190717 8.8410588,52.582486 12.397801,55.829947"
class="dot_2" /><path 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" d="M 4.0618415,47.554015 C 17.360965,30.543506 19.835221,31.935275 23.391964,35.182736"
class="dot_1" /><path 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" d="M 15.195992,69.203753 C 28.495116,52.193245 30.969373,53.585014 34.526115,56.832475"
class="dot_3" /></g> class="dot_3" /></g>
</svg></label> </svg></label>
@ -385,15 +345,12 @@
</form> </form>
</div> </div>
<div class="span4 "> <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"/> <rect x="-200" y="-1" width="400" height="2"/>
<defs> <g transform="translate(-100,0)" id="consonant_place_group">
</defs> <g id="consonant_copy_from_here">
<g transform="translate(-100,0)" id="place_group"> <rect x="-15" y="-35" width="30" height="35"/>
<g transform="scale(0.5)" > <g id="consonant_put_it_in_here" transform="translate(-12,-45) scale(0.3)"></g>
<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> </g>
</g> </g>
@ -408,280 +365,105 @@
</g> </g>
</svg> </svg>
</div> </div>
<div class="span4"> <div class="span4"><!-- vowels -->
<div id="vowel-grid"> <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-sequence">
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 0 24 80" > <svg viewBox="0 0 24 80" >base-omega dot-outer emphasis-outer</svg> [ɑ, a], box or bah
<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
</div> </div>
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 0 24 80" > <svg viewBox="0 0 24 80" >base-omega dot-outer</svg> [ʌ, ə], but or schwa
<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
</div> </div>
</div> </div>
<div class="vowel-sequence"> <div class="vowel-sequence">
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 -12 24 80" > <svg viewBox="0 -12 24 80" >base-mound dot-inner emphasis-inner</svg> [i], beat
<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
</div> </div>
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 -12 24 80" > <svg viewBox="0 -12 24 80" >base-mound dot-inner</svg> [ɪ], bit
<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
</div> </div>
</div> </div>
<div class="vowel-sequence"> <div class="vowel-sequence">
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 -12 24 80" > <svg viewBox="0 -12 24 80" >base-mound triangle-inner emphasis-inner</svg> [u], boot
<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
</div> </div>
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 -12 24 80" > <svg viewBox="0 -12 24 80" >base-mound triangle-inner</svg> [ʊ], book
<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
</div> </div>
</div> </div>
<div class="vowel-sequence"> <div class="vowel-sequence">
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 -12 24 80" > <svg viewBox="0 -12 24 80" >base-mound dot-outer emphasis-outer</svg> [ɛi, e], bait
<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
</div> </div>
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 -12 24 80" > <svg viewBox="0 -12 24 80" >base-mound dot-outer</svg> [ɛ], bet
<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
</div> </div>
</div> </div>
<div class="vowel-sequence"> <div class="vowel-sequence">
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 0 24 80" > <svg viewBox="0 0 24 80" >base-omega dot-inner emphasis-inner</svg> [o, ɔu], won't, boat
<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
</div> </div>
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 0 24 80" > <svg viewBox="0 0 24 80" >base-omega dot-inner</svg> [ɔ], bawk
<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
</div> </div>
</div> </div>
<div class="vowel-sequence"> <div class="vowel-sequence">
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 0 24 80" > <svg viewBox="0 0 24 80" >base-omega dot-on</svg> [æ], bat
<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
</div> </div>
</div> </div>
<div class="vowel-sequence"> <div class="vowel-sequence">
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 0 24 80" > <svg viewBox="0 0 24 80" >base-loop dot-outer</svg> [au], cow
<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
</div> </div>
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 0 24 80" > <svg viewBox="0 0 24 80" >base-loop dot-on</svg> [ai, aɪ], by
<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
</div> </div>
<div class="vowel-example"> <div class="vowel-example">
<svg viewBox="0 0 24 80" > <svg viewBox="0 0 24 80" >base-loop dot-inner</svg> [ɔi, ɔɪ], boy
<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
</div> </div>
</div> </div>
</div> </div>
@ -689,7 +471,5 @@
</div> </div>
<hr> <hr>
<h2 id="xthing">x value is something</h2>
</body> </body>
</html> </html>

152
articles/circle_script/circle_setter.js
Unescape 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 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; var major_radius;
const glyphs = []; const glyphs = [];
const vowels = [];
var embed; const consonants = [];
$(document).ready(function() { $(document).ready(function() {
svg = $('svg#arena')[0]; svg = $('svg#arena')[0];
major_radius = parseFloat($('circle').attr('r')); major_radius = parseFloat($('circle').attr('r'));
//$.each(glyphs, function(idx, glyph) {
// glyph.element.appendTo($(svg));
//})
$(document).on("mouseup", on_mouse_up); $(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 receptacle = $("#consonant_put_it_in_here");
let selected = $(this); let selected = $(this);
receptacle.html(selected.html()); receptacle.html(selected.html());
})
// handle changing the vowels const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
$('.vowel-example > svg').on("click", function(event) {
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 receptacle = $('#vowel_put_it_in_here');
let selected = $(this); let selected = $(this);
receptacle.html(selected.html()); 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));
var t = $("#testbed"); currently_dragging = g;
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_consonant_grid();
populate_vowels();
}); });
function populate_consonant_grid() { function populate_consonant_grid() {
@ -77,7 +66,6 @@ function populate_consonant_grid() {
}); });
} }
function split_megaglyph(megaglyph) { function split_megaglyph(megaglyph) {
// megaglyph is an svg object which contains all the possible radicals at once. // 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. // 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]; 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) { 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 // 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; currently_dragging = event.data;
} }
function on_mouse_down_create_from(source) { function make_new_consonant(source) {
// call this with a source place (from which it should copy some svg) to get an onmousedown for creating that glyph // create a new glyph object by copying the elements pointed to by source
return function(event) { // this will add it to the svg and to the glyphs list
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); var x = {};
var g = make_new_glyph(source); x.angle = 0;
g.position = mouse_position; x.element = source.clone().attr("id","").attr("onclick", "").attr("onmousedown", "");
set_transform(g.element, mouse_position, appropriate_angle(mouse_position)); x.element.find("#consonant_put_it_in_here").attr("id","");
x.position = {x:0, y:0};
currently_dragging = g; set_transform(x.element, x.position, 0);
} x.element.on("mousedown", x, on_mouse_down);
} $(svg).append(x.element);
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; 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(source) { function make_new_glyph_from(source) {
// create a new glyph object by copying the elements pointed to by 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 // this will add it to the svg and to the glyphs list
var x = {}; var x = {};
x.angle = 0; x.angle = 0;
x.element = source.clone().attr("id","").attr("onclick", "").attr("onmousedown", ""); 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}; x.position = {x:0, y:0};
set_transform(x.element, x.position, 0); set_transform(x.element, x.position, 0);
x.element.on("mousedown", x, on_mouse_down); x.element.on("mousedown", x, on_mouse_down);
$(svg).append(x.element); $(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); glyphs.push(x);
return 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. // 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)) { if (currently_dragging != null && is_in_delete_region(currently_dragging.position)) {
remove(glyphs, currently_dragging); remove(glyphs, currently_dragging);
$.each(currently_dragging.handles, function() { $(this).remove(); });
currently_dragging.element.remove(); currently_dragging.element.remove();
currently_dragging = null; currently_dragging = null;
} }
@ -173,8 +164,7 @@ function on_mouse_up(event) {
if (currently_dragging != null) { if (currently_dragging != null) {
currently_dragging.position = mul(norm(currently_dragging.position), major_radius); currently_dragging.position = mul(norm(currently_dragging.position), major_radius);
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position)); set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));
//currently_dragging.element.attr("x", currently_dragging.position.x); update_handles(currently_dragging);
//currently_dragging.element.attr("y", currently_dragging.position.y)
} }
currently_dragging = null; currently_dragging = null;
@ -192,19 +182,23 @@ function is_in_delete_region(p) {
} }
$(document).mousemove(function(event) { $(document).mousemove(function(event) {
const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg); const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
const mouse_move = sub(mouse_position, previous_mouse_position); const mouse_move = sub(mouse_position, previous_mouse_position);
$("#xthing").text("position is " + mouse_position.x + " " + mouse_position.y);
previous_mouse_position = mouse_position; previous_mouse_position = mouse_position;
var s_position = mouse_position; var s_position = mouse_position;
// get the position inside the svg tag for the mouse // get the position inside the svg tag for the mouse
if (currently_dragging != null) { if (currently_dragging != null) {
update_handles(currently_dragging);
currently_dragging.position = add(currently_dragging.position, mouse_move); currently_dragging.position = add(currently_dragging.position, mouse_move);
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position)); 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
Unescape 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;} 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; var svg;
@ -70,4 +76,13 @@ function remove(list, element) {
function appropriate_angle(point) { function appropriate_angle(point) {
return -Math.atan2(point.x, point.y); 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));
} }
Write Preview
Loading…
Cancel
Save