Map() value to fit screen

Processing Coding Questions
1 
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

1 Like
2

Hi,

Welcome to the community! :slight_smile:

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
3

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
4

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
5

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

6 
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

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!

1 Like
7

float currentVal2=map(…

You need that?

8

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

9

I suggested that you use my line with

float currentVal2=map(…

to use in your code.

Because you should use map

10

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

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

…?

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

read his post again

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

Chrisir

12

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:

:)