# Issue with map() function
**URL:** https://discourse.processing.org/t/issue-with-map-function/21715
**Category:** Coding Questions
**Created:** [June 9, 2020, 7:04pm UTC](https://discourse.processing.org/t/issue-with-map-function/21715 "2020-06-09T19:04:03Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@Th3cG](https://discourse.processing.org/u/Th3cG)
#### Post date: [June 9, 2020, 7:04pm UTC](https://discourse.processing.org/t/issue-with-map-function/21715/1 "2020-06-09T19:04:03Z")
Hello,
I’m trying to write some code to animate a logo that starts from the left of the screen, then bounces on the right side and stops.
My initial sketch works with a width of 640px as follows;
```auto
PImage logo;
float x = -50;
boolean b = true;
float angle = 0;
float p = 11;
void setup() {
size(640, 380);
logo = loadImage("MyLogo.png");
}
void draw() {
background(255);
imageMode(CENTER);
translate(x, height/2);
rotate(angle);
image(logo, 0, 0);
float speed = sqrt(p);
p -= 0.0209;
if (b == true) {
x = x + speed;
angle += 0.1;
} else {
x = x - speed;
angle -= 0.1;
}
if (x > width - 20) {
b = false;
}
if ((x < 125) && (b == false)) {
noLoop();
}
println(p);
}
```
To make it work with a greater width, I thought to use the map() function modifying the sketch as follows:
```auto
PImage logo;
float x = -50;
boolean b = true;
float angle = 0;
int p = 11;
float h = 0.0209;
float j = map(h, 0, 640, 0, width);
void setup() {
size(640, 380);
logo = loadImage("MyLogo.png");
}
void draw() {
background(255);
imageMode(CENTER);
translate(x, height/2);
rotate(angle);
image(logo, 0, 0);
float k = map(p, 0, 640, 0, width);
float speed = sqrt(k);
k = k - j;
println(j);
if (b == true) {
x = x + speed;
angle += 0.1;
} else {
x = x - speed;
angle -= 0.1;
}
if (x > width - 20) {
b = false;
}
if ((x < 125) && (b == false)) {
noLoop();
}
println(k);
}
```
However, it doesn’t work and in particular the variable I used instead of “p” in the previous sketch doesn’t get smaller as expected.
May someone help me?
---
### Author:  [@humayung](https://discourse.processing.org/u/humayung)
#### Post date: [June 9, 2020, 8:07pm UTC](https://discourse.processing.org/t/issue-with-map-function/21715/3 "2020-06-09T20:07:03Z")
First thing, you should not access width/height outside any function like you wrote here
> [@Th3cG](#):
>
> `float j = map(h, 0, 640, 0, width);`
as it not set until setup() calls by the system.
For the speed, variable k will not get smaller because it reset in each draw by the line:
> [@Th3cG](#):
>
> ` float k = map(p, 0, 640, 0, width);`
---
### Author:  [@Th3cG](https://discourse.processing.org/u/Th3cG)
#### Post date: [June 9, 2020, 9:44pm UTC](https://discourse.processing.org/t/issue-with-map-function/21715/4 "2020-06-09T21:44:56Z")
Ok, but I cannot figure out a way to not reset “k” as it should go outside the draw() function but at the same time it depends from width that is set in the setup() function…
Mumble mumble.
Should I try to declare “k” between the setup() and the draw() function?
---
### Author:  [@Th3cG](https://discourse.processing.org/u/Th3cG)
#### Post date: [June 10, 2020, 7:19pm UTC](https://discourse.processing.org/t/issue-with-map-function/21715/5 "2020-06-10T19:19:57Z")
So, I tried to move the variables declarations between setup() and draw() as follows:
```auto
PImage logo;
float x = -50;
boolean b = true;
float angle = 0;
void setup() {
size(640, 380);
logo = loadImage("MyLogo.png");
}
float p = 11;
float k = map(p, 0, 640, 0, width);
float h = 0.0209;
float j = map(h, 0, 640, 0, width);
void draw() {
background(255);
imageMode(CENTER);
translate(x, height/2);
rotate(angle);
image(logo, 0, 0);
float speed = sqrt(k);
k = k - j;
if (b == true) {
x = x + speed;
angle += 0.1;
} else {
x = x - speed;
angle -= 0.1;
}
if (x > width - 20) {
b = false;
}
if ((x < 125) && (b == false)) {
noLoop();
}
}
```
I’d expect “k” to be equal 11 as the width is 640, and for the same reason “j” to be 0.0209, but it isn’t so and I can’t understand why map() doesn’t work as I would expect…
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 10, 2020, 8:27pm UTC](https://discourse.processing.org/t/issue-with-map-function/21715/6 "2020-06-10T20:27:59Z")
> [@Th3cG](#):
>
> it should go outside the draw() function but at the same time it depends from width that is set in the setup() function
Create global variable, then assign it in setup.
```auto
float p;
void setup() {
size(400,400);
p = width * 0.5;
}
```
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 10, 2020, 8:30pm UTC](https://discourse.processing.org/t/issue-with-map-function/21715/7 "2020-06-10T20:30:05Z")
> [@Th3cG](#):
>
> ```auto
> void setup() {
> size(640, 380);
> logo = loadImage("MyLogo.png");
> }
>
> float p = 11;
> float k = map(p, 0, 640, 0, width);
> float h = 0.0209;
> float j = map(h, 0, 640, 0, width);
>
> ```
Don’t put globals below setup.
It doesn’t matter what order they appear in the code, global variables are global – if they are defined outside a function/class/method, like float p, and they are defined “first” – before setup and settings, even if they are the last line of your code. By convention just put them at the top for readability.
---
### Author:  [@Th3cG](https://discourse.processing.org/u/Th3cG)
#### Post date: [June 11, 2020, 4:19pm UTC](https://discourse.processing.org/t/issue-with-map-function/21715/8 "2020-06-11T16:19:30Z")
Thanks for the help, I modified my code and it works better:
```auto
PImage logo;
float x = -50;
boolean b = true;
float angle = 0;
float p;
float h;
float k;
float j;
void setup() {
size(640, 380);
logo = loadImage("MyLogo.png");
p = 11;
h = 0.0209;
k = map(p, 0, 640, 0, width);
j = map(h, 0, 640, 0, width);
}
void draw() {
background(255);
imageMode(CENTER);
translate(x, height/2);
rotate(angle);
image(logo, 0, 0);
float speed = sqrt(k);
k = k - j;
if (b == true) {
x = x + speed;
angle += 0.1;
} else {
x = x - speed;
angle -= 0.1;
}
if (x > width - 20) {
b = false;
}
if ((k < 0) && (b == false)) {
noLoop();
}
}
```
There’s still a little issue: I want the logo to stop when approximately x = 125 px if width equals 640 px.
If I increase the width (i.e. 950px) it ain’t stops at 185 px. This probably means that speed decreases faster than expected even if k and j are correctly mapped.
This can probably be due to the use of float instead of double but I can’t prove it as map dosen’t work with doubles.