Week #4

For week #4 I was tasked with creating a project that would generate something compelling daily. After seeing all the example in class, I wanted to create something that was simple and concise. Eventually I landed on the idea of creating a tile game that had a new image displayed every day. The images would be ideally something based in nature that is serene, like animal pictures or natural landscapes. Finding images to display everyday would be its own challenge, but first I had to make the game itself. I started off by creating a class to store the tiles, it's attributes include the image we are using, the x and y positions of the tile, the correct positions of the tile where they should really be, and then the size of the individual tile itself. It also includes a show function to actually show the user the tile and a isCorrect function to check if the tile is in the correct spot. Next I created this nested for loop to create each tile. I decided to make the have game 16 tiles, as this lets each tile have the nice round number of being 100 pixels wide and high, while also giving a reasonable challenge for a quick daily puzzle. Excellent! The picture is shown whilst secretly being divided into tiles, now comes the hard part, shuffling the tiles and allowing users to move them.After running into a horrible bug having to do with the preload NOT preloading the resizing of images before the setup 🙄. I utilized the Fisher-Yates shuffle algorithm. From what I understand, this is an algorithm that swaps elements in an array at random until they have all been mixed up.  Also the floor function makes sure the result of the j variable is always a full number and thus an actual member of the array. With this formula, all members of the array are swapped, resulting in the classic tile image look. All that's left to beat the game is to allow the player to move the tiles!This did not turn out well. I created a selectedTile variable that is intended to be the selector that allows the user to go across the board selecting the tiles. One issue is that the selector contorts oddly around certain tiles, but maybe that can be fixed wit ha strokeWeight adjustment. But the main issue, is that the selector goes all over the place instead of moving normally from left, right,up and down, my theory currently is that the array does not actually change when the board is shuffled, making it so when the next element of the array is selected, it still thinks the image is lined up perfectly, making the selector jump around in an incorrect manner. I finally fixed the issue by creating a slightly different function.  It now swaps all tiles, and then sets the formerly swapped tiles into a 4x4 grid formula for both the rows and columns. I also finally implemented the swapping mechanic. The player can press space to select a tile and then swap it with any of the 4 neighboring tiles. The function allTIlesCorrect will check if all the tiles are in the correct spot. The game is nearly complete, all that is left is to implement the daily photo swap. So close yet so far, what is are my images suddenly getting so pixelated?Apparently the resize() function doesn't work as well with certain images, a more surefire way is to create an a blank image with the size you want and then copy your image onto that. All that's left now is to add a whole lot of images.With our daySeed now in preload and a gigantic bundle of images, our project is completely, every day an entirely unique puzzle will be generated, for animal lovers and puzzle enthusiasts alike to participate in.

Here is the finalized code:https://editor.p5js.org/SunyCoder444/full/-8mZE5dBJ