what's easy to do with your toolkit and how it influences your ui

I woke up this morning thinking about Apartmenter. It seemed natural to make it a canvas app, mostly because I was thinking of the funky-shaped walls (like that bay window) of the apartment as a bunch of arbitrary lines, and arbitrary lines are easy to draw in p5.js and more difficult in, say, html5/CSS.

But you know, I think a html5 "draggable lines" (skinny rectangles with a border, most likely) might have produced a better UI, especially for wall layout. My 4am implementation was pretty simplistic, I treated each room as a grid (top left corner 0,0) and each walls as a series of 2 x,y coordinates
rooms : {
  bottomroom:{
    offset: [120,492],
 walls:[
   [0,0,0,176],
    [0,0,115.5,0],
         [115.5,0,115.5,92],
    [115.5,92,150,92],
    [150,92,150,176],
    [150,176,0,176],

    //top door
    [20,0,40,10],

            //closet
    [150,176,176,176],
    [176,176,176,134],
    [176,134,150,134],
    //closet door
    [150,134,140,144],
    [140,144,148,152]
 ]
},
[...]
}

(FWIW, I didn't group each wall as a pair of coordinates [[x1,y1],[x2,y2]] or better yet as a map {"start":{"x":x1,"y":y1},"end":{"x":x2,"y":y2}} because of some minor typing convenience at the time. )

The thing is, when it came time to update the rooms with more refined measurements (we didn't do a great job with some of the the door placement, for example) this was a pain in the butt, I had to mentally put every wall back on that grid and figure out its endpoints from 0,0. 

If I had treated each wall as a draggable line of a fixed length, as I could have here, and surely WOULD have if I used an html5/css/div approach, life would have been easier, because it maps better to the physical nature of measuring a room with a tape measure.  The only challenge would be the bay window, since I don't easily know the angle to put the window at, but that's pretty easy to figure out with a little math, or trial and error if it came to it.

Counterpoint: the corner-based system I used was a bit nice in how the last x,y corresponded to the first x,y of the next wall, a feature a center-and-length system wouldn't have. Still, I think I could have made things "close enough".

The final version of my program got more sophisticated in drawing, for example, the backs and sides of couches, so they had a clearer orientation and looked different than a table of the same size. I wonder if I had tried a div-based approach if I would have tried to get fancy with CSS :before and :after stuff for such details, or maybe just glommed on some child divs.

Of course I would have had to have gone to stackoverflow for suggestions on movable/draggable divs... JqueryUI offered a fairly clean API for it, and there was this one non-jQuery approach that at first glance looks a little hacky but I haven't studied it deeply. 

Ah well. I don't have any plans to advance this beyond the functional-but-useful-for-me prototype stage, especially now that the layout for our place has been decided with the app's help. If I decided to use it again, I guess I could add a "corner and length" based approach to the canvas code without redoing it all as draggable divs...