@ -4,8 +4,12 @@ const glyphs = [];
const vowels = [ ] ;
const consonants = [ ] ;
var svg ;
var connections _container ;
$ ( document ) . ready ( function ( ) {
svg = $ ( 'svg#arena' ) [ 0 ] ;
connections _container = $ ( 'svg#arena #connections' ) ;
major _radius = parseFloat ( $ ( 'circle' ) . attr ( 'r' ) ) ;
$ ( 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 ) ;
var g = make _new _glyph _from ( $ ( "#consonant_copy_from_here" ) ) ;
g . position = mouse _position ;
set _transform ( g . element , mouse _position , appropriate _angle ( mouse _position ) ) ;
var g = make _new _consonant ( ) ;
set _location ( g , mouse _position ) ;
currently _dragging = g ;
} )
@ -28,11 +31,10 @@ $(document).ready(function() {
let selected = $ ( this ) ;
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" ) ) ;
g . position = mouse _position ;
set _transform ( g . element , mouse _position , appropriate _angle ( mouse _position ) ) ;
const mouse _position = svg _from _dom ( { x : event . clientX , y : event . clientY } , svg ) ;
set _location ( g , mouse _position ) ;
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 ) {
// create a new glyph object by copying the elements pointed to by source
// this will add it to the svg and to the glyphs list
var x = { } ;
x . angle = 0 ;
x . element = source . clone ( ) . attr ( "id" , "" ) . attr ( "onclick" , "" ) . attr ( "onmousedown" , "" ) ;
x . element = $ ( "#consonant_copy_from_here" ) . clone ( ) . attr ( "id" , "" ) . attr ( "onclick" , "" ) . attr ( "onmousedown" , "" ) ;
x . element . find ( "#consonant_put_it_in_here" ) . attr ( "id" , "" ) ;
x . position = { x : 0 , y : 0 } ;
set _transform ( x . element , x . position , 0 ) ;
x . element . on ( "mousedown" , x , on _mouse _down ) ;
x . element . on ( "mousedown" , x , ( event ) => { currently _dragging = event . data } ) ;
$ ( svg ) . append ( x . element ) ;
x . handles = [ ] ;
x . handles . push ( $ ( ns _elem ( "circle" , svg _ns ) ) . attr ( "r" , 2 ) )
x . handles . push ( $ ( ns _elem ( "circle" , svg _ns ) ) . attr ( "r" , 2 ) )
$ . each ( x . handles , ( ) => $ ( svg ) . append ( this ) ) ;
x . handles . push ( $ ( ns _elem ( "circle" , svg _ns ) ) )
x . handles . push ( $ ( ns _elem ( "circle" , svg _ns ) ) )
$ . each ( x . handles , function ( ) {
$ ( svg ) . append ( this )
this . attr ( "r" , 2 ) ;
add _class ( this , "handle" ) ;
} ) ;
update _handles ( x ) ;
glyphs . push ( x ) ;
x . vowel = false ;
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
// this will add it to the svg and to the glyphs list
var x = { } ;
x . angle = 0 ;
x . element = source . clone ( ) . attr ( "id" , "" ) . attr ( "onclick" , "" ) . attr ( "onmousedown" , "" ) ;
x . element . find ( "#consonant_put_it_in_here" ) . attr ( "id" , "" ) ;
x . element = $ ( "#vowel_copy_from_here" ) . clone ( ) . attr ( "id" , "" ) . attr ( "onclick" , "" ) . attr ( "onmousedown" , "" ) ;
x . element . find ( "#vowel_put_it_in_here" ) . attr ( "id" , "" ) ;
x . position = { x : 0 , y : 0 } ;
set _transform ( x . element , x . position , 0 ) ;
x . element . on ( "mousedown" , x , on _mouse _down ) ;
x . element . on ( "mousedown" , x , ( event ) => { currently _dragging = event . data } ) ;
$ ( 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 ] ) ;
x . handles . push ( $ ( ns _elem ( "circle" , svg _ns ) ) ) ;
x . handles . push ( $ ( ns _elem ( "circle" , svg _ns ) ) ) ;
$ . each ( x . handles , function ( ) {
$ ( svg ) . append ( this )
this . attr ( "r" , 2 ) ;
add _class ( this , "handle" ) ;
} ) ;
update _handles ( x ) ;
glyphs . push ( x ) ;
x . vowel = true ;
return x ;
}
@ -159,12 +162,11 @@ function on_mouse_up(event) {
$ . each ( currently _dragging . handles , function ( ) { $ ( this ) . remove ( ) ; } ) ;
currently _dragging . element . remove ( ) ;
currently _dragging = null ;
connect _vowels ( ) ;
}
if ( currently _dragging != null ) {
currently _dragging . position = mul ( norm ( currently _dragging . position ) , major _radius ) ;
set _transform ( currently _dragging . element , currently _dragging . position , appropriate _angle ( currently _dragging . position ) ) ;
update _handles ( currently _dragging ) ;
set _location ( currently _dragging , mul ( norm ( currently _dragging . position ) , major _radius ) ) ;
}
currently _dragging = null ;
@ -190,15 +192,99 @@ $(document).mousemove(function(event) {
// get the position inside the svg tag for the mouse
if ( currently _dragging != null ) {
set _location ( currently _dragging , add ( currently _dragging . position , mouse _move ) ) ;
update _handles ( currently _dragging ) ;
currently _dragging . position = add ( currently _dragging . position , mouse _move ) ;
set _transform ( currently _dragging . element , currently _dragging . position , appropriate _angle ( currently _dragging . position ) ) ;
}
} ) ;
function update _handles ( g ) {
set _loc ( g . handles [ 0 ] , get _global _point _at _length ( svg , g . element . find ( 'path.glyph,path.vowel-base' ) [ 0 ] , 0 ) )
set _loc ( g . handles [ 1 ] , get _global _point _at _length ( svg , g . element . find ( 'path.glyph,path.vowel-base' ) [ 0 ] , 1000 ) )
if ( g . element . find ( 'path.glyph,path.vowel-base' ) . length != 0 ) {
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
/ * } e l s e i f ( v o w e l s . l e n g t h = = 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" ) ) ;
/ * a b a n d o n e d q u a d r a t i c a p p r o a c h
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 ) ;
}
}
}