Svgbob Architecture and Design phases

Svgbob creates an svg drawing based on the input ascii art diagrams. It achieves this by creating a corresponding fragment for each character, and then this little fragments are then merged to form lines and arcs. The lines and arcs are then endorsed into high level shapes such as rect, circles.

Name inspiration:

  • svg for svg document and drawing.
  • bob for Alice and Bob as common characters in most diagrams Bob Ross - a painter who like to draws happy little trees.

Library used

  • nalgebra and ncollide2d for geometric function calculations such as calculating whether lines are intersecting, collinear. Computing the clipping of lines and boxes.
  • pom for parsing the styling directives(Legend) at the bottom of the document
  • sauron for building the svg document object tree.

Iterations, re-architecture rewrites

Phase 1

Exploding if statements. This was in elm fullcode

1getElement x y model =
2    let
3        char = get x y model
4    in
5        case char of
6            Just char ->
7                if isVertical char
8                    && not (isNeighbor left isAlphaNumeric)
9                    && not (isNeighbor right isAlphaNumeric) then
10                    Just Vertical
11                else if isHorizontal char
12                    && not (isNeighbor left isAlphaNumeric)
13                    && not (isNeighbor right isAlphaNumeric) then
14                    Just Horizontal
15                else if isIntersection char then
16                    let
17                        isVerticalJunctionLeft =
18                            isNeighbor top isVertical
19                            && isNeighbor(bottomOf  x y model) isVertical
20                            && isNeighbor(leftOf  x y model) isHorizontal
21
22                        isVerticalJunctionRight =
23                            isNeighbor top isVertical
24                            && isNeighbor bottom isVertical
25                            && isNeighbor right isHorizontal
26
27                        isHorizontalJunctionTop =
28                            isNeighbor left isHorizontal
29                            && isNeighbor right isHorizontal
30                            && isNeighbor top isVertical
31
32                        isHorizontalJunctionBot =
33                            isNeighbor left isHorizontal
34                            && isNeighbor right isHorizontal
35                             && isNeighbor bottom isVertical
36
37                        isTopLeftIntersection =
38                            isNeighbor bottom isVertical && isNeighbor right isHorizontal
39
40                        isTopRightIntersection =
41                            isNeighbor bottom isVertical && isNeighbor left isHorizontal
42
43                        isBottomRightIntersection =
44                            isNeighbor top isVertical && isNeighbor left isHorizontal
45
46                        isBottomLeftIntersection =
47                            isNeighbor top isVertical && isNeighbor right isHorizontal
48
49                        isCrossIntersection =
50                            isNeighbor top isVertical
51                            && isNeighbor bottom isVertical
52                            && isNeighbor left isHorizontal
53                            && isNeighbor right isHorizontal
54
55    ...  200 more lines...
56

Though elm is fast, but if you throw a lot of conditional branching to it, it will slow it down. At least I don't get to have runtime errors here if it was written in js. Adding an edgecase is just appending a new if else statement at the bottom of the statements.

Pros: Very simple design. Just if statements and return the appropriate shape the character will take form Adding edge case behaviour is just appending an else if to the nearest conditional(if) behavior.

Caveats: The fragments/drawing elements are named. Naming is hard, we can not name all of them. Consistency is broken.

Phase2:

Now in rust. The character behavior is stored in a Vec<(condition, drawing_elements)> This is already close to the current architecture.

Improvements:

  • Runs a lot faster than elm. Converting the code from elm to rust, accelerate my learning of the usage of functional programming in rust.
  • Consumed elements, if certain group of elements matches a higher level shapes, those elements are consumed/remove from the grid to avoid generating additional drawing elements when iterated with the rest of the characters in the grid.
1    //get the paths in the location x,y
2    //if non path, then see if it can return a text path
3    fn get_elements(&self, x:isize, y:isize, settings: &Settings) -> Option<Vec<Element>>{
4        ...
5        //common path lines
6        let vertical = Element::solid_line(center_top, center_bottom);
7        let horizontal = Element::solid_line(mid_left, mid_right);
8        let slant_left = Element::solid_line(high_left, low_right);
9        let slant_right = Element::solid_line(low_left, high_right);
10        let low_horizontal = Element::solid_line(low_left, low_right);
11
12
13        let match_list: Vec<(bool, Vec<Element>)> =
14            vec![
15                /*
16                      .-
17                      |
18                */
19                (self.is_char(this, is_round)
20                 && self.is_char(right, is_horizontal)
21                 && self.is_char(bottom, is_vertical),
22                 vec![cxdy_cxey.clone(), arc_excy_cxdy.clone()]
23                ),
24                /*
25                      -.
26                       |
27                */
28                (self.is_char(this, is_round)
29                 && self.is_char(left, is_horizontal)
30                 && self.is_char(bottom, is_vertical),
31                 vec![cxdy_cxey.clone(), arc_cxdy_axcy.clone()]
32                ),
33                /*
34                     |
35                     '-
36                */
37                (self.is_char(this, is_round)
38                 && self.is_char(right, is_horizontal)
39                 && self.is_char(top, is_vertical),
40                 vec![cxay_cxby.clone(), arc_cxby_excy.clone()]
41                ),
42                /*
43                     |
44                    -'
45                */
46                (self.is_char(this, is_round)
47                 && self.is_char(left, is_horizontal)
48                 && self.is_char(top, is_vertical),
49                 vec![cxay_cxby.clone(), arc_axcy_cxby.clone()]
50                ),
51                /*
52                    .-
53                   /
54                */
55                (self.is_char(this, is_round)
56                 && self.is_char(right, is_horizontal)
57                 && self.is_char(bottom_left, is_slant_right),
58                 vec![axey_bxdy.clone(), arc_excy_bxdy.clone()]
59                ),
60                /*
61                   -.
62                     \
63                */
64                (self.is_char(this, is_round)
65                 && self.is_char(left, is_horizontal)
66                 && self.is_char(bottom_right, is_slant_left),
67                 vec![exey_dxdy.clone(), arc_dxdy_axcy.clone()]
68                ),
69                /*
70                   -.
71                   /
72                */
73                (self.is_char(this, is_round)
74                 && self.is_char(left, is_horizontal)
75                 && self.is_char(bottom_left, is_slant_right),
76                 vec![axey_bxdy.clone(), arc_bxdy_axcy.clone()]
77                ),
78                /*
79                   .-
80                    \
81                */
82                (self.is_char(this, is_round)
83                 && self.is_char(right, is_horizontal)
84                 && self.is_char(bottom_right, is_slant_left),
85                 vec![exey_dxdy.clone(), arc_excy_dxdy.clone()]
86                ),
87                /*
88                   \
89                    '-
90                */
91                (self.is_char(this, is_round)
92                 && self.is_char(right, is_horizontal)
93                 && self.is_char(top_left, is_slant_left),
94                 vec![axay_bxby.clone(), arc_bxby_excy.clone()]
95                ),
96                /*
97                     /
98                    '-
99                */
100                (self.is_char(this, is_round)
101                 && self.is_char(right, is_horizontal)
102                 && self.is_char(top_right, is_slant_right),
103                 vec![dxby_exay.clone(), arc_dxby_excy.clone()]
104                ),
105                /*
106                    \
107                    -'
108                */
109                (self.is_char(this, is_round)
110                 && self.is_char(left, is_horizontal)
111                 && self.is_char(top_left, is_slant_left),
112                 vec![axay_bxby.clone(), arc_axcy_bxby.clone()]
113                ),
114                /*
115                      /
116                    -'
117                */
118                (self.is_char(this, is_round)
119                 && self.is_char(left, is_horizontal)
120                 && self.is_char(top_right, is_slant_right),
121                 vec![dxby_exay.clone(), arc_axcy_dxby.clone()]
122                ),
123            ]
1
2        // Circle 12
3        //        _
4        //      .' '.
5        //     (  +  )
6        //      `._.'
7        if self.in_left(3).is('(')
8            && self.in_right(3).is(')')
9            && self.in_top(2).is('_')
10            && self.bottom().is('_')
11            && self.top().in_left(2).any(",.")
12            && self.top_left().is('\'')
13            && self.top_right().any("`'")
14            && self.top().in_right(2).is('.')
15            && self.bottom().in_left(2).any("`'")
16            && self.bottom_left().is('.')
17            && self.bottom_right().any(".,")
18            && self.bottom().in_right(2).is('\'')
19        {
20            elm.push(open_circle(m, 12));
21            consumed.extend(vec![
22                left3(),
23                right3(),
24                top2(),
25                bottom(),
26                top_left2(),
27                top_left(),
28                top_right(),
29                top_right2(),
30                bottom_left2(),
31                bottom_left(),
32                bottom_right(),
33                bottom_right2(),
34            ]);
35        }

Caveats: - Merging of small fragments requires checking against all the other fragments of the entire grid. Runtime complexity is at least O(n^2) - Endorsing to shapes requires a lot of if statement comparisons and every cell is checked even for cell that has only a few elements that couldn't form into a certain shapes is tested. - Processing high level stage and low level fragment stage is one execution. - Drawing elements are still named.

Phase 3:

Attempts to add a signal strength to characters depending on their neighboring character whether they should connect or not. This makes the dynamic behavior flexible but the control flow is not very intuitive.

  • Strong + Strong should connect
  • Medium + Medium connects
  • Medium + Weak may connect
  • Weak + Weak should not connect.
1
2    /// get the characteristic of a character
3    /// it's behavior and the intended behavior
4    ///
5    ///    
6    ///    abcde
7    ///    
8    ///    fghij
9    ///    
10    ///    klmno
11    ///    
12    ///    pqrst
13    ///    
14    ///    uvwxy
15    ///    
16    ///
17    fn get_characteristic(&self) -> Option<Characteristic> {
18        ///////////////////////////
19        //
20        // ., dot or period and comma
21        //
22        ///////////////////////////
23        if self.any(".,") {
24            Some(Characteristic {
25                is_static: false,
26                intensify: vec![
27                    //  -.  +.
28                    (
29                        K,
30                        Condition {
31                            loc: left(),
32                            can: ConnectTo(O, Medium),
33                        },
34                    ),
35                    //  .-  .+
36                    (
37                        O,
38                        Condition {
39                            loc: right(),
40                            can: ConnectTo(K, Medium),
41                        },
42                    ),
43                    //  _.
44                    (
45                        U,
46                        Condition {
47                            loc: left(),
48                            can: ConnectTo(Y, Strong),
49                        },
50                    ),
51                    //  ._
52                    (
53                        Y,
54                        Condition {
55                            loc: right(),
56                            can: ConnectTo(U, Strong),
57                        },
58                    ),
59                    //      .
60                    //     /
61                    (
62                        U,
63                        Condition {
64                            loc: bottom_left(),
65                            can: ConnectTo(E, Strong),
66                        },
67                    ),
68                    //      /    only for / else   _
69                    //     .                        .   will connect
70                    (
71                        E,
72                        Condition {
73                            loc: top_right(),
74                            can: IsStrongAll(vec![E, U]),
75                        },
76                    ),
77                    //      .
78                    //       \
79                    (
80                        Y,
81                        Condition {
82                            loc: bottom_right(),
83                            can: ConnectTo(A, Strong),
84                        },
85                    ),
86                    ...
87                ],
88                intended_behavior: vec![
89                    //     .-
90                    //    /
91                    (vec![O, U], vec![arc(o, q, 4), line(q, u)]),
92                    //     .-
93                    //      \
94                    (vec![O, Y], vec![arc(o, s, 4), line(s, y)]),
95                    //     -.
96                    //       \
97                    (vec![K, Y], vec![arc(s, k, 4), line(s, y)]),
98                    //     -.
99                    //     /
100                    (vec![K, U], vec![line(u, q), arc(q, k, 2)]),
101                    //       /
102                    //      .
103                    //     /
104                    (vec![U, E], vec![line(u, e)]),
105                    //     \
106                    //      .
107                    //       \
108                    ...
109                ],
110                properties: vec![
111                    (O, Weak, vec![arc(o, r, 2)]),
112                    (K, Weak, vec![arc(r, k, 2)]),
113                    (W, Medium, vec![line(r, w)]),
114                    (U, Weak, vec![line(q, u)]),
115                    (Y, Weak, vec![line(s, y)]),
116                    (A, Weak, vec![line(m, a)]),
117                    (E, Weak, vec![line(m, e)]),
118                    (F, Weak, vec![line(m, f)]),
119                    (J, Weak, vec![line(m, j)]),
120                ],
121            })
122        }

Pros:

  • Characters are assigned with certain properties. This allows similar characters such as dash(-) and line drawing (-) to have the same behavior without explicitly coding for each of those variations.

Phase 4.

Improvements:

  • Uses of Buffers
    • StringBuffer, input strings are slices into rows and columns
    • CellBuffer, which cells contains which character.
    • FragmentBuffer, which cell contains what fragments(drawing elements)
    • PropertyBuffer, what is the property of each cell based on the the character it contains.

PropertyBuffer is calculated only once for each character, so the succeeding lookup should not waste execution time to recompute.

How the fragments are conceived based on a character?

Neighbor character: There are 8 neighbors of a character and each character on the input is checked agains this 8 neighbor for appropriate drawing element

TopLeftLeftBottomLeftTopcharBottomTopRightRightBottomRight

Character Grid: a 5x5 grid which covers the most significant points for a character to be converted into drawing elements.

Character grid: / is the line connecting E to U. Dash is connecting K to O, etc.

01234012345678BCDAEFGHIJKLMNOPQRSTUYVWX

These fragments are processed such as merging collinear lines that are touching their endpoints.

SvgdrawingSpansStringBufferCellBufferFragmentBufferContactgroupsendorseshapes
  • Optimizations.

    • Usage of span and contact groups. Span group together that are neighbors. Contact groups group together fragments that are touching together. Cells don't need to be checked against other cells when they are far from each other. Merging of fragments such as lines into longer lines needs to interact only elements that are within its group.
  • Endorsing group of fragments into higher level shapes.

    • rect, rounded rect, circles, arcs are higher level shapes that are from small fragment components: arc,lines,
  • Tagging shapes. Text inside of a shape with the pattern "{", "}" will become a tag of the enclosing shape. At the DOM level, the shape is an svg dom element such as: rect,circle,path and the tag is the element class which you can use css to apply a style to the element. The legend part at the bottom of the document is parsed and converted into css which is then appended to the svg document.

1
2    ///
3    ///      0 1 2 3 4           B C D
4    ///     0        AE
5    ///     1             
6    ///     2        FGHIJ
7    ///     3             
8    ///     4        KLMNO
9    ///     5             
10    ///     6        PQRST
11    ///     7             
12    ///     8        UY
13    ///                          V W X
14    pub static ref ASCII_PROPERTIES: BTreeMap<char, Property> = {
15
16            ...
17
18            vec![
19
20            //////////////////////
21            // dot period .
22            //////////////////////
23            (
24                '.',
25                vec![
26                    (Medium, vec![line(m,w)]), // connects down
27                    (Weak, vec![line(m,k)]), // connects left
28                    (Weak, vec![line(m,o)]), // connects right
29                ],
30                Arc::new(
31                        move|top_left, top, top_right, left, right, bottom_left, bottom, bottom_right| {
32                        vec![
33                            // .
34                            // |
35                            (bottom.line_strongly_overlap(c,h), vec![line(r,w)]),
36                            //   .
37                            //  / \
38                            (bottom_left.line_strongly_overlap(e,i) && bottom_right.line_strongly_overlap(a,g), vec![line(m,u), line(m,y)]),
39                            //  .-
40                            //  |
41                            (right.line_overlap(k,l) && bottom.line_overlap(c,h), vec![arc(o,r,unit2), line(r,w)]),
42                            //   .-
43                            //  |
44                            (right.line_overlap(k,l) && bottom_left.line_overlap(c,h), vec![arc(m,cell.bottom_left().c(),unit4), line(m,o)]),
45                            // -.
46                            //  |
47                            (left.line_overlap(n,o) && bottom.line_overlap(c,h), vec![arc(r,k,unit2), line(r,w)]),
48                            // -.
49                            //   |
50                            //  exemption that bottom right is not a backquote
51                            (!bottom_right.is('`') && left.line_overlap(n,o) && bottom_right.line_overlap(c,h), vec![arc(cell.bottom_right().c(),m,unit4), line(k,m)]),
52                            //     .-
53                            //    /
54                            (right.line_overlap(k,l) && bottom_left.line_overlap(e,i), vec![arc(o, q, unit4), line(q, u)]),
55                            //     .-
56                            //      \
57                            (right.line_overlap(k,l) && bottom_right.line_overlap(a,g) , vec![arc(o, s, between1_2), line(s, y)]),
58                            //     -.
59                            //       \
60                            (left.line_overlap(n,o) && bottom_right.line_overlap(a,g), vec![arc(s, k, unit4), line(s, y)]),
61                            //     -.
62                            //     /
63                            (left.line_overlap(n,o) && bottom_left.line_overlap(e,i), vec![arc(q, k, between1_2), line(u, q)]),
64
65                            ...
66                        ]}
67                    )
68            ),

Endorse to higher level shapes

1
2    /// First phase of endorsing to shapes, in this case, rects and rounded_rects
3    ///
4    /// This function is calling on endorse methods that is applicable
5    /// to fragments that are touching, to be promoted to a shape.
6    /// These includes: rect, roundedrect,
7    fn endorse_rects(groups: Vec<Contacts>) -> (Vec<Fragment>, Vec<Contacts>) {
8        let mut fragments = vec![];
9        let mut un_endorsed_rect: Vec<Contacts> = vec![];
10        for group in groups {
11            if let Some(fragment) = is_rect(group) {
12                fragments.push(fragment);
13            } else {
14                un_endorsed_rect.push(group);
15            }
16        }
17        (fragments, un_endorsed_rect)
18    }
19
20    ...
21
22    /// group of fragments can be check if they form:
23    /// - rectangle
24    fn is_rect(fragments: &Vec<Fragment>) -> bool {
25        if fragments.len() == 4 {
26            let parallels = parallel_aabb_group(fragments);
27            if parallels.len() == 2 {
28                let (a1, a2) = parallels[0];
29                let (b1, b2) = parallels[1];
30                let line_a1 = fragments[a1].as_line();
31                let line_b1 = fragments[b1].as_line();
32                let line_a2 = fragments[a2].as_line();
33                let line_b2 = fragments[b2].as_line();
34                line_a1.is_touching_aabb_perpendicular(line_b1)
35                    && line_a2.is_touching_aabb_perpendicular(line_b2)
36            } else {
37                false
38            }
39        } else {
40            false
41        }
42    }
43
44    ...
45
46    /// [X](Done) TODO: search only the subset of contacts that matches the circle.
47    /// if it is a subset then the circle is matched and the non-matching ones are returned