Hi! Welcome to Week 15.

This post won't be totally comprehensive (I work like bulldozer and forget to take screenshots) but documenting some of my problem-solving and progress with the final project. 

Conceptually, my idea was for a user to input a poem and create a unique random emotional collage as output.  

First, I wrote out my list of words. I added words like pronouns, determiners, conjunctions, and others, but just to simplify the process, I made these have no effect on the outcome, just added for the logic of the poem and more storytelling. Then for adjectives, verbs, and nouns, i wrote the list out and added a number value to go along with it between -1 to 1 in terms of negative to positive.  I put this in a JSON and in p5. Spoiler, in the end I wish able to use these values more. I really wish I had given the image numbers values as well. 
I found my images on Pinterest, I downloaded them. Now, I was nervous about having 100 images in p5js, so I compressed them and uploaded them onto GitHub instead of locally. (I think I also could've like done this on my computer with a code editor? but I'm not experienced with p5.js in a external code editor). This worked, but it was very finicky often returning a null. Sometimes all images would load, sometimes none. I was able to place them on the canvas as well. 

Next I worked on my buttons. I used HTML buttons to create all of the words in the JSON. Screenshot included of the button code. I had to repeat this for all the categories and I believe this could've been simpler. I added a title and headers to the sections. I added a delete last word feature and my generate collage button. Now to start constructing the poem, I made an array to hold all the words, and then joined the array values with a space. 

Something I next tried that I had to scrap was a space check. I wanted to allow some word modifiers like ed, ing, and plurals. I don't believe there is a way to do this in p5 with out a grammar addon. I thought I could set a variable so when a modifier was chosen spaceCheck would be set to false. This did work, but it affected the whole poem's string meaning, all words had spaces or none. It made sense, but I believed I would have to do some coding and variables to save if every individual word placed had a space or not. I decided this was less important to decided to scrap it. (screenshot included)

So after buttons were created and the user could generate the poem, I created more arrays to categorize the images, and in retrospect, I wonder if this could have been done in a JSON or a more efficient way. I did if statements checking the items in my poem array, and then select a random amount of images from the category array.

I did more housekeeping like a save function, and organized my JSON so the words were in a more logical order for user friendliness. 

A hard part of the code I am not super happy with was the image placement and positioning code(see screenshot).  I think if I had more time I could've perfected this, but this does get the job done. I set random values for the x and y, and then a scale factor to preserve the proportions in a loop for each image. For the positioning, I tried to make a loop to repeatedly replace images until they did not overlap. For some reason this honestly made them overlap more? So when I simplified it, it now simply takes the distance between the two images, and if this distance is too small, add to the distance. Still not perfect, but better and simpler.

Then, as some finishing touches, I coded in more rules for which images to randomize based on what words. And that was it! I am so happy this came through and I might try to polish the image placement and layout. I wonder if I could create a template for the layout, but I do enough some layering. Also, at least this is more generational and random.