d-bl/GroundForge

controls to arrange tiles

Closed this issue · 15 comments

Suggested by @veronika while writing the tutorials (18 juli 2020)

Having played with the "arrange" controls, I think they could be simplified and made a bit more clear as follows:

image

The solid tile versus outlined tiles in the original controls is a difficult mental construct to handle.

Great idea! The circles in the original first diagram is not a regular/familiar convention and it makes a familiar stitch arrangement seem a little foreign

The circles were intended to match the prototype diagram, but I understand it doesn't work.

With the danger of clutter, I'd like to add colored arrows. They visually explain the form fields. But I need a better color scheme that harmonizes (also with the rest of the pages) and provides enough contrast.

image image

The changing layout is the opportunity to change eventual confusing behavior of the controls. Technically there is no backward compatibility problem here: no existing links that would no longer work properly. But seasoned users might get confused.

This makes sense. A solid grey instead of the red perhaps (to keep the colour harmony)?

But I'd keep the arrow toggles (straight tiling, checkerboard, bricks and their buttons):

Manipulating the prototype tile with the arrow keys on these symbols is very intuitive.

When things get a little weird, it is nice to "reset" the values with the straight square tiling button.

Current status of the new design. The top center one is still under construction and everything is far from effective.

image

In a periodic 2D pattern, exactly two non-parallel translations are required. From a simplicity perspective, I think it is better to focus on the translations of a single tile (blue) required to produce two copies (one green and one purple). The arrows you have drawn above Jo represent a compound of two translations to get from blue to green. In the current representation, I also think there are too many blocks with colour for the user to process. I recommend we just colour the base block (blue) and a block for each basic translation (one green and one purple) with arrows from the blue to green and from the blue to purple.

In the brick cases, the arrows slide one row of bricks relative to the row above (or one column relative to the column to the left). I think this is better represented by arrows at the end of the row (column). The arrows around just the purple brick make it seem like the purple brick is sliding relative to the green bricks or blue brick.

Here is a modified visualization which I think is more clear:

arrange

Note: Mathematically, the shortest translation vectors are usually represented as the basis. The checkerboard currently uses a diagonal arrow which is longer than the horizontal and vertical arrows. Similarly, vectors [0,y] and [x,0] in the brick patterns do not give the grid alignment expected mathematically, there is a a longer diagonal relationship here too.

arrange2

When arranging the tiles, I would like to know, where the upper left corner shows up again in the repeats. To see if I do not have incidentically made an overlapping tile. I usually do this, by initiate all stitches with "ct", and the corner one with "ctct". Would be a nice feature if it had some color or symbol.

ps: I like the clear images in this discussion!

I agree Marian. I also play with the stitches in order to check the layout. Perhaps in the prototype, the stitch at the top left corner of the tile could be a square or a star instead of a circle.

Legitimate wishes but please keep the topics concise, see also #121.

@veronika

I like your last set of diagrams. Could you provide me an SVG at the proper scale and without of all the sodi-podi and inkscape clutter? I need it embedded in the html page. The colored arrows should be in the background of the blue tiles for an easier target.

Or even try a pull request, you can test this page locally and won't need the master branch in this case. To activate the controls you need lines like

xlink:href="javascript:asChecker()"
The location of the corresponding functions
function asChecker() {

Can you tell me where the original "arrange the repeats" svg file/info is in the GroundForge source code? I am trying to determine the proper scale and what is expected.

I think I found it: GroundForge/docs/tiles.html lines 246 to 790.

Use these dimensions as an indication.

Note the color conventions proposed by @Cowboynoon

https://github.com/d-bl/GroundForge#colors

These conventions are not yet followed by the prototype/thread/pair-diagrams. They were defined at too may places for the quick win.

There are more conventions to be fixed under the umbrella of #164

created pull request #168

a note on my suggested yellow - it is more of a khaki - I specifically chose a shade that would not disappear on white, is not incongruous with the international lace diagram code, and to compliment the purple. (Purple-yellow, Green-red) I too had a concern about the blue square, but I think the "darker yellow" might work?

Fixed with #168