# Map() value to fit screen

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

void draw() {
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

1 Like

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 :

``````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()` :

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

``````
2 Likes

welcome!

Yeah,

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

basically it’s the same percentage on both scales

1 Like

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!

1 Like

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

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

void setup() {
size(1280,720);
background(0);
}
void draw() {
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

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

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

1 Like

float currentVal2=map(…

You need that?

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

I suggested that you use my line with

float currentVal2=map(…

Because you should use map

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

``````void setup() {
size(1280,720);
background(0);
}
float currentVal = map(getData(),    // Input value
-100, 115,      // Input range
0, height);       // target range
void draw() {
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);
}
``````

…?

You didn’t read what we wrote?

For example:

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

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

which can’t work

`:)`