Experimental under-development code to streamline Jigidi solving.

readme.md

Jigidi Helper (Experimental)

Replaces the image of a jigsaw puzzle with a predictable, (theoretically) easier-to-solve design.

How to use

1. Begin a Jigidi puzzle.
2. Run the code in your browser debug console.
3. Restart the puzzle by pressing the Restart button in the Jigidi sidebar.
4. The puzzle will be replaced with a predictable patterned one.

How does this help?

The predictable pattern has a number of features that make it easier to solve that most other jigsaws:

• Each piece has two numbers printed on it: the first is the row in which it belongs, the second is the column, making it possible to identify the exact location that a given piece belongs in.
• Each column is a different colour, streamlining presorting.
• Rows within a column alternate between lighter and darker variants ("striping").
• Stripes of alternating thickness and a cycle of colours form long horizonal and vertical bands across the image, streamlining identification.
• No information is sent back to the server to indicate that the puzzle has been tampered with.

jigidi-helper.js

window.jColors = ['red', 'blue', 'brown', 'orange', 'yellow', 'pink', 'lightblue', 'lightgreen', 'lightgray'];
window.lColors = ['white', 'black', 'purple', 'darkgray', '#009'];
window.lWidths = [5, 10, 20];
window.jCols = parseInt(document.getElementById('info-creator').innerText.match(/(\d+)×/)[1]);
window.jC = 0;
CanvasRenderingContext2D.prototype.putImageData = function(imageData, dx, dy){
    const col = window.jC % window.jCols;
    const row = Math.floor(window.jC / window.jCols);
    this.fillStyle = window.jColors[col % window.jColors.length];
    this.fillRect(-1000,-1000,2000,2000);
    if(0 == (row % 2)){ this.fillStyle = '#ffffff33'; this.fillRect(-1000,-1000,2000,2000); }
    this.fillStyle = window.lColors[row % window.lColors.length];
    this.fillRect(-1000, -35, 2000, window.lWidths[row % window.lWidths.length]);
    this.fillStyle = window.lColors[col % window.lColors.length];
    this.fillRect(-35, -1000, window.lWidths[col % window.lWidths.length], 2000);
    this.font = 'bold 14px sans-serif';
    this.fillStyle = 'black';
    this.fillText(`${row+1},${col+1}`, -5, 0);
    window.jC++;
}

Hi Dan

Congratulation for this code.

Now, do you think that should be possible to build automatically the puzzle ?

Thanks in advance

Didier

Starting from here? No. But others have done pretty-well at cracking that problem already, though they've not published it publicly on the open Internet. My aim is to find solutions that simplify the solving of jigsaws, because these approaches seem to survive longer than entirely-automated solutions which quickly get detected and blocked.

(In fact, it's probably that openly-published solutions get blocked that makes people not publish their fully-automated solutions in places where they can be easily found! The approach above isn't even the one I use - I use one which "stripes" one column at a time, turning the rest of the jigsaw white, which is even faster to visually process than striping the entire jigsaw, for example!)

Hi Dan

Could you provide me your software please ?

Thanks in advance

Kind regards

Didier

Hello all,

I have added a fork to this repo so that this code can be added as a chrome bookmark and run much more easily.
The fork can be found here: https://gist.github.com/Gabrielhj17/3b442bfed270e6762b819b1478f574ee

I hope this helps,

Gabriel

In case the row and col numbers are not showing anymore, I adjusted it like this:

    this.fillText(`${row+1},${col+1}  --  `.repeat(10), 0, 25);
    this.fillText(`${row+1},${col+1}  --  `.repeat(10), 0, 75);

Some adjustments I found useful:

• generated more contrasting colors using this tool: https://mokole.com/palette.html
• found the light colors hard to distinguish

window.jColors = ['red', 'seagreen', 'gold', 'mediumvioletred', 'lime', 'blue', 'dodgerblue'];
window.lColors = ['white', 'black', 'purple', 'darkgray', '#009'];
window.lWidths = [3, 8, 13];
window.jCols = parseInt(document.getElementById('info-creator').innerText.match(/(\d+)×/)[1]);
window.jC = 0;
CanvasRenderingContext2D.prototype.putImageData = function (imageData, dx, dy) {
    const col = window.jC % window.jCols;
    const row = Math.floor(window.jC / window.jCols);
    this.fillStyle = window.jColors[col % window.jColors.length];
    this.fillRect(-1000, -1000, 2000, 2000);
    if (0 == (row % 2)) { this.fillStyle = '#ffffff33'; this.fillRect(-1000, -1000, 2000, 2000); }	
    this.fillStyle = window.lColors[row % window.lColors.length];
    // adjust position of vertical line - won't be aligned but still help differentiate columns with the same color
    this.fillRect(-1000, 35, 2000, window.lWidths[row % window.lWidths.length]);
    this.fillStyle = window.lColors[col % window.lColors.length];
    this.fillRect(35, -1000, window.lWidths[col % window.lWidths.length], 2000);
    // little smaller font so that the numbers are less likely to be cut of on the edge of the tile
    this.font = 'bold 11px sans-serif';

    // print the col first since i sort the cols first by color and it makes it more readable
    // print it a few times since not sure where the center of the tile is 
    // print it in black and white for better contrast with darker and lighter colors (and simplicity ;) )
    this.fillStyle = 'black';
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 25);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 50);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 75);

    this.fillStyle = 'white';
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 38);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 63);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 88);

    window.jC++;	
}

Is it possible to make it a Tampermonkey script please?

@letsjigidi this alternative tool I also made already is a userscript, if that helps. @tintin49 it's the one you're asking for, too, if that matters!

That helps indeed but not tested for geocaching. Does a popup showup at the end with final coordinates? Dan Q schreef op 2023-06-01 08:42:

@Dan-Q commented on this gist. ------------------------- @letsjigidi [1] _this_ alternative tool I also made [2] already is a userscript, if that helps. -- Reply to this email directly, view it on GitHub [3] or unsubscribe [4]. You are receiving this email because you were mentioned. Triage notifications on the go with GitHub Mobile for iOS [5] or Android [6].

Links: ------ [1] https://github.com/letsjigidi [2] https://gist.github.com/Dan-Q/b5e4dbb45851b07042b6a57ebe1005a7 [3] https://gist.github.com/Dan-Q/e9bfe5c2ca4b13fae4994c5e84685761#gistcomment-4586074 [4] https://github.com/notifications/unsubscribe-auth/BAHKIB5MUURHGXRN4VBY4GTXJA2W5BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMBUGE2DIMRYU52HE2LHM5SXFJTDOJSWC5DF [5] https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 [6] https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub

@letsjigidi I'm the original author of the blog posts about this tool. I have no interest in Jigidi except where I have to solve them in order to find geocache coordinates. You won't hear any solution from me that doesn't produce the popup at the end!

Dan Q's 20 lines of code stopped working for me a few days ago, so something changed. I just tried rambii's code posted 4 days ago and it works! Nice. I would love it if the numbers could be made larger so I can read them, but I suspect that's not possible or it would have been done already.

@rteitelman
You can make the numbers larger. Change this line:
this.font = 'bold 11px sans-serif'; to this.font = 'bold 18px sans-serif'; or something that works for you.

But I found larger numbers are more likely to be cut off and be unreadable. That's why I chose a smaller font size.

Hi Guys,
First off Happy New Year - when trying Rambii code I keep getting an error on my console on Google Chrome that says?
VM1242:1 Uncaught ReferenceError: mokole is not defined
at :1:62

Any ideas?

@NeilandJen
Seems like the hyperlink in the comment I included in the code snippet got interpreted in a wrong way.
I updated the snippet without the comments (the lines starting with // ). You can copy it again and it should work.

Hi @Dan-Q, I have already partially completed the puzzle. Is there a way to have the script start from there instead of starting from scratch?

Some adjustments I found useful:

* generated more contrasting colors using this tool: https://mokole.com/palette.html

* found  the light colors hard to distinguish

window.jColors = ['red', 'seagreen', 'gold', 'mediumvioletred', 'lime', 'blue', 'dodgerblue'];
window.lColors = ['white', 'black', 'purple', 'darkgray', '#009'];
window.lWidths = [3, 8, 13];
window.jCols = parseInt(document.getElementById('info-creator').innerText.match(/(\d+)×/)[1]);
window.jC = 0;
CanvasRenderingContext2D.prototype.putImageData = function (imageData, dx, dy) {
    const col = window.jC % window.jCols;
    const row = Math.floor(window.jC / window.jCols);
    this.fillStyle = window.jColors[col % window.jColors.length];
    this.fillRect(-1000, -1000, 2000, 2000);
    if (0 == (row % 2)) { this.fillStyle = '#ffffff33'; this.fillRect(-1000, -1000, 2000, 2000); }	
    this.fillStyle = window.lColors[row % window.lColors.length];
    // adjust position of vertical line - won't be aligned but still help differentiate columns with the same color
    this.fillRect(-1000, 35, 2000, window.lWidths[row % window.lWidths.length]);
    this.fillStyle = window.lColors[col % window.lColors.length];
    this.fillRect(35, -1000, window.lWidths[col % window.lWidths.length], 2000);
    // little smaller font so that the numbers are less likely to be cut of on the edge of the tile
    this.font = 'bold 11px sans-serif';

    // print the col first since i sort the cols first by color and it makes it more readable
    // print it a few times since not sure where the center of the tile is 
    // print it in black and white for better contrast with darker and lighter colors (and simplicity ;) )
    this.fillStyle = 'black';
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 25);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 50);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 75);

    this.fillStyle = 'white';
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 38);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 63);
    this.fillText(`${col + 1},${row + 1}  --  `.repeat(10), 0, 88);

    window.jC++;	
}

Hi Rambii
I love this Code.
small Question - would it also be possible to staple (group) the different columns together automatically ?
This would make thing much easier.

Regards

Hi all,

There’s an excellent Facebook group where people share answers to solved Jigidi puzzles. It may be worth a look there before trying to solve it yourself.

https://www.facebook.com/share/g/V46nhEo91YcEc3Qw/?mibextid=K35XfP

thanks @Gabrielhj17
I am also member of this Group ;)

Doesn't work for jigsaw puzzles like https://www.jigidi.com/s/*