Map function to a radian value

Processing Coding Questions
1

Hello! I need to move an image, from the lateral mouse input to a specific angle on the screen (from 240º to 300º). The direct transformation (as the code) doesn’t work. Is there another way to do that?
(to simplify the code i had hide the translate functions on the code below but they are correct)

void draw(){  
int size = 350;
  float deg1 = 240;
  float deg2 = 300;
  float rad1 = radians(deg1);               //transformation
  float rad2 = radians(deg2);
  
  float a = dist(0,mouseY,mouseX,mouseY);
  float mov = map(a,0,700,rad1,rad2);       //lateral moviment
  
  rotate(mov);
  image(img3,0,200,size,size);
}
1 Like
2

It works but the problem is that the rotation is about the top left corner so the image is drawn offscreen. You need to translate the center of rotation to the center of the image. This sketch does the same thing but for a rectangle since I don’t have your image.

void setup() {
  size(800, 800);
  rectMode(CENTER);
}

void draw() { 
  background(0);
  stroke(255);
  int size = 350;
  float deg1 = 240;
  float deg2 = 300;
  float rad1 = radians(deg1);               //transformation
  float rad2 = radians(deg2);

  float a = dist(0, mouseY, mouseX, mouseY);
  float mov = map(a, 0, 700, rad1, rad2);       //lateral moviment
  println(a, mov, rad1, rad2);

  translate(400, 400);
  rotate(mov);
  rect(0, 0, size, size);
}
2 Likes
3

I cannot understand what’s going on here, but here is the code and the images if you would like to look closer :wink:
If the rotation moviment is commented on img2, the img itself is on center, but the rotation doesent make any sense to me

:upside_down_face:

PImage img1,img2;
int size = 350;

void setup(){
  size(1200,700);
  rectMode(CENTER);
  
  img1 = loadImage("Turn_coordinator.png");
  img3 = loadImage("bolinha.png");
}

void draw(){
  background(240);
  translate(width/2,height/2);
  img1();
  img2();

}
//======================================================
void img1(){
  image(img1,-size/2,-size/2,size,size);    //background img
}

void img2(){
  translate(-width/2,-height/2);    //translate to the original position

  float deg1 = 240;
  float deg2 = 300;
  float rad1 = radians(deg1);
  float rad2 = radians(deg2);
  
  float a = dist(0,mouseY,mouseX,mouseY);
  float mov = map(a,0,700,rad1,rad2);         //lateral moviment
  
  translate(width/2,0);
  rotate(mov);
  image(img3,-size/2,175,size,size);
}

bolinha
bolinha.png640×642 4.24 KB
Turn_coordinator
Turn_coordinator.png640×642 69.1 KB

4

since we don’t have your images it’s easier for us if you just post with rect() instead of image() in the forum

Chrisir

PImage img1, img2;
int size = 350;

void setup() {
  size(1200, 700);
  rectMode(CENTER);
  imageMode(CENTER);

  img1 = loadImage("Turn_coordinator.png");
  img2 = loadImage("bolinha.png");
}

void draw() {
  background(240);
  translate(width/2, height/2);
  img1();
  img2();
}
//======================================================
void img1() {
  //  image(img1, -size/2, -size/2, size, size);    //background img
  rect( -size/2, -size/2, size, size );
}

void img2() {


  translate(-width/2, -height/2);    //translate to the original position

  float deg1 = 240;
  float deg2 = 300;
  float rad1 = radians(deg1);
  float rad2 = radians(deg2);

  //  float a = dist(0, mouseY, mouseX, mouseY);
  //float mov = map(a, 0, 700, rad1, rad2);         //lateral moviment
  float mov = map(mouseX, 0, width, rad2, rad1);         //lateral moviment

  translate(width/2, height/2);
  rotate(mov);
  //image(img2, -size/2, 175, size, size);
  rect(0, 0, size, size);
}
2 Likes