No Repeats

Done. I now have a script that will generate a random
list of puzzle ids, with no repeats!!

     
                                           *     *     *
What implementing this is going to involve is creating new id, img number
associations. See below:

Current Puzz

Puzzle no longer needs JQuery, but running on its own code. Still
working on cutting pieces, and getting when the puzz has been solved...

      
                                       *     *     *

I have a task for today: get the computer to assemble the puzzle. I know how to get
pieces of any shape easily enough. A clipping mask will do the job.Below, polygons
on the cat puzzle, exported as individual pieces, and re-imported on a higher layer.

So I can use html to put the original image on the bottom of a stack of images.
If I id those images properly, I can do a Javascript function which will re-order them and display
on top of the original, (within a transition time!?)...

                                      
                                          *     *     *

                                          *     *     *

working on getting my pule pieces to load in disarray. I have code
that randomizes, but still have to get the duplicates out...

Getting ID

Today's problem:I would like to return the id of picture element
that the user clicks on, and have that become the 'ball' for the easy
drag functions. In effect, the puzzle piece the user is working with.

To date, I know the type of the object. I can also query for the Id.
It's going to be a wiring problem...

https://plnkr.co/edit/krW9OGf7Z6l7eN5EHSzn?p=preview

Here is the problem: 'this' becomes undefined if we move things to a helper
function. It has to do with how the computer allocates space for variables: first on
load, then in the runtime.

We are going to have to pass the pertinent information to the helper function
as a parameter.

Our information goes into the (as per documentation) idStr variable.

Which works fine for the main program.

Problem is, the variable in the function is local to it and means nothing outside. There
is only one solution: stay within the function. Yep, the ball moves!!

Test of fire: what happens if we add a second ball...Works fine; we just have
to double-click on the ball we want to move.

https://plnkr.co/edit/krW9OGf7Z6l7eN5EHSzn
https://developer.mozilla.org/en-US/docs/Web/API/Element/id
https://javascript.info/function-basics

                                     *     *     *

Changed from 'ondbleclick' for 'onmouseenter'. Now things run very smoothly.

https://plnkr.co/edit/9fXFNGSIHnV9tjh3aLLn?p=info

No S C

There are no shortcuts .My new puzle is on JQuery and the pieces
drag, but the div underneath does as well. I need to do the work
on both layout and JS!!

Mouse Track

I've put together code from W3 Schools and from Javascript.Info to see how
mouse tracking and free drag on elements works: kinda fun. I might be able
to run a simple puzzle without recourse to JQuery as a result...

https://plnkr.co/edit/LU1jCxgKiYndRc27DEu6?p=info

                                    *     *     *

The solution:

The function needs to run from the body tag, and use pageX, pageY.
That's it.

Puzzle Progress

Half the battle is being clear in one's mind as to what one
wants to do.

Finally settled on JQuery draggable code,that allows the pieces to
move freely on the window. Need to work on those pieces through...

Much neater is the Math is fun approach. All the pieces are precisely the
same width. A beast to code, at this stage.

                                                  *     *     *

The finished Puzz:

Code Awesome

Found an awesome piece of code for array functions on the Mozilla site which
solved a problem for me. Wanted to distribute mypuzzle pieces on canvas
elements. The code:

Those piece designs should keep me busy for a while...😣

                                              *     *     *
Was indeed busy on this. Found a wonderful new photo app that enabled me to
create image pieces more easily. It has a magic wand function,  so I took  a puzzle
piece template from Google, adjusted for size on Expression Bend, and applied as
a transparent layer in PhotoFiltre 7. I then take the image to Paint 3D, which gives
me the pieces thanks to the Magic Selection feature.

Still need to work out how the pieces will fit together. Same size pieces don't create
the picture. Different-sized pieces won't behave in either canvas or on a div...tomorrow!

http://www.photofiltre-studio.com/pf7.htm

JigsawP

I'm a creature of boundless ambition: I've decided to try my
hand at making a true jigsaw puzzle with JavaScript.

These types of puzzle date back form 1760, and were cut on wood
with - you guessed it - a jigsaw. Thus the characteristic interlocking
semi-circles and holes. Why not?

Been seeing what the code might look like from the Math is Fun
puzzle page. Seems to involve the use of canvas and the z-index.
(The pieces can stack up indefinitely, although their actual dimensions
are a quarter area of the puzzle each!?).

My candidate image below, a pouch bag currently on The Bay's website.

And for the impatient, a link to Jigidi which will cut any image into a puzzle.

 https://www.jigidi.com/

                                          *     *     *

Looked at the MIF JavaScript. Daunting. But I did recognize the push function.
Push() adds elements to start of an array; unshift() adds them at the beginning.
Think I"ll be working on a much simplified puzzle...

                                           *     *     *

Wormies

Been reading about wormholes: yes, there should be a black hole
at one end, where matter is fatally attracted, but there should also be
a white hole at the other, where nothing enters. In terms of space-time,
the black hole is the accelerating pull of the future, but the white the push
of the past, which one cannot revisit.

It should be noted that Einstein's view of space-time is postulated on the
assumption of an inertial frame of reference; that is, one without acceleration.
It should then not come as a surprise that space and time need to be related
one to the other within that view...

Rêve

Hard to believe May 68 was 50 years ago. A large number of
posters were made by the Fine Arts students on strike: each poster had
to be suggested by someone on strike, and the theme approved by the group.
The colors were sparse and the effects simplified. Currently on view in Paris.

My wallpaper, below.

Divs

I think I know what to do about my home version of Tower of Hanoi; the rings are
maddeningly off-center on the initial post. I need side-by-side divs, each
with a (non-draggable) post image within...

Got to see the problem:

The take-away: the computer is more accurate.