Is there a parameter that controls piece "snap" distance?

[JeffroDB]

I've noticed that some of the demonstration puzzles enjoy a fairly large "snap" distance. What I mean is if I move a piece to within say 1/16th of an inch of another piece that fits the piece I moved "snaps" into place upon mouseup.

Mine, on that other hand, suffer from almost no "snap" and remain frustratingly hard to put together especially on a mobile phone device involving the use of fingertips as large or larger than the piece diameter.

Is there a parameter available which dictates the distance that would trigger "snap"?

[flbulgarelli]

👋 Hi @JeffroDB!

Have you tried to tune the proximity param?

new headbreaker.Canvas('...', {
  width: 500,
  height: 300,
  proximity: 20 // <---
 });

Larger values make more distante pieces to the get connected. The exact value you will need largely depends on your pieces size.

Hope that helps!

[JeffroDB]

I have played around with proximity thinking it might be the answer but it seems to only affect the distance between pieces when I perform a shuffleGrid before my initial canvas draw. When I increase proximity it causes my shuffleGrid pieces to go off-canvas.

Here's what I have trying to fine tune the pieces to fit within my canvas bounds upon initial presentation to the user:

const initialWidth = 1000;
const initialHeight = 1600;

var audio = new Audio('/s/connect.wav');

let photograph = new Image();

// Star Fish Mermaid
photograph.src = 'https://images.squarespace-cdn.com/content/64ec5d436ff7c74535863c4d/129f85bc-746a-4677-9709-4f5a4a3d495b/Starfish+Mermaid+Jigsaw.jpg';

photograph.onload = () => {
  const canvas = new headbreaker.Canvas('jdbowman-canvas', {
    width: 1000,
    height: 1600,

    pieceSize: {x: 168, y: 158},
    borderFill: {x: 16.8, y: 15.8},

    proximity: 4,    //how far apart when shuffled
    strokeWidth: 6.0, // 1.5 was the original
    lineSoftness: 0.0,
    image: photograph,
    fixed: true
  });

  canvas.adjustImagesToPuzzleHeight();
  canvas.adjustImagesToPuzzleWidth();
  canvas.autogenerate(
    {
      horizontalPiecesCount: 5,
      verticalPiecesCount: 4
    }
  );

// Look for solved puzzle and reveal coupon code
  canvas.attachSolvedValidator();
  canvas.onValid(() => {
    document.getElementsByClassName('sqsrte-text-color--custom')[0].style.visibility = 'visible';
  })

// resize before draw
  var sizecontainer = document.getElementById('jdbowman-canvas');
   canvas.resize(sizecontainer.offsetWidth, initialHeight*(sizecontainer.offsetWidth / initialWidth));
   canvas.scale(sizecontainer.offsetWidth / initialWidth);

canvas.shuffleGrid(1.1);
canvas.draw();

Increasing proximity has the effect of pushing my pieces off-canvas and out of sight of the user when first presented to them.

You can see how I'm attempting to incorporate your work into my website here:

https://jdbowman.com/star-fish-mermaid-jigsaw-1

If you visit the page using your phone you'll see how hard it is to get the pieces to "snap" into place.

Is there a way to keep my initial proximity set to 4 so all of my pieces remain on canvas but then change proximity to a much larger value once my puzzle has been presented to the user to solve? Have a proximity for drawing and a separate proximity-like value for controlling the "snap" during puzzle solve?

[flbulgarelli]

Hi! 👋

The function of proximity is to control the minimum distance between two pieces inserts that make them get connected, so increasing the proximity is definitely the way to go. E.g. your snippet here shows a proximity of ~2% of the piece size, while in the examples provided it is usually between 10 and 20%.

That said, yes, it is true that proximity also controls shuffle. It is intentional, because otherwise puzzle would get connected just after shuffling, or even after a minimal movement. So you might try to change proximity manually after shuffling the canvas, but it won't probably work as expected. Also, canvas are not designed to mutate proximity after intialization, but I haven't tried, actually. You might try and tell the results.

I'd recommend three different - complementary - approaches here:

• reduce the farness argument below 1 - e.g. 0.2. Shuffling is made in two steps, the latter controller by farness which adds extra gap to make the shuffling make a little more noisy.
• reduce the number of (horizontal) pieces, so they better fit your users' screens after a grid shuffling.
• Copy the original implementation of shuffleWith method and override it in your own Canvas, so that the initial shuffling is, say, 2.1 instead of 3 times the proximity. If that works, that variable could be parameterized in future versions of headbreaker. Feel free to submit a PR 😀

[JeffroDB]

Thank you for the detailed reply.

I'm not a programmer but a photographer. I have just enough technical knowledge to have looked at your javascript source and know I'm now floating in deep water that will go WAY over my head. :-)

I have some programmer friends that may be able to show me a way forward with this. Thanks again.