Week 4 – Assignment

Concept

My inspiration for this project was a magic 8-Ball, which is like a classic toy that lets people ask a question, shake the ball, and then receive a random answer like “Yes,” “No,” or “Ask again later.” My project is similar to this but in a digital form, so instead of shaking a physical object, the user types a question and presses enter. The program then generates a response from a set list of answers.

Code Highlight

The core of this code is pretty straightforward. The setup function creates the canvas, places the input box, and ensures everything is aligned properly. Then generateResponse function then picks a random answer from a list whenever the user presses Enter. The draw function then continuously updates the screen, displaying the prompt and response.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let inputBox;
let response = ""; // variable to store the response text
let fade = 0;
let answers = [
"Yes.", "No.", "Definitely.", "Absolutely not.",
"Likely.", "Without a doubt.", "Maybe?", "Never."
];
function setup() {
createCanvas(600, 400);
textAlign(CENTER, CENTER);
textSize(24);
// inputbox
inputBox = createInput("");
inputBox.position(width / 2 - 100, height / 2 - 50);
inputBox.size(200);
inputBox.style("font-size", "16px");
inputBox.changed(generateResponse); // calls generateResponse when text inside inputbox changes
}
let inputBox; let response = ""; // variable to store the response text let fade = 0; let answers = [ "Yes.", "No.", "Definitely.", "Absolutely not.", "Likely.", "Without a doubt.", "Maybe?", "Never." ]; function setup() { createCanvas(600, 400); textAlign(CENTER, CENTER); textSize(24); // inputbox inputBox = createInput(""); inputBox.position(width / 2 - 100, height / 2 - 50); inputBox.size(200); inputBox.style("font-size", "16px"); inputBox.changed(generateResponse); // calls generateResponse when text inside inputbox changes }
let inputBox; 
let response = "";  // variable to store the response text
let fade = 0;  
let answers = [ 
  "Yes.", "No.", "Definitely.", "Absolutely not.", 
  "Likely.", "Without a doubt.", "Maybe?", "Never."
];

function setup() {
  createCanvas(600, 400);  
  textAlign(CENTER, CENTER);  
  textSize(24);  
  
  // inputbox
  inputBox = createInput("");
  inputBox.position(width / 2 - 100, height / 2 - 50);  
  inputBox.size(200);  
  inputBox.style("font-size", "16px");  
  
  
  inputBox.changed(generateResponse);  // calls generateResponse when text inside inputbox changes
}
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// generates a random response when the input changes
function generateResponse() {
response = random(answers); // selects random responses from answers array
// generates a random response when the input changes function generateResponse() { response = random(answers); // selects random responses from answers array
// generates a random response when the input changes
function generateResponse() {
  response = random(answers);  // selects random responses from answers array

Reflection/Imporvements

If I were to improve this, I’d start by making the responses feel more dynamic. Right now, all of the answers appear in the same style, but I could change the color of the text based on the response, so maybe green for positive, red for negative, and yellow for uncertain ones. I could even add sound effects or animations would also really improve the experience, making it feel more interactive. Finally, I’d like to refine the user input, so that the box automatically clears after the question is asked.  Overall, I like how this project turned out. It’s a small but effective way to capture the fun of a Magic 8-Ball.

Leave a Reply