Final Project
For my final sketch, I want to create a Christmas advent calendar, where there are 25 doors, and behind each door is an album cover with a new song everyday.
I started off by making a few squares so that I can test a mousePressed function that when clicked in the square the opacity would change from 255 to 0.
While coding this, I was jumping all over the place from getting a working code and also creating classes and loops. I knew I’d be able to create 25 individual squares for each day in a more long way with lots of copying and pasting, and I knew there would be a way to do it with loops and using a class, but I had some issues creating a class and calling individual images.
So I was working on two separate codes, one I knew that I could get working, and another more consolidated one.
I was able to create a 5 x 5 grid using for loops, however, when I tried to load a different image from an array into each of the squares, I was only able to get the same image in all of the squares. There must be a simple change to my for loop or array of images, but I continued to code the longer version so that I could have a working example for class – I was on a bit of a time crunch!
So in my long winded code, I have 25 separate calls for an image and a rectangle on top that when clicked on the transparency will go to zero to reveal the image underneath. I also have 25 separate if statements for each of the squares/days of the calendar.
In my mousePressed function, when each square is clicked, the transparency will drop to zero the reveal the image, and the song will also start to play. Using a JSON file of song data that includes song titles, artists, and albums, when each square is clicked it will also change depending on the day and display that day’s song/artist/album. And when clicked again, the music will stop.
It’s not very pretty looking, but it works! I started of with the first five squares.
I continued to code the rest of the days/squares, the next thing I need to do is make it look a little more Christmas-y, add the numbers to each day, and I’m hoping to add some snowflakes falling across the canvas.
I have since added the numbers for each square, changed some colors, added a title, shifted the song data display, and added falling snowflakes. I also adjusted the mousePressed function so that you can pause and play each song, and it will also display the data anytime a song is played/paused.
Final code (fullscreen)