# Map() value to fit screen

**URL:** <https://discourse.processing.org/t/map-value-to-fit-screen/21558>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [June 4, 2020, 1:15pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558 "2020-06-04T13:15:06Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mockingjay](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mockingjay](https://discourse.processing.org/u/mockingjay)\
**Post date:** [June 4, 2020, 1:15pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/1 "2020-06-04T13:15:06Z")

</div>

```auto
void setup() {
  size(1280,720);
  background(0);
}
float currentVal = 0;
float reading = 0;
float value = -150;

void draw() {
  reading = getData();
  map(reading, -150,height,0,height/2);
  currentVal += (reading - currentVal) * 0.1;
  
 
if ((millis()/2)%1280<15) {
  background(0);
}
ellipse((millis()/2)%1280,currentVal,15,15);
}
float getData(){
  return 100*sin(millis()/330.0)+random(15);
}

```

I am trying to scale map this to fit the screen, currently, it’s keep appearing on top and I want it to be lower. the range for the getdata is from -150 to 150

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 4, 2020, 1:48pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/2 "2020-06-04T13:48:53Z")

</div>

Hi,

Welcome to the community! 🙂

First of all, make sure you format your code by pressing `Ctrl+T` in the Processing IDE and then use the `</>` button on the forum to insert your code when editing your message.

Few problems here :

- The range of `getData()` is not [-150, 150] but rather [-100, 114] because the `sin` function return a number between -1 and 1. So if you multiply it by `100`, it’s going to be between [-100, 100], then you add a random number between [0, 15[(15 is not included) so at the end : [-100, 114].

- It’s a better practice to put the declarations of your global variables at the top of the program before the `setup()` function.

- The line where you use the `map()` function is useless because you are basically computing a value but not storing it in a variable. Because `map` doesn’t modify the value passed in parameter, it’s returning a new value. Instead to the following :

```auto
float reading = map(getData(), -100, 115, 0, height);

```

- Here you noticed that the range in the map function must be from [-100, 115] to [0, height] to take the space of the whole window.

- Last advice is that your code is not adaptative and too complicated. You rather need variables to control your animation. Here is an example without using `map()` :

```auto

// The amplitude of the sin wave
float amplitude = 100;

// The x location of the ellipse
float x_location = 0;

// The amount of randomness on the y axis
int randomness = 5;

// The amount by which the angle is divided (control the period)
float factor = 100;

// The offset of the sin wave
float offset = 0;

// The speed of the ellipses
float speed = 10;

void setup() {
  size(1280, 720);
  background(0);
}

void draw() {
  // If the ellipse is above the width
  if (x_location > width) {
    // Reset the x location
    x_location = 0;
    // Increase the offset
    offset += 2;
    background(0);
  }
  
  float y_location = sin((x_location / factor) + offset) * amplitude + random(randomness);
  
  // Translate half of the height to center th ellipsed
  translate(0, height/2);
  // Draw the ellipse
  ellipse(x_location, y_location, 15, 15);
  
  // Increase the x location
  x_location += speed;
}

```

---

<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:** [June 4, 2020, 1:51pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/3 "2020-06-04T13:51:06Z")

</div>

welcome!

Yeah,

```auto
float reading = map(getData(), // Input value 
                 -100, 115, // Input range 
                0, height); // target range

```

basically it’s the same percentage on both scales

---

<div class="post-metadata">

**Author:** ![mockingjay](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mockingjay](https://discourse.processing.org/u/mockingjay)\
**Post date:** [June 4, 2020, 4:47pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/4 "2020-06-04T16:47:42Z")

</div>

Thank you! we’re learning basic of processing and currently we are touching on map. But thank you! Your coding is exquisite and i’ve learned so much more that what Processing can achieve! and that is exactly what i want to achieve in the final phase!

Thank you! However i am trying to see how can i put “MAP()” into my original set of coding!

---

<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:** [June 4, 2020, 4:50pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/5 "2020-06-04T16:50:00Z")

</div>

Yeah, show your entire current code with the changes suggested by joseph

---

<div class="post-metadata">

**Author:** ![mockingjay](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mockingjay](https://discourse.processing.org/u/mockingjay)\
**Post date:** [June 4, 2020, 4:55pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/6 "2020-06-04T16:55:54Z")

</div>

```auto
float currentVal = 0;
float reading = map(getData(), -100, 114, 0, height);

void setup() {
  size(1280,720);
  background(0);
}
void draw() {
  reading = getData();
  currentVal += (reading - currentVal) * 0.1;
 
if ((millis()/2)%1280<15) {
  background(0);
}
ellipse((millis()/2)%1280,currentVal,15,15);
}
float getData(){
  return 100*sin(millis()/330.0)+random(15);
}

```

We are supposed to use the

```auto
float getData(){
  return 100*sin(millis()/330.0)+random(15);
}

```

to derived the reading.

Still couldn’t get the graphic in the center of the screen. Hmmmm!

---

<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:** [June 4, 2020, 5:18pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/7 "2020-06-04T17:18:16Z")

</div>

> [@mockingjay](#):
>
> `currentVal`

float currentVal2=map(…

You need that?

---

<div class="post-metadata">

**Author:** ![mockingjay](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mockingjay](https://discourse.processing.org/u/mockingjay)\
**Post date:** [June 4, 2020, 5:32pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/8 "2020-06-04T17:32:31Z")

</div>

It’s a part of easing to smooth out the curve.

---

<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:** [June 4, 2020, 7:48pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/9 "2020-06-04T19:48:47Z")

</div>

I suggested that you use my line with

float currentVal2=map(…

to use in your code.

Because you should use map

---

<div class="post-metadata">

**Author:** ![mockingjay](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@mockingjay](https://discourse.processing.org/u/mockingjay)\
**Post date:** [June 4, 2020, 8:08pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/10 "2020-06-04T20:08:37Z")

</div>

I tried but it’s not working, could you kindly show me the right direction?

```auto
void setup() {
  size(1280,720);
  background(0);
}
float reading = 0;
float currentVal = map(getData(), // Input value 
                 -100, 115, // Input range 
                0, height); // target range
void draw() {
  reading = getData();
  map(reading,-150,150,0,height);
  currentVal += (reading - currentVal) * 0.1;
  
 
if ((millis()/2)%1280<15) {
  background(0);
}
ellipse((millis()/2)%1280,currentVal,15,15);
}
float getData(){
  return 100*sin(millis()/330.0)+random(15);
}

```

---

<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:** [June 5, 2020, 7:44am UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/11 "2020-06-05T07:44:17Z")

</div>

…?

You didn’t read what we wrote?

For example:

> [@mockingjay](#):
>
> ```auto
> float currentVal = map(getData(), // Input value 
> -100, 115, // Input range 
> 0, height); // target range
> 
> ```

is useless _outside_ draw() to read data with getData().

I wrote this to replace your map() **inside** draw().

Despite what Joseph wrote you still have

```auto
map(reading,-150,150,0,height);

```

which can’t work

read his post again

please don’t waste your time with posting code that doesn’t use the advice given by others

Chrisir

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 5, 2020, 6:13pm UTC](https://discourse.processing.org/t/map-value-to-fit-screen/21558/12 "2020-06-05T18:13:48Z")

</div>

One of the best tools in a programmers tool chest is knowing the resources available to you and learning to navigate them.

This is a very short list:

> **Resources \< Click here to expand !**
>
> I encourage you to review the resources available here:
> 
> - The Processing _website_ has references, examples, tutorials, etc.  
> [https://processing.org/](https://processing.org/)
> - The Processing PDE (IDE) has lots to offer!  
> An exploration of the tabs will reveal what is available; libraries, tools and local examples there.
> - The Coding Train  
> [https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
> - The source code can give insight if you are adventurous:  
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)  
> Many of the Processing functions are here:  
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java)
> - The Processing Foundation  
> [https://processingfoundation.org/](https://processingfoundation.org/)  
> Check out the tabs.  
> In the education tab, there is a reference to the Coding Train.
> - And the Internet. `:)`

`:)`