# P5.js code for creating a calculator tip app confused

**URL:** <https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 8, 2021, 1:15pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219 "2021-04-08T13:15:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 8, 2021, 1:15pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/1 "2021-04-08T13:15:41Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

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!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 8, 2021, 11:50pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/2 "2021-04-08T23:50:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 9, 2021, 12:32am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/3 "2021-04-09T00:32:33Z")

</div>

its like a homework question

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 9, 2021, 9:19am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/4 "2021-04-09T09:19:48Z")

</div>

ok I thought you run a startup company or something 🙂 then you should tag “homework” too: [FAQ - Processing Foundation](https://discourse.processing.org/faq/#homework)

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](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) to how to get started.

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 9, 2021, 1:21pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/5 "2021-04-09T13:21:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 9, 2021, 3:11pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/6 "2021-04-09T15:11:15Z")

</div>

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;  
}  
}

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 9, 2021, 3:40pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/7 "2021-04-09T15:40:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 9, 2021, 5:25pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/8 "2021-04-09T17:25:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 9, 2021, 5:37pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/9 "2021-04-09T17:37:14Z")

</div>

do you have a screenshot?

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 9, 2021, 6:11pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/12 "2021-04-09T18:11:44Z")

</div>

![Screenshot (65).png](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3941de408c7aadfb7f1ff671f0eeb6e39e6094d6.png)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 9, 2021, 10:27pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/13 "2021-04-09T22:27:19Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 10, 2021, 1:25am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/14 "2021-04-10T01:25:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 10, 2021, 8:16am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/15 "2021-04-10T08:16:39Z")

</div>

Great progress here!

Basically you can check if img != null

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 10, 2021, 1:46pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/16 "2021-04-10T13:46:30Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 15, 2021, 6:49pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/17 "2021-04-15T18:49:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 15, 2021, 7:09pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/18 "2021-04-15T19:09:36Z")

</div>

Basically in your code what happens is this:

```javascript
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:

```javascript
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

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

```

This won’t draw anything by default.

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 16, 2021, 10:01pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/19 "2021-04-16T22:01:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 16, 2021, 10:15pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/20 "2021-04-16T22:15:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rodeodash832](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Post date:** [April 16, 2021, 10:49pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/21 "2021-04-16T22:49:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 16, 2021, 10:57pm UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219/22 "2021-04-16T22:57:33Z")

</div>

Can you try it by yourself? 🙂

[Next page](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219.md?page=2)