WIP will structure later

Initial Pitch

Idea: Fortune’s Chao Garden 🔮 🌷 🥚

Pitch Feedback

Documentation

Task Checklist (for additional insight into process)

Setup

Since I knew I would be drawing assets for this (which would take a while), I started by setting up the basic functionality and setup so I could just add the assets in later. I used a placeholder chao image and moved forward with barebones CSS styling.

At this point in my planning, I was thinking of only having 1 HTML page and simulate running through pages in the p5.js program. My HTML structure for this page was the following:

1. maincontainer - center aligned container that holds all the elements on the page
   1. canvasbox - holds the canvas
   2. centerbox - box that goes under the canvas and holds elements such as the question input
2. popup - initially hidden container for any “pop up” windows i wanted to create within the page

At the time, I kept things simple and did not expect to make other pages. Later on, this does change as I decide to add a header navigation bar that would link to more information about the project, a gallery, and the repository. However, the gallery would not work out before the deadline so I shelved it for now.

A key part of the setup was placing the canvas inside its own container so I could style later on. I created the canvas element and canvas.parent() to append the canvas to the canvasbox div.

function setup(){
    let canvasBox = document.getElementById("canvasbox");

    let canvas = createCanvas(800,500);
    canvas.parent(canvasBox);
}

function draw(){
    background(51);
}

API Calls & Javascript Setup

CORS Hell

The API I used for the project was https://www.eightballapi.com/, which apparently made the project easily accessible for people by not requiring an API key and other complicated things. I was a bit confused at first with their documentation, but what stumped me most was CORS.

Throughout attempting to get the data from 8Ball API, I’d run into so many CORS errors. I am not too familiar with resolving CORS issues, so I asked YG if it would be okay to manually copy paste their json contents (which was conveniently available in their Playground) and use that data instead. He said that was okay, but also let me know about CORS proxy services such as https://cors-anywhere.herokuapp.com/corsdemo. There was both a community-hosted instance that worked automatically (not herokuapp) and then the herokuapp version (which the user needed to opt into manually for it to work).

Using these finally allowed me to pull the data from 8Ball API, but also caused more inconveniences. These CORS proxy services only allowed a certain number of API calls per couple minutes or so. While coding the functionality and debugging other aspects of the program, this became a big inconvenience. For a bit, I switched in between the 2 proxies while coding.

script.js and sketch.js