Issue with map() function

Processing Coding Questions
1

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;

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:

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?

1 Like
3

First thing, you should not access width/height outside any function like you wrote here

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:

1 Like
4

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?

5

So, I tried to move the variables declarations between setup() and draw() as follows:

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…

6

Create global variable, then assign it in setup.

float p;

void setup() {
  size(400,400);
  p = width * 0.5;
}
7

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.

1 Like
8

Thanks for the help, I modified my code and it works better:

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.