Well, I'm done with my presentation and defense and am currently wrapping things up with my website. I was happy with where my application was at and I think the presentation went pretty well. This project has been a challenge at times, but 100% worth it. It's been really interesting being able to program this on my own, completely from scratch. It has definitely helped me grow as a developer. Last thing to do is finish my binder and website, and then I'm officially done. Can't believe how quickly this time came.
My last week has consisted of a long to-do list of minor changes. I had a couple bugs with animating my solution, changing the image, and rotating pieces which I figured out. There's also been a lot of messing with the UI, which was much needed. I added icons across the bottom of the puzzle that fit in one row and a popup form which makes the puzzle look much neater. The puzzle now has the option for a light or dark theme. Along with that, I have been preparing my actual presentation and deciding the best way to demo it in preparation for Wednesday. I'll continue to test the application this week to make sure my demo goes well on Wednesday.
It's getting to the point where I would like to perfect what I currently have implemented and not try to implement new things. The last feature I'm still working on is rotating puzzle pieces. Currently, any pieces can be rotated with a right click, but I'm having issues checking if pieces should connect when they're not in their correct orientation, and rotating multiple pieces at once (when pieces are connected). Other than that, I have added a drawing priority for each piece so as pieces are clicked, they're drawn last so they show up on top each time. I was also able to implement some easier features like resetting a puzzle, making it full screen, and adding a timer. My focus for this last full week will be bettering my UI, testing, documenting, and prepping my presentation.
After walkthroughs last week, I realized how bad canvas rendering time was for puzzles with many pieces, especially when using only a laptop. I really wanted to focus on improving this so it would be easier to complete a bigger puzzle no matter what laptop you're using to do it. This week, I came up with the idea of layering canvases to accomplish this. My thought was for a front canvas to draw pieces that are being dragged across the screen while the background canvas is able to draw the rest of the puzzle once, as the rest of the pieces won't be changing. This only meant minor changes in my implementation, mostly with the mousedown, mousemove, and mouseup events. I completed this today and tried doing a 500 piece puzzle right away and have noticed a significant improvement in canvas rendering time. My next focus will be on rotating puzzle pieces.
Although I accomplished even less than I expected on my project over break, I've had a really productive week to try to make up for the lost time. I tried to focus only on a couple features so I would have at least a little more finished to show for my walkthrough. I've been able to use any picture for the puzzle for a while, but I finally added a button that allows the user to choose their own image from their gallery. I was able to scale the image so any dimensions work for the provided image. That way, the puzzle will be as big as it can possibly be on the screen being used, rather than just using the size of the provided image. This has caused an unusual bug where the puzzle gets smaller each time a photo is uploaded, but seems to work otherwise. Along with this, I've gotten a couple smaller features completed since my last blog post, like showing the completed puzzle image as a background of the canvas, and a button for showing only edge pieces. Next I'd like to focus more on rotating pieces, as I've been able to do this with one piece but not for an entire puzzle.
After some struggles with canvas rendering and events this past week, I finally have a working puzzle without using a canvas library. I am currently able to make a puzzle with any number of rows/columns and snap pieces into place when they're near the correct location. I would like to be able to snap pieces next to matching adjacent pieces even if they're not near their final coordinate on the puzzle, so I think I will try to implement that next. Also, I currently have a hardcoded image, so next I'd like to try other images of different sizes to make sure this doesn't break the puzzle.
So far, I've only been able to shape one piece per canvas with the library I'm using for clipping images. The only other way I've gotten this to work is by clipping images within an svg path in the shape of a puzzle piece. However, since this is just masking, the rest of the image is still there, just hidden, which doesn't work reliably for dragging and dropping. Many online sources have decided to fix this by scaling the clipped image so it takes up most of the box the original image was in. This means the coordinates for dragging and dropping wouldn't be perfect. For now, I've tried to implement my puzzle in this way, but I'm still searching for a better alternative to just masking the image. Other than that, I've been able to add drag and drop functionality to square-shaped puzzle pieces as well as add animation as pieces click together. I'm excited to be able to combine these two parts of my project, hopefully soon!
After struggling for the past week with dividing a picture into puzzle pieces with fabric.js, I finally made a little more progress today. In the newest version of fabric.js, they added a clipTo method so I can create an SVG path and clip the object to that shape while still keeping the rest of the canvas the same. This will allow me to have custom SVG paths for each piece, so pieces won't be uniform. I still would like to find a way to make pieces so the object is actually a puzzle piece and not just a rectangle with parts of the image hidden. This will make it more accurate for dragging and dropping and snapping images into place.
I finally made a more detailed layout of all my classes and made decisions on the best way to implement a puzzle. I've also done more research on Javascript libraries that will make it easier to drag and drop and divide a picture into pieces using Canvas. Many of these libraries handle canvas rendering and allow you to work with individual objects rather than context. I'm leaning towards using Fabric.js, but would like to mess around with it a little more to help decide, as there are quite a few helpful libraries that I could go with.
It was a strange week. We didn't have class all week due to weather, so some parts of my project were put on hold until I talked it over with the professors. I did do a lot of research, though, and made a couple decisions that I'm pretty set on. I'm planning on implementing my project as a web app using either Django or Node.js. I did some planning for my data structures, and I think I will implement a modified graph. I also looked into how to split a picture into puzzle pieces and tried a few things, which will be my first goal for the next few days.
I got my project today! It's making a jigsaw application. So far I'm a bit overwhelmed with everything that needs to be done (it doesn't help that some classmates made a website counting down the days until presentations - less than 90 days!) Overall, I'm really excited about the topic and all the possibilities for this project. There's no chance I would ever be done with this project because I already thought of so many features I could add that go beyond my requirements. I've spent a few hours researching already, and my next steps in the coming days will be creating my website and actually adding this blog post there, making a plan of what's going to get done when, and making lots of decisions on implementation.
Modified from Bootstrap Clean Blog Template