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

work on circle setter?

Browse Source
This commit is contained in:
Shoofle 2024-09-10 13:19:40 -04:00
parent a469213658
commit 9d0e9e0eb7
3 changed files with 215 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
articles/circle_script/circle_setter.html
View File

@ -10,48 +10,30 @@
</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; }
td svg {
width: 3.5em;
height: 3.5em;
}
th label svg {
display: none;
width:3.5em;
height:3.5em;
}
#consonant-grid, #vowel-grid { #consonant-grid, #vowel-grid {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
/* consonants */
td svg {
width: 3.5em;
height: 3.5em;
}
th svg {
display: none;
width:3.5em;
height:3.5em;
}
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
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());
var g = make_new_vowel();
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);
set_location(g, mouse_position);
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; 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
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";