I wanted to integrate the API for an existing Prompt to Image program to use as a base for what I was trying to achieve.

For this reason, I used Replicate’s Stable Diffusion and integrated the API into my p5.js sketch. I used P5 as my medium because I wanted to access its speech library.

I added functions to render the render the image within the function where I was calling forth Stable Diffusion.

I created a separate variable for Speech Recognition.

UI trials: At first I used WebGL to create certain wave patterns on the canvas for an underwater effect but that did not work since it was being rendered on top of the SD image. As we learnt more about Spatial, I wanted to utilise threejs by adding a panoramic image as a background. While that worked, I ran into the same layering issue. Ultimately I had to get rid of all the additional elements and simplify the program.

Getting rid of negative words: I created the following For loop:

let words = [“positive”, “negative”, “awesome”, “bad”, “good”]; function setup() { createCanvas(400, 200); // Print the original array console.log(“Original words array:”, words); // Call a function to remove negative words removeNegativeWords(); // Print the modified array console.log(“Words array after removing negative words:”, words); } function removeNegativeWords() { for (let i = words.length – 1; i >= 0; i–) { let word = words[i]; // Check if the word is negative and remove it if (isNegative(word)) { words.splice(i, 1); } } } function isNegative(word) { // Define a list of negative words (you can customize this list) let negativeWords = [“negative”, “bad”, “wrong”, “unpleasant”]; // Check if the given word is in the negative words list return negativeWords.includes(word); }