Solved

Transform the photo into pieces - JavaScript

Posted on 2010-09-09
28
672 Views
Last Modified: 2012-05-10
Hi E's, I want begin a script for made a picture puzzle. The first step was divide pictures to litle pieces.
In practice if I have a picture with resolution 800*600, and if I want divide that pictures to 12 pieces, I get 12 pieces with this resolution: 200*200, like you can see in attach image, width with 4 pieces and length 3 pieces.

JavaScript do this? and how?

Regards, JC
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>pieces for a puzzle</title>

</head>



<body>

<img src="formadepieces.jpg" width="800" height="600" />

</body>

</html>

Open in new window

pieces.png
0
Comment
Question by:Pedro Chagas
  • 13
  • 8
  • 5
  • +1
28 Comments
 
LVL 10

Expert Comment

by:bugada
Comment Utility
Check this jquery plugin

http://www.2meter3.de/jqPuzzle/
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
Using css sprites, you can specify from which x and y position (coordinates on horizontal and vertical axis) and upto what extent (width and height) you want the image portion to be displayed.
Using this feature, you can have 16 divs with their background-image having the slices of different portion of the complete image

check for an example
http://www.w3schools.com/css/css_image_sprites.asp
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
@bugada: awesome plugin :)
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
Hi @bugada, My goal not was get that kind of puzzle (slide puzzles), that a lot of examples in the net about slide puzzles. The puzzle I want to do is a drop-down puzzle.
For I do a drop-down puzzle I will need to get the pieces first.
You know if javascript do this? Do you know any tutorial for drop-down puzzle?

***I call drop-down puzzle, the puzzles that we grasp the piece, and puts them to me in the right place.

Regards, JC
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
Hi @gurvinder372, do you thing I can use your example for made a image drop-down puzzle based in javascript?

Regards, JC
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
<<image drop-down puzzle>>
Can you please elaborate this with example?

Thanks
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
Hi, like I tell to @bugada, drop-down puzzle was:
"***I call drop-down puzzle, the puzzles that we grasp the piece, and puts them to me in the right place."

Regards, JC
0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 100 total points
Comment Utility
Yes, you can.

1) Your drop-down values should indicate the x,y,width,height using which the image portion could be displayed to the user, when he selects an option
2) He should be able to drag and drop that image on the place holder (or the place where you want the image piece to be dropped). It is up to you that you want the user action to be click based or drag-drop based.

0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
Hi, the right is drag-drop puzzle, not a drop-down!
That is not easy for me, my knowledge in Javascript was very poor, I prefer languages like php.
It is possible you give me a example?

Regards, JC
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
I do not have the code written with me right now. It will take me a lot of time/effort to do the same.
Will appreciate if you can make an effort and let me know the specific problems that you face in it.
Thanks
0
 
LVL 10

Expert Comment

by:bugada
Comment Utility
ah ok! So you want a puzzle, made by square tiles?
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
Hi @bugada, yes it is drag and drop, square tiles puzzle, based in javascript.
You can help me?

Regards, JC
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
0
 
LVL 10

Expert Comment

by:bugada
Comment Utility
gurvinder372 i think that the author needs a mosaic puzzle: avery pieces are stored scrambled in an anrad of the page and the user must recompose the image dragging and dropping tiles on the grid.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
Hi @gurvinder372, I have see that example before I write this question. The problem is, that was a sliding puzzle, and what I want is a drag drop puzzle (square tiles).

Regards, JC
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
Hi @bugada, your last post it was what I want.

Regards, JC
0
 
LVL 10

Accepted Solution

by:
bugada earned 250 total points
Comment Utility
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
For @gurvinder372. That example you give me is a good idea, but in practice (try play the puzzle you too) I don't like because is very bumbling. But it is a good tutorial to start.

@bugada, I try your example and looks fine. The only problem is the pictures have to be in pieces before I open the script. In other words, the script don't make the pictures in peaces every time we open the page, the pictures in that script have be predefined. So we back to essence of the question, transform the photo into pieces!
For you understand, I have about 5000 pictures and I want to do puzzle game for all that pictures. The last example you give me made one part, but I need the part that make the picture in pieces.
Can you give a example for made the picture in pieces?

Regards, JC
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
<<I don't like because is very bumbling>>
Please explain this to me. I am just trying to understand the requirement, so that i do not post such bumblings :)

0
 
LVL 10

Expert Comment

by:bugada
Comment Utility
you have to combine my first example with the last one. Not an easy nor immediate job.
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
@gurvinder372, my English not was the best, I try to do write the best I can.
When I say 'bumbling', is to tell that your example, not is good for me, not was what I expected, has many faults, especially at the level of drag and drop. As he drag and drop, the other pieces are moving. I want do something with more quality. Sorry about my English.

@bugada, when you say <<Not an easy nor immediate job.>>, maybe you think I want the same pieces of your last example, for me the best pieces is squares or rectangles, I don't need the round effects.

For both:
What I want is simple, I can do that easily with php or imagemagick, but I want see JavaScript made entire work.
Step by step I will say what is the goal.
1) the script identify the picture (tell the resolution), for the example we will use a 800*600 picture.
2) My puzzles have 4*3 tiles, so JavaScript have to do: size of width / 4, and size of length / 3.
3) JavaScript transform picture in pieces (squares or rectangles) and give a name for each one, like 1.jpg, 2 etc.

What do you tell me?

Regards, JC
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
Hi, this is a good example for illustrate what I my goal:
http://www.billybear4kids.com/dinosaurs/online-puzzles/drag-drop/e-dino5.html

Regards, JC
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 150 total points
Comment Utility
I created a sample that breaks an image into 12 pieces and allows you to drag and drop the pieces onto a grid like a puzzle to form an image. It uses only html, css and javascript. You can test and download/copy/paste the script files, images and html here: http://www.bsatroop251.com/TestSite/Puzzle.htm

The code I used for the drag and drop functionality I got from here: http://www.dynamicdrive.com/dynamicindex11/domdrag/
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
Hi, I like your example @tommyBoy.
I have a good puzzle now, you can check in http://w.e-e.com/n741Sp, is similiar of your example.
I thing if I work your example I can made a better puzzle then my actual.
Your example have the advance that the pieces don't block when you put the piece in the right place, my example do that.
My example is good because when finish the puzzle the advise the customer.
Do you thing experts can assist me with make better in your puzzle?
Do you thing you can help me?

Regards, JC
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
I tried your puzzle, very nice. I did not get any change when I completed your puzzle, so I don't understand this statement: "when finish the puzzle the advise the customer"

I think your puzzle code is unnecessarily complicated. I have 64 lines on the main page of my puzzle example plus 2 external javascript files. You have 420 lines just on the main page plus 8 external jquery files. Even with all that, your pieces don't lock into place when the user moves them close to the correct position. Instead they have to position them exact. Also, I think having a grid to place the pieces on is helpful to the user. Adding an alert when the puzzle is completed correctly would be easy.

If you want to improve on my example, I would be happy to help. I don't want to work on code that depends on jquery. I see too many posts on this forum from people who are having problems getting their one jquery plug-in to work the way they want. Your puzzle has 8 external jquery files. It would take too much of my time to sort all that out.
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
...So, maybe you can help me in this question!

Regards, JC
0
 
LVL 3

Author Comment

by:Pedro Chagas
Comment Utility
I'm sorry, the link is:
http://w.e-e.com/RAKzo0
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now