P5.js code for creating a calculator tip app confused

[rodeodash832]

please format code with </> button * homework policy * asking questions

Just confused on how I would make this instruction given:
You are going to create an app to help you determine what percentage you should tip someone based on the quality of service you received.

You are to pick at least three (3) places to tip and create an app that will allow the user to enter the amount of their bill and the quality of service they received. There will be an output displaying the amount you should tip and the total amount of your bill and the tip.

With each place to tip, you are going to change an image to match that area, it can either be the entire background or just a portion of the screen
Need help fast!

[micuat]

I’m confused too. Is this like homework or are you starting a business?

[rodeodash832]

its like a homework question

[micuat]

ok I thought you run a startup company or something then you should tag “homework” too: FAQ - Processing Foundation

and as stated in the link, you can’t ask for the “answer”. Do you have something you tried already? If not did they provide some code to start with? If you have completely no idea, I recommend to follow tutorials such as the coding train to how to get started.

[rodeodash832]

right now i have added the basic format like looks for the app with a title and added some drop-down menus its just the actual calculating using percentages adding total amounts after the percentage is added having a final price of the bill too.

[rodeodash832]

this is my current code right now im trying to use the drop down menu to change the background to the according restaurant in the drop down menu but keep getting errors please help:

var pickEvent;
var m, bp, n; // variables to hold my images
var img;
var day = ‘what’;
var sel;
var sel1;
// preload some images
function preload() {
m = loadImage(‘mandarin.jpg’);
bp = loadImage(‘bostonpizza.jpg’);
n = loadImage(‘nandos.jpg’);
}
function setup() {
let inp = createInput(’’);
inp.position(312, 175);
inp.size(100);

textAlign(CENTER);
background(200);
sel = createSelect();
sel.position(315, 110);
sel.option(‘Mandarins’);
sel.option(‘Nandos’);
sel.option(‘Boston Pizza’);
sel.selected(‘Resturaunt’);
sel.changed(pickEvent);

textAlign(CENTER);
background(200);
sel1 = createSelect();
sel1.position(325, 245);
sel1.option(‘Bad’);
sel1.option(‘Good’);
sel1.option(‘Excellent’);
sel1.selected(‘Service’);
sel1.changed(pickEvent);

createCanvas(900, 500);
background(153);

}

function draw() {
textSize(36);
text(‘Tip Calculator’, 350, 50);
fill(50, 50, 50);

image(img, 0, 0);

}

function pickEvent() {
//get the item chosen with .value()
day = picker.value();

if (day === ‘Mandarins’) {
img = m;
} else if (day === ‘Nandos’) {
img = n;
} else if (day === ‘Boston Pizza’) {
img = bp;
}
}

[micuat]

ok that’s a good start - however I see you posting from email, but I recommend using the web platform and use </> button to format the code. It’s hard to read it like this.

Also what exactly are the errors?

[rodeodash832]

not exactly sure what the errors are they aren’t very specific it just shows “script error” but im guessing it might have to do with the “picker. value” because it’s pointing at that line.

[micuat]

do you have a screenshot?

[rodeodash832]

[micuat]

sorry I had to copy the url from your screenshot to try the code. when I run the “production” link, I get error at image(img, 0, 0), which I guess, it’s because until pickEvent is fired, img remains empty so that it cannot draw anything.

by the way it’s a bit weird that repl.it shows “script error” message. I wonder if theres a way to show proper error message…

[rodeodash832]

ok thanks what would i do to fix this? should I change ‘img’ value and what should i do it to?

[Chrisir]

Great progress here!

Basically you can check if img != null

[micuat]

yes basically img is not defined at first, so either

• initialize img in setup by assiging one of the images
• or skip image() if img is not defined

The latter is what Chrisir suggested, but strictly speaking, when a variable is not defined yet, it is undefined so you should test like img !== undefined

[rodeodash832]

could u show me an example on how it would work and look like im still a bit confused

[micuat]

Basically in your code what happens is this:

var img;
image(img, 0, 0);

It doesn’t work because img is empty. One solution is to initialize img with an image that you preloaded:

function setup() {
  img = m;
}

But this would mean that there will be an image by default. Another solution is to “only” draw if img is not empty

function draw() {
  if (img !== undefined) {
    image(img, 0, 0);
  }
}

This won’t draw anything by default.

[rodeodash832]

so how would i get it to work if i select an option from the dropdown menu and each selection from the drop-down menu has its own image?

[micuat]

Isn’t that what the code is doing? Did you write the code you posted by yourself? (I’m not judging, just asking)

[rodeodash832]

yes i wrote the whole thing i was just wondering would this make the image change when i change the selection from drop-down?

[micuat]

Can you try it by yourself?