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

work on circle setter?

Browse Source
main
Shoofle 1 month ago
parent a469213658
commit 9d0e9e0eb7
3 changed files with 210 additions and 160 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. 211
      articles/circle_script/circle_setter.html
  2. 158
      articles/circle_script/circle_setter.js
  3. 1
      articles/circle_script/circle_setter_utils.js

211
articles/circle_script/circle_setter.html
Unescape View File

@ -10,48 +10,30 @@
</head> </head>
<body> <body>
<style type="text/css"> <style type="text/css">
path, circle {
fill: none; #consonant-grid, #vowel-grid {
stroke: #aaa; margin-left: auto;
stroke-width: 3px; margin-right: auto;
} }
svg { draggable: false; }
#testbed { display: none; } /* consonants */
td svg { td svg {
width: 3.5em; width: 3.5em;
height: 3.5em; height: 3.5em;
} }
th label svg { th svg {
display: none; display: none;
width:3.5em; width:3.5em;
height:3.5em; height:3.5em;
} }
#consonant-grid, #vowel-grid {
margin-left: auto;
margin-right: auto;
}
td { td {
padding: 0.25em; padding: 0.25em;
} }
.vowel-example {
padding: 1em;
}
td, .vowel-sequence { td, .vowel-sequence {
border: 2px solid gray; border: 2px solid gray;
} }
table > img {
width: 50%;
height: 50%;
}
svg#arena circle, svg#arena path { fill: none; stroke: #600; }
svg#arena circle { stroke: #044; }
rect { fill:transparent; }
#delete { fill:pink; }
svg#arena .enclosure { stroke: #000; }
/* vowels */
#vowel-grid { #vowel-grid {
display: block; display: block;
} }
@ -60,6 +42,7 @@
} }
.vowel-example { .vowel-example {
display: inline-block; display: inline-block;
padding: 1em;
} }
.vowel-example * { .vowel-example * {
vertical-align: middle; vertical-align: middle;
@ -68,46 +51,47 @@
width: 3.5em; width: 3.5em;
height: 3.5em; height: 3.5em;
} }
/* svg stuff */
svg { draggable: false; }
svg path, svg circle {
fill: none;
stroke: red;
stroke-width: 4px;
}
#word_circle { stroke: transparent; }
.vowel-base, .glyph, .line_1, .line_2, .line_3, .dot_1, .dot_2, .dot_3{
stroke: #000;
stroke-width: 2px;
}
.handle { display: none; }
.click_target { fill:transparent; }
#delete { fill:pink; }
/* this is styling rather than layout, not sure where it should go */
.unverified { .unverified {
color: lightgray; color: lightgray;
} }
.megaglyph { display: none; }
.intervowel { stroke-width: 1px; stroke: #000; }
</style> </style>
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"><!-- consonants --> <div class="span4"><!-- consonants -->
<form id="consonant_form"> <form id="consonant_form">
<table id="consonant-grid"> <table id="consonant-grid">
<thead>
<tr class="header">
<th></th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_1" name="radicals" value="example-diacritic-1.svg">
<label for="rad_1"><img src="example-diacritic-1.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_2" name="radicals" value="example-diacritic-2.svg">
<label for="rad_2"><img src="example-diacritic-2.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_3" name="radicals" value="example-diacritic-3.svg">
<label for="rad_3"><img src="example-diacritic-3.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_4" name="radicals" value="example-diacritic-4.svg">
<label for="rad_4"><img src="example-diacritic-4.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_5" name="radicals" value="example-diacritic-5.svg">
<label for="rad_5"><img src="example-diacritic-5.svg" /></label>
</th>
<th></th>
</tr>
</thead>
<tbody> <tbody>
<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"> <svg >
<label for="shape_1_u"><svg >
<g <g
inkscape:label="Layer 1" inkscape:label="Layer 1"
inkscape:groupmode="layer" inkscape:groupmode="layer"
@ -130,7 +114,7 @@
class="dot_1" /><path class="dot_1" /><path
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>
</th> </th>
<td>[m]<svg/></td> <td>[m]<svg/></td>
<td>[n]<svg/></td> <td>[n]<svg/></td>
@ -138,55 +122,46 @@
<td>[ŋ]<svg/></td> <td>[ŋ]<svg/></td>
<td></td> <td></td>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_1_v" name="glyphs" value="consonant-mound-2.svg"> <img src="consonant-mound-2.svg" />
<label for="shape_1_v"><img src="consonant-mound-2.svg" /></label>
</th> </th>
</tr> </tr>
<tr> <tr>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_2_u" name="glyphs" value="consonant-ohm-1.svg"> <svg>
<label for="shape_2_u"><svg>
<g <g
inkscape:label="Layer 1" inkscape:label="Layer 1"
inkscape:groupmode="layer" inkscape:groupmode="layer"
class="omega-1 megaglyph" class="omega-1 megaglyph"
transform="translate(25,0)"> transform="translate(25,0)">
<path <path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.3829;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -20.755057,77.343458 c 0,0 0,30.618622 0.380829,46.994252 C -23.040029,95.204323 -6.4362494,84.506425 8.6829945,92.576601 23.802242,100.64678 20.107856,123.61413 -0.07606316,123.80455 H 44.10006" d="m -20.755057,77.343458 c 0,0 0,30.618622 0.380829,46.994252 C -23.040029,95.204323 -6.4362494,84.506425 8.6829945,92.576601 23.802242,100.64678 20.107856,123.61413 -0.07606316,123.80455 H 44.10006"
class="glyph" class="glyph"
sodipodi:nodetypes="cczcc" /> sodipodi:nodetypes="cczcc" />
<path <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 -1.7099346,89.222829 c 0.46392,-33.24781 0,-74.22767 0,-74.22767" d="m -1.7099346,89.222829 c 0.46392,-33.24781 0,-74.22767 0,-74.22767"
class="line_1" /> class="line_1" />
<path <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 23.690919,125.15467 C 24.154842,91.90686 17.814561,48.76203 17.814561,48.76203" d="M 23.690919,125.15467 C 24.154842,91.90686 17.814561,48.76203 17.814561,48.76203"
class="line_2" class="line_2"
sodipodi:nodetypes="cc" /> sodipodi:nodetypes="cc" />
<path <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 41.062172,125.07492 c 0.46392,-33.24781 5.87636,-76.08337 5.87636,-76.08337" d="m 41.062172,125.07492 c 0.46392,-33.24781 5.87636,-76.08337 5.87636,-76.08337"
class="line_3" class="line_3"
sodipodi:nodetypes="cc" /> sodipodi:nodetypes="cc" />
<path <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.402587,73.540483 C -5.9076651,66.117713 20.07202,31.787413 34.91756,47.251513" d="M -12.402587,73.540483 C -5.9076651,66.117713 20.07202,31.787413 34.91756,47.251513"
class="dot_1" class="dot_1"
inkscape:label="dot_1" /> inkscape:label="dot_1" />
<path <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 0.413012,80.253857 C 13.712136,63.243348 16.186393,64.635117 19.743135,67.882578" d="M 0.413012,80.253857 C 13.712136,63.243348 16.186393,64.635117 19.743135,67.882578"
class="dot_2" class="dot_2"
inkscape:label="dot_2" /> inkscape:label="dot_2" />
<path <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.541326,81.256384 C 35.84045,64.245876 38.314707,65.637645 41.871449,68.885106" d="M 22.541326,81.256384 C 35.84045,64.245876 38.314707,65.637645 41.871449,68.885106"
id="path1720-1" id="path1720-1"
class="dot_3" /> class="dot_3" />
</g> </g>
</svg></label> </svg>
</th> </th>
<td>[p], [b]<svg/></td> <td>[p], [b]<svg/></td>
<td>[t], [d]<svg/></td> <td>[t], [d]<svg/></td>
@ -194,14 +169,12 @@
<td>[k], [g]<svg/></td> <td>[k], [g]<svg/></td>
<td class="unverified">[q], [ɢ]</td> <td class="unverified">[q], [ɢ]</td>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_2_v" name="glyphs" value="consonant-ohm-2.svg"> <img src="consonant-ohm-2.svg" />
<label for="shape_2_v"><img src="consonant-ohm-2.svg" /></label>
</th> </th>
</tr> </tr>
<tr> <tr>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_3_u" name="glyphs" value="consonant-angle-1.svg"> <svg>
<label for="shape_3_u"><svg>
<g <g
inkscape:label="Layer 1" inkscape:label="Layer 1"
inkscape:groupmode="layer" inkscape:groupmode="layer"
@ -238,7 +211,7 @@
d="M 16.096549,63.950507 C 29.395673,46.939999 31.86993,48.331768 35.426672,51.579229" 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"/> id="path1720-1" class="dot_3"/>
</g> </g>
</svg></label> </svg>
</th> </th>
<td>[f], [v]<svg></svg></td> <td>[f], [v]<svg></svg></td>
<td>[s], [z]<svg></svg></td> <td>[s], [z]<svg></svg></td>
@ -246,44 +219,42 @@
<td></td> <td></td>
<td class="unverified">[ʔ], [ʡ]<svg></svg></td> <td class="unverified">[ʔ], [ʡ]<svg></svg></td>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_3_v" name="glyphs" value="consonant-angle-2.svg"> <img src="consonant-angle-2.svg" />
<label for="shape_3_v"><img src="consonant-angle-2.svg" /></label>
</th> </th>
</tr> </tr>
<tr> <tr>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_4_u" name="glyphs" value="consonant-loop-1.svg"> <svg>
<label for="shape_4_u"><svg> <g
<g inkscape:label="Layer 1"
inkscape:label="Layer 1" inkscape:groupmode="layer"
inkscape:groupmode="layer" class="loop-1 megaglyph"
class="loop-1 megaglyph" transform="translate(25,0)"><path
transform="translate(25,0)"><path style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m -17.664457,111.5189 c 17.71094207,0 50.4325,2.83413 56.735052,-9.45585 C 43.573377,93.28263 38.467691,81.072874 30.440263,79.305245 19.108262,76.809953 6.7206019,82.850589 6.8006582,96.359531 c 0.093399,15.760439 0.600371,39.624479 0.600371,39.624479"
d="m -17.664457,111.5189 c 17.71094207,0 50.4325,2.83413 56.735052,-9.45585 C 43.573377,93.28263 38.467691,81.072874 30.440263,79.305245 19.108262,76.809953 6.7206019,82.850589 6.8006582,96.359531 c 0.093399,15.760439 0.600371,39.624479 0.600371,39.624479" class="path1628"
class="path1628" sodipodi:nodetypes="csssc" /><path
sodipodi:nodetypes="csssc" /><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"
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 23.808051,77.786834 c 0.463923,-33.247812 0,-74.2276754 0,-74.2276754"
d="m 23.808051,77.786834 c 0.463923,-33.247812 0,-74.2276754 0,-74.2276754" 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"
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.223385,80.178675 C 15.687308,46.930858 9.347027,3.7860214 9.347027,3.7860214"
d="M 15.223385,80.178675 C 15.687308,46.930858 9.347027,3.7860214 9.347027,3.7860214" 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"
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 32.594639,80.098915 C 33.058562,46.851104 38.470997,4.0155494 38.470997,4.0155494"
d="M 32.594639,80.098915 C 33.058562,46.851104 38.470997,4.0155494 38.470997,4.0155494" 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"
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.774911,69.552061 C 18.074035,52.541552 20.548292,53.933321 24.105034,57.180782"
d="M 4.774911,69.552061 C 18.074035,52.541552 20.548292,53.933321 24.105034,57.180782" 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"
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.769074,48.90485 C 29.068198,31.894341 31.542454,33.28611 35.099197,36.533571"
d="M 15.769074,48.90485 C 29.068198,31.894341 31.542454,33.28611 35.099197,36.533571" 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"
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 26.903225,70.554588 C 40.202349,53.54408 42.676606,54.935849 46.233348,58.18331"
d="M 26.903225,70.554588 C 40.202349,53.54408 42.676606,54.935849 46.233348,58.18331" class="dot_3" /></g>
class="dot_3" /></g> </svg>
</svg></label>
</th> </th>
<td>[θ], [ð]<svg/></td> <td>[θ], [ð]<svg/></td>
<td class="unverified">[ts]<svg/></td> <td class="unverified">[ts]<svg/></td>
@ -291,14 +262,12 @@
<td>[x~χ], <span class="unverified">[ʁ]</span><svg/></td> <td>[x~χ], <span class="unverified">[ʁ]</span><svg/></td>
<td></td> <td></td>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_4_v" name="glyphs" value="consonant-loop-2.svg"> <img src="consonant-loop-2.svg" />
<label for="shape_4_v"><img src="consonant-loop-2.svg" /></label>
</th> </th>
</tr> </tr>
<tr> <tr>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_5_u" name="glyphs" value="consonant-wave-1.svg"> <svg>
<label for="shape_5_u"><svg>
<g <g
inkscape:label="Layer 1" inkscape:label="Layer 1"
inkscape:groupmode="layer" inkscape:groupmode="layer"
@ -328,7 +297,7 @@
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" 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.295436,69.654031 C 27.59456,52.643523 30.068817,54.035292 33.625559,57.282753" d="M 14.295436,69.654031 C 27.59456,52.643523 30.068817,54.035292 33.625559,57.282753"
class="dot_3" /></g> class="dot_3" /></g>
</svg></label> </svg>
</th> </th>
<td>[w]<svg/></td> <td>[w]<svg/></td>
<td>[ɹ], [l]<svg/></td> <td>[ɹ], [l]<svg/></td>
@ -336,8 +305,7 @@
<td>[j]<svg/></td> <td>[j]<svg/></td>
<td>[h]<svg/></td> <td>[h]<svg/></td>
<th scope="row" class="consonant-shape"> <th scope="row" class="consonant-shape">
<input type="radio" id="shape_5_v" name="glyphs" value="consonant-wave-2.svg"> <img src="consonant-wave-2.svg" />
<label for="shape_5_v"><img src="consonant-wave-2.svg" /></label>
</th> </th>
</tr> </tr>
</tbody> </tbody>
@ -346,23 +314,23 @@
</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"/> <g transform="translate(-300,0)" id="consonant_place_group">
<g transform="translate(-100,0)" id="consonant_place_group">
<g id="consonant_copy_from_here"> <g id="consonant_copy_from_here">
<rect x="-15" y="-35" width="30" height="35"/> <rect class="click_target" x="-15" y="-35" width="30" height="35"/>
<g id="consonant_put_it_in_here" transform="translate(-12,-45) scale(0.3)"></g> <g id="consonant_put_it_in_here" transform="translate(-12,-45) scale(0.3)"></g>
</g> </g>
</g> </g>
<circle cx="0" cy="0" r="60" id="word_circle" /> <circle cx="0" cy="0" r="100" id="word_circle" />
<rect x="-50" id="delete" y="80" width="100" height="80"/> <rect x="80" id="delete" y="80" width="40" height="40"/>
<g transform="translate(100,0)" id="vowel_place_group"> <g transform="translate(300,0)" id="vowel_place_group">
<g id="vowel_copy_from_here"> <g id="vowel_copy_from_here">
<rect x="-15" y="-35" width="30" height="35"/> <rect class="click_target" x="-15" y="-35" width="30" height="35"/>
<g id="vowel_put_it_in_here" transform="translate(-6,-30) scale(0.5)"></g> <g id="vowel_put_it_in_here" transform="translate(-6,-30) scale(0.5)"></g>
</g> </g>
</g> </g>
<g id="connections" />
</svg> </svg>
</div> </div>
<div class="span4"><!-- vowels --> <div class="span4"><!-- vowels -->
@ -394,9 +362,6 @@
<path <path
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181" d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
class="emphasis-inner" /> 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 <path
class="triangle-inner" class="triangle-inner"
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z" /> d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z" />

158
articles/circle_script/circle_setter.js
Unescape View File

@ -4,8 +4,12 @@ const glyphs = [];
const vowels = []; const vowels = [];
const consonants = []; const consonants = [];
var svg;
var connections_container;
$(document).ready(function() { $(document).ready(function() {
svg = $('svg#arena')[0]; svg = $('svg#arena')[0];
connections_container = $('svg#arena #connections');
major_radius = parseFloat($('circle').attr('r')); major_radius = parseFloat($('circle').attr('r'));
$(document).on("mouseup", on_mouse_up); $(document).on("mouseup", on_mouse_up);
@ -17,9 +21,8 @@ $(document).ready(function() {
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);
var g = make_new_glyph_from($("#consonant_copy_from_here")); var g = make_new_consonant();
g.position = mouse_position; set_location(g, mouse_position);
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
currently_dragging = g; currently_dragging = g;
}) })
@ -28,11 +31,10 @@ $(document).ready(function() {
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_vowel();
var g = make_new_glyph_from($("#vowel_copy_from_here")); const mouse_position = svg_from_dom({x:event.clientX, y:event.clientY}, svg);
g.position = mouse_position; set_location(g, mouse_position);
set_transform(g.element, mouse_position, appropriate_angle(mouse_position));
currently_dragging = g; currently_dragging = g;
}); });
@ -103,52 +105,53 @@ function populate_vowels() {
}); });
} }
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 make_new_consonant(source) { function make_new_consonant(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 = $("#consonant_copy_from_here").clone().attr("id","").attr("onclick", "").attr("onmousedown", "");
x.element.find("#consonant_put_it_in_here").attr("id",""); x.element.find("#consonant_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); x.element.on("mousedown", x, (event) => { currently_dragging = event.data });
x.element.on("mousedown", x, on_mouse_down);
$(svg).append(x.element); $(svg).append(x.element);
x.handles = []; x.handles = [];
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2)) x.handles.push($(ns_elem("circle", svg_ns)))
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2)) x.handles.push($(ns_elem("circle", svg_ns)))
$.each(x.handles, () => $(svg).append(this)); $.each(x.handles, function() {
$(svg).append(this)
this.attr("r", 2);
add_class(this, "handle");
});
update_handles(x); update_handles(x);
glyphs.push(x); glyphs.push(x);
x.vowel = false;
return x; return x;
} }
function make_new_glyph_from(source) { function make_new_vowel(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 = $("#vowel_copy_from_here").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.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); x.element.on("mousedown", x, (event) => { currently_dragging = event.data });
x.element.on("mousedown", x, on_mouse_down);
$(svg).append(x.element); $(svg).append(x.element);
x.handles = []; x.handles = [];
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2)) x.handles.push($(ns_elem("circle", svg_ns)));
x.handles.push($(ns_elem("circle", svg_ns)).attr("r",2)) x.handles.push($(ns_elem("circle", svg_ns)));
$(svg).append(x.handles[0]).append(x.handles[1]); $.each(x.handles, function() {
$(svg).append(this)
this.attr("r", 2);
add_class(this, "handle");
});
update_handles(x); update_handles(x);
glyphs.push(x); glyphs.push(x);
x.vowel = true;
return x; return x;
} }
@ -159,12 +162,11 @@ function on_mouse_up(event) {
$.each(currently_dragging.handles, function() { $(this).remove(); }); $.each(currently_dragging.handles, function() { $(this).remove(); });
currently_dragging.element.remove(); currently_dragging.element.remove();
currently_dragging = null; currently_dragging = null;
connect_vowels();
} }
if (currently_dragging != null) { if (currently_dragging != null) {
currently_dragging.position = mul(norm(currently_dragging.position), major_radius); set_location(currently_dragging, mul(norm(currently_dragging.position), major_radius));
set_transform(currently_dragging.element, currently_dragging.position, appropriate_angle(currently_dragging.position));
update_handles(currently_dragging);
} }
currently_dragging = null; currently_dragging = null;
@ -190,15 +192,99 @@ $(document).mousemove(function(event) {
// 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) {
set_location(currently_dragging, add(currently_dragging.position, mouse_move));
update_handles(currently_dragging); 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) { 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)) if (g.element.find('path.glyph,path.vowel-base').length != 0) {
set_loc(g.handles[1], get_global_point_at_length(svg, g.element.find('path.glyph,path.vowel-base')[0], 1000)) 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));
}
connect_vowels();
}
function set_location(glyph, point) {
glyph.position = point;
glyph.angle = Math.atan2(point.y, point.x);
set_transform(glyph.element, glyph.position, appropriate_angle(point));
update_handles(glyph);
}
function connect_vowels() {
let vowels = $.grep(glyphs, (v) => v.vowel);
vowels.sort((a, b) => b.angle - a.angle);
console.log($.map(vowels, (a)=>a.angle));
// clear oout the old connections
connections_container.html("");
if (vowels.length == 0) {
// if there's no vowels, we should have just a bare circle
/*} else if (vowels.length == 1) {
// make a fake point on the other side to connect
let connection = ns_elem("path", svg_ns);
add_class(connection, "intervowel");
let path = `M ${start_x} ${start_y} `;
path += `A ${}`
$(connection).attr("d", `M ${start_x} ${start_y} A ${major_radius} ${major_radius} 0 ${sweep} ${large} ${end_x} ${end_y}`);
connections_container.append(connection);*/
} else {
// otherwise iterate over them and connect one to the next
for (let i=0; i < vowels.length; i++) {
//connections_container.append($(ns_elem("circle", svg_ns)).attr("r",1).attr("cx",Math.cos(vowels[i].angle)*major_radius).attr("cy",major_radius*Math.sin(vowels[i].angle)));
let connection = ns_elem("path", svg_ns);
add_class(connection, "intervowel");
let first = vowels[i];
let second = vowels[(i+1)%vowels.length];
let start_x = parseFloat(first.handles[1].attr("cx"));
let start_y = parseFloat(first.handles[1].attr("cy"));
/* abandoned quadratic approach
let roundness = 0.2*Math.abs(first.angle - second.angle);
roundness = first.angle > second.angle ? 1 : 0;
let s_dx = start_x + (Math.sin(first.angle) * major_radius * roundness);
let s_dy = start_y - (Math.cos(first.angle) * major_radius * roundness);
*/
let end_x = parseFloat(second.handles[0].attr("cx"));
let end_y = parseFloat(second.handles[0].attr("cy"));
/*
let e_dx = end_x - (Math.sin(second.angle) * major_radius * roundness);
let e_dy = end_y + (Math.cos(second.angle) * major_radius * roundness);
// $(connection).attr("d", `M ${start_x} ${start_y} C ${s_dx} ${s_dy} ${e_dx} ${e_dy} ${end_x} ${end_y}`);
*/
let distance = -(second.angle - first.angle);
if (vowels.length == 1) {
distance = 1.5*Math.PI;
}
let midpoint;
let sweep = "0";
let large = "0";
if (distance < 0) {
distance += 2*Math.PI;
}
if (distance < Math.PI) {
sweep = "0"
large = "0"
} else if (distance < 2*Math.PI) {
sweep = "1"
large = "0"
}
$(connection).attr("d", `M ${start_x} ${start_y} A ${major_radius} ${major_radius} 0 ${sweep} ${large} ${end_x} ${end_y}`);
connections_container.append(connection);
}
}
} }

1
articles/circle_script/circle_setter_utils.js
Unescape View File

@ -6,7 +6,6 @@ SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformTo
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_ns = "http://www.w3.org/2000/svg"; var svg_ns = "http://www.w3.org/2000/svg";
var xlink_ns = "http://www.w3.org/1999/xlink"; var xlink_ns = "http://www.w3.org/1999/xlink";

Write Preview
Loading…
Cancel
Save