Hi everyone! This is my fourth Devlog of the semester! 

This week involved generative art and randomness. In class, I grasped the concept of using the date to create a seed and then dictate the piece to be shown. I first worked on getting my code's outline done using placeholder images. My initial idea was to draw a character and different assets for hair, eyes, outfit, etc. Every day would be a random combination of the elements, based on the seed, to create a unique character. I drew the base character (Damnnit! I should've screenshotted this), which took me way too long. I decided that for a one-week project, I knew my perfectionism would ruin this idea, and I needed to be less ambitious. 

I decided to create a unique town landscape with different elements. For quick projects, I like to utilize the brushes and assets the drawing program I use has in it (I used ClipStudioPaint, and I highly recommend it!). I started to search and combine my elements. I added foliage, houses, people, etc. I saved all of these as individual transparent PNGS. 

Then, I plopped in my assets to p5.js. I felt overwhelmed at first. I put my images into arrays of a few categories. I had some issues with properly putting the image names into the array. This was a simple fix by assigning the image to a variable in preload. Then, I still had issues calling the images from the array to draw. This was fixed by moving the arrays into setup rather than before. 

I had a lot of other small, silly errors that took troubleshooting. For example, I tried to use "||" in an if statement (shown in the screenshot), but I did not explicitly state "item1 === dusk || item1=== night."  For some reason, this completely overrided the if statement so the moon was showing during the day background. An example on the p5.js website showed me this was the issue in my or statement. I made some simple mistakes because the order I called the images was wrong, so they overlapped improperly. I had another problem where an image was not showing, but it showed when I adjusted my window size. I checked the position and size, and I realized that for the width and height, I called windowWidth twice! Changing that fixed the odd issue. 

So after the arrays, I had images I only wanted to show true or false, not like a library of 5, and select one to show. For this, I made check variables and called integer random 1,3 so I would only output two values. I used if statements to decide when an image would be shown, such as the rainbow only during the daytime. You can see this code in the screenshot. It was a lot of if statements, and I am unsure if this is the best way to do it, but it worked. Also, I am unsure if my strategy of calling integer random 1,3  for a random true or false output is the most effective. Lastly, I wanted lots of variety, so I fixed very few elements. Everything could be false except for the sky, houses, and trees. However, this makes some of the outputs a little bare, so I wonder if I should've added more always-present elements. I added some screenshots of the final designs. I debugged by adding + random numbers to the seed to ensure all the images were placed correctly. And that was basically it! This project had some ups and downs, but I was pretty happy with it, and I think the pieces are quite beautiful. 

Here is the final piece! 
https://editor.p5js.org/gracelynn/full/NHXM5bawE