Shape displayed incorrectly

[ToonTalk]

Loading to startup crt 1 [set shape "building institution" ; imported from the Shape Editor Library set color white set size 4] end produces the following in the JVM:

while the web version looks like this:

[TheBizzle]

I see nothing wrong here!

Just kidding....

Here's a simple example model that makes it a bit clearer what it is that Tortoise is actually doing.

Here it is in JVM NetLogo:

Here it is in Tortoise:

(Note that patches are colored randomly; just focus on the turtle shape.)

This is what's coming out of the shape serializer:

"building institution": {
  "rotate":   false,
  "elements": [
    {"xmin":0,"ymin":60,"xmax":300,"ymax":270,"type":"rectangle","color":"rgba(141, 141, 141, 1.0)","filled":true,"marked":true},
    {"xmin":130,"ymin":196,"xmax":168,"ymax":256,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":true,"marked":false},
    {"xmin":0,"ymin":255,"xmax":300,"ymax":270,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xcors":[0,150,300],"ycors":[60,15,60],"type":"polygon","color":"rgba(141, 141, 141, 1.0)","filled":true,"marked":true},
    {"xcors":[0,150,300],"ycors":[60,15,60],"type":"polygon","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"x":135,"y":26,"diam":30,"type":"circle","color":"rgba(255, 255, 255, 1.0)","filled":true,"marked":false},
    {"x":135,"y":25,"diam":30,"type":"circle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":0,"ymin":60,"xmax":300,"ymax":75,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":218,"ymin":75,"xmax":255,"ymax":90,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":218,"ymin":240,"xmax":255,"ymax":255,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":224,"ymin":90,"xmax":249,"ymax":240,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":45,"ymin":75,"xmax":82,"ymax":90,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":45,"ymin":240,"xmax":82,"ymax":255,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":51,"ymin":90,"xmax":76,"ymax":240,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":90,"ymin":240,"xmax":127,"ymax":255,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":90,"ymin":75,"xmax":127,"ymax":90,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":96,"ymin":90,"xmax":121,"ymax":240,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":179,"ymin":90,"xmax":204,"ymax":240,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":173,"ymin":75,"xmax":210,"ymax":90,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":173,"ymin":240,"xmax":210,"ymax":255,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":269,"ymin":90,"xmax":294,"ymax":240,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":263,"ymin":75,"xmax":300,"ymax":90,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":263,"ymin":240,"xmax":300,"ymax":255,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":0,"ymin":240,"xmax":37,"ymax":255,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":6,"ymin":90,"xmax":31,"ymax":240,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"xmin":0,"ymin":75,"xmax":37,"ymax":90,"type":"rectangle","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"x1":112,"y1":260,"x2":184,"y2":260,"type":"line","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false},
    {"x1":105,"y1":265,"x2":196,"y2":265,"type":"line","color":"rgba(0, 0, 0, 1.0)","filled":false,"marked":false}]
}

This seems correct to me. My guess as to what's going wrong is that Beak (over in Galapagos) is drawing the black rectangles as filled, even when they're not supposed to be.

Assigning to @mrerrormessage for further investigation.

[TheBizzle]

Pinging @mrerrormessage

[mrerrormessage]

I was hoping to wrap up Galapagos 237 first, and then circle back on this one. I've spent a few minutes investigating and have some ideas for when I start on this one. Let me know if this is higher priority than Galapagos#237, and I'll switch over right away.

[mrerrormessage]

Given my unfamiliarity with the Galapagos rendering code, I'm not sure yet what the appropriate fix is, but I do know the cause of the problem is a lineWidth value that has been set way higher than needed. By changing this line to ctx.lineWidth = 3 (the current value divided by 10, arbitrarily chosen), I got the following: Before checking in that change, I want to understand a bit more about why the lineWidth was set as it was, since I'm assuming there was a good reason behind it, and I would prefer not to use arbitrary numbers just because they make some shapes "look right". Line width was last changed in this fix by @qiemem , perhaps he could offer some insight into this issue and why the value was reset from 15 to 30?

[qiemem]

That original commit was due to the opposite problem. The lines in some shapes were so thin that they could barely be seen (they looked like a dashed set of pixels). I believe 15 -> 30 was determined empirically.

I think that the .1 in this line should actually be the same as onePixel in view.coffee. That's mostly a guess though.

Even if that guess is right, it will only push back the problem. Line width in desktop NetLogo is independent of turtle size. At size = 1, that building shape looks like:

NetLogo Web looks pretty much identical at that size (so much so that I think this is probably the comparison I optimized against):

Compare this with desktop NetLogo at size = 30:

The width of lines is the same even though the rest of the image has scaled.

In NetLogo Web, each shape/color combination is cached on a 300x300 canvas that is simply scaled and stamped when displayed on the view. Thus, line widths scale with the rest of the image. So even if we fix this problem by lowering the line width, at some scales, lines that should be visible won't be.

The real solution is to cache different image sizes. I didn't do this originally because of memory fears and I wasn't certain it would be necessary. We'd actually see a memory savings for models that don't change sizes of turtles, since the average size of the cached images will be smaller (300x300 is really big). But we would likely have to build a real LRU or LFU cache. Perhaps we'd want to cache regular intervals of image sizes (e.g. size = 1 and size = 1.2 would use the same cached image). Any solution should also take into account screen DPI (the view's quality attribute already does this for the view canvas itself, but the cached images would also need to) .

[TheBizzle]

This issue was moved to NetLogo/Galapagos#258