After scrapping several ideas on what to make a sketch, I decided to make an interactive story where the player makes decisions to dictate how they go about their journey. Then I realized that what I wanted to make was an overloaded twine-like p5 sketch. Then I had the idea to try to combine these two forces together.
If twine produces HTML games and p5 is just JavaScript - shouldn't this be an easy task? Well, in theory - let me talk to you about that. It turns out that it's not easy at all.
The first and main method that I tried to complete my vision, was to let my sketch be the background of the twine game and have the story go on beneath. After exporting the twine out of the program, I dove into the HTML, and embedded the script to call all of the p5 libraries and the sketch. With a little messing around with the CSS, I managed to get a sketch as a background of my sketch. There were elipses dancing beneath my text that didn't reload as I progressed in the sketch. It was a magical moment.
Trying to use the p5.dom library to communicate with twine was where things started to go wrong. There were many errors coming up in the log about undefined variables and unknown file types inside the p5.dom library. Even hiding the sections of script giving the sketch trouble didn't solve the problem. This problem mostly arose when I tried to get the p5.dom library to handle media like sound and video. When I decided step away from the media and focus on creating new .div and text into twine, a single click would create several (meaning over 20) objects of what I called. It was a mess.
Another potential way I tried to force p5 and twine to be friends was by emedding the sketch into an iframe. This method does work, however, it works best with sketches that are not large and do not use photos or sound.
This game might not work correctly on the internet so I am going to e-mail you this.