FINAL PROJECT
12/06/2020
For the user testing, I'm creating something similar to a grid that when you click a square will change color. If you click it again it will revert to the original color. My plan was to create the grid the size of my canvas (600x600) but for some reason I can't get it to work. It sorts of scales down a little bit and doesn't utilize the whole canvas size. Also, there is a line that forms after clicking and I guess it defines the grid but I don't know how to get rid of it.
12/07/2020
I forgot to mention before that my plan is to have a 'grid' of 5x5 squares, which would need the variable for the width 'w' to be 120, but if I do that amount the whole grid would be offset and wouldn't be completely visible. I'm working with the value w = 100 temporarily since it lets me see the whole grid. Any suggestion for this is needed. Now, the plan is after clicking any square instead of the color white, an image should start to be visible (I tried to put an image instead of the color white but the program runs weird. It doesn't change the square I'm clicking but it changes another square. Clicking the squares again don't change them back to the color black. I also added the image to the background and tried to make the color white transparent but I don't know how). This will be a set image every time the program is run. Clicking a random square would trigger another image (I think of having 4-5 of these images if possible) that would fill the whole canvas size. Also need some ideas to start working on this. Eventually I will add sound effects.
12/09/2020
Professor's advice worked and now the whole canvas size is filled with the grid and the image. I'm trying to create an intro screen where I explain how this works. It would say something along the lines of 'click the screen to unveil an image, and maybe a surprise...', and then pressing a key would take us to the black grid. Can you add another background on top of a background? To write the instructions and then make it disappear? Or how should I approach this. Also, since I will be having several 'surprise' images (around 5, also depending how complicated it can get) should I add all of them in the preload function to call them later?
12/10/2020
So, I was working on the suggestions I received. I'm having issues with the gameStates in the mousePressed function, I've tried in a couple of places and it's not working out. The program is just switching between black screens now every time I click.
12/13/2020
I managed to load the images and put them into an array (these are just random images to test the program, I will update them when the program is running). The next part I want to introduce in the program is making one of the images in the array fill the canvas after a random click. I'm not sure what function to use here since I'm already using mousePressed because I was checking mouseClicked as well but they both recognize the left click from the mouse. The idea with the images is to make one show up randomly after a certain number of clicks so I'm not sure if that will interfere with mousePressed function. The last thing is when I try to reset the program with the letter 'r', it sends me back the start screen but if I press the 's' to start the program, the squares previously clicked are not reset. I'm not sure how to work on that.
12/15/2020
After following Professor's recommendations, I got stuck as well. I think my problem here is with the showImage variable. I might be calling it incorrectly or not calling it at all. The issue with the reset 'r' key was fixed as well. The only thing I noticed is after going to the game and started clicking on the grid, if I press 's' the whole grid gets reset and refilled but it doesn't go to the main screen. This was unexpected and unplanned for and not sure if it's ok to leave it like that or will it be an issue.
12/17/2020
I'm not sure what is going with the program, sometimes it works and sometimes it doesn't. When it doesn't, it keeps telling me something about a width in line 82. I'm not sure why sometimes it runs the program though. When it does run, I noticed the program is running differently than what I had in mind. I'm supposed to have a background image that is on at the beginning which is the earth image but as soon as I click on the grid the first image that shows is not earth but is one of the random images. Also, when it changes to a random image, this new image is supposed to fill the whole canvas and the remaining black squares of the grid should disappear. Since I'm having issues with booleans and conditionals this next part will prob be hard to implement. Once this random image fills the canvas, the program should stop and we would have to reset and start over to have a chance for another image.
12/20/2020
I managed to fix the problem with the width for the showImage variable. I'm trying to use an image as my background for the beginning of the program. It's loading but you can only see part of it. I tried using CENTER mode but it doesn't do anything. I also want to know how to credit one of the images, since I've used it from a tour agency. I'm almost done with it. I decided to scrap some of the other ideas I had in mind for the project because I would have to implement booleans and they will be a nightmare since I don't know how to implement them correctly.
12/21/2020
I did manage to fix the problem with the starting image. I was under the impression that all of my images didn't have coordinates and were only working with imageMode(CENTER) but it wasn't the case. I'm done with the project. It's a shame I was unable to achieve everything I had in mind for the project but I'm still happy with the end result.
​