# Help in Rotate Image in JAVA2D

**URL:** <https://discourse.processing.org/t/help-in-rotate-image-in-java2d/33852>\
**Category:** Electronics (Arduino, etc.)\
**Tags:** homework\
**Created:** [December 1, 2021, 9:10am UTC](https://discourse.processing.org/t/help-in-rotate-image-in-java2d/33852 "2021-12-01T09:10:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![avong](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@avong](https://discourse.processing.org/u/avong)\
**Post date:** [December 1, 2021, 9:10am UTC](https://discourse.processing.org/t/help-in-rotate-image-in-java2d/33852/1 "2021-12-01T09:10:09Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)  
> \<!-

I have issues rotating image. I need help please.  
I wish to implement Flow Rate Meter. See the attached code.  
I have seen examples, but most try to rotate the image at the centre.  
Mind require to rotate the image “needle” from an angle (edge).

import processing.awt._;  
import javafx.scene.canvas.Canvas;  
import javafx.application.Platform;  
import processing.serial._;  
import javax.swing.JOptionPane._;  
import javax.swing._;

static float XtranFL1=270;  
static float YtranFL1=269;

color c\_background =color(111,111,111);  
color c\_lightgrey =color(120,111,12);  
//========================================================================================  
// Serial Communication  
//========================================================================================  
Serial comport = null; // the serial port  
String PORTS; // list of serial ports  
int idxPort = 0; // currently selected serial port  
int TportsList = 0; // number of serial ports in the list  
String alertMsg; // Holder of error report

float tFL1;

PImage FL1needle;  
PImage FL1meter;  
boolean udata=false;  
boolean PORT=false;

tButton CONN\_PORT =new tButton(12, 400, 120, 20, 3, “Connected”);  
tButton DISCONN\_PORT =new tButton(12, 450, 120, 20, 3, “Disconnected”);  
float needleX=250;  
float needleY=100;

float meterX=10;  
float meterY=10;

void setup()  
{  
size(600, 600);  
frameRate(200);  
smooth();

CONN\_PORT.drawButton(“Connect”, color(255,0,120));  
DISCONN\_PORT.drawButton(“Discconnect”, color(255,0,120));

FL1meter =loadImage(“meter.png”);  
FL1needle=loadImage(“images.png”);  
udata=true;  
}

//============================================================================================  
// Loop forever  
//============================================================================================  
void draw()  
{  
background(c\_background);  
if(udata) UIupdate();  
CONN\_PORT.drawButton((PORT)? “Connected”: “Connect”, (PORT)? color(0,255,0): color(255,0,0));  
DISCONN\_PORT.drawButton((!PORT)? “Disconnected”: “Disconnect”, (PORT)? color(0,255,0): color(255,0,0));  
}

void UIupdate()  
{  
background(255);  
image(FL1meter, meterX, meterY);  
line(0, needleY+118, width, needleY+118); //Horizontal line  
line(needleX, 0, needleX, height); //Vertical line  
//float reading=map(tFL1, 0, 5, 0, 110);  
pushMatrix();  
imageMode(CORNER);  
translate(needleX, needleY);  
//rotate(((HALF\_PI)-40)+reading);  
image(FL1needle, 0, 0);  
//translate(-XtranFL1, -YtranFL1);  
popMatrix();  
}

void mousePressed()  
{  
if(CONN\_PORT.Sbutton())  
{  
Connect();  
}  
if(DISCONN\_PORT.Sbutton())  
{  
Disconnect();  
PORT =false;  
}  
}

//============================================================================================  
// Serial Event: get triggered when data arrived from serial port  
//============================================================================================  
void serialEvent(Serial myPort)  
{  
try  
{  
String inData =myPort.readStringUntil(‘}’);  
if(inData==null) return;

```
inData =trim(inData);
if(inData.length()==0) return;

String [] dataList=split(inData, ':');
udata=false;
tFL1 =float(dataList[1]);
println(inData);
udata=true;

```

} catch (Exception e) { alertMessage(“Error Reading data:”+ e); }  
}

void alertMessage(String msg)  
{  
JOptionPane.showMessageDialog(frame, msg);  
}

void Connect()  
{  
if(comport ==null)  
{  
try  
{  
TportsList = Serial.list().length;  
if(TportsList != 0)  
{  
PORTS = (String) JOptionPane.showInputDialog(null,  
“Select COM Port”,  
"PORTS “,  
JOptionPane.QUESTION\_MESSAGE,  
null,  
Serial.list(),  
Serial.list()[0]);  
comport = new Serial(this, PORTS, 115200);  
comport.readBytesUntil(‘}’);  
if(comport!=null )PORT=true;  
}else { PORT=false; alertMsg=“Please connect USB Cable”;}  
}catch (Exception e) { PORT=false; alertMsg=“PORT: " +PORTS+” is not available or busy”;}  
}  
}

void Disconnect()  
{  
if(PORT)  
{  
comport.stop();  
comport.clear();  
comport=null;  
PORT=false;  
}  
}

class tButton  
{  
float Txpos=0, ypos=0, wBTTN=0, hBTTN=0;  
String label; boolean status=false;  
PFont msgFont; int fsize=12, Bcorners;

tButton(float xtxt, float ytxt, float wtxt, float htxt, int corner, String tlabel)  
{  
Txpos = xtxt;  
ypos = ytxt;  
wBTTN = wtxt;  
hBTTN = htxt;  
label = tlabel;  
Bcorners=corner;  
}

void drawButton(String str, color bcolor)  
{  
fill(c\_background);  
rect(Txpos, ypos, wBTTN, hBTTN);  
stroke(bcolor);  
noFill();  
rect(Txpos, ypos, wBTTN, hBTTN);  
textAlign(LEFT);  
fill(c\_lightgrey);  
textSize(12);  
text(str, Txpos+5, ypos+20, wBTTN, hBTTN);  
}

boolean Sbutton()  
{  
if((mouseX \> Txpos && mouseX \< (Txpos+wBTTN))&&(mouseY \>=ypos && (mouseY\<= (ypos+hBTTN))))  
{  
return (true);  
} return (false);  
}  
}

>

---

<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:** [December 1, 2021, 10:12am UTC](https://discourse.processing.org/t/help-in-rotate-image-in-java2d/33852/2 "2021-12-01T10:12:47Z")

</div>

Hello,

Please read:

> [@Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147):
>
> Summary (TL;DR) Ask complete questions to get better answers! Be specific. For example: I want to load an image. I tried using createImg() , and I expected the image to be on canvas, but what happened instead was the image showing up below the canvas. Isolate your problem and work in small steps. Share only the code directly related to your problem if it is part of a bigger project, and if something isn’t working, try the smallest code that could do the thing you want. Can we run your code to …

We do not need to see your entire project.  
Can you isolate the problem and provide a small example of only that code?  
We should be able to run the small example of code.  
Please format code that is posted to the forum.

All of the above helps us help you.

This is tagged as homework so it would be prudent not to post your entire academic work.  
[https://discourse.processing.org/faq#homework](https://discourse.processing.org/faq#homework)

> **[How to create a Minimal, Reproducible Example - Help Center](https://stackoverflow.com/help/minimal-reproducible-example)**
>
> Stack Overflow | The World’s Largest Online Community for Developers

`:)`

---

<div class="post-metadata">

**Author:** ![avong](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@avong](https://discourse.processing.org/u/avong)\
**Post date:** [December 1, 2021, 11:58am UTC](https://discourse.processing.org/t/help-in-rotate-image-in-java2d/33852/3 "2021-12-01T11:58:24Z")

</div>

Sorry for posting the code.  
That is just a segment of my processing project. The aspect of the project that is giving me issue is what i posted.

What i need to do, create a meter (gauge) for flow rate using scaled image and needle pointer.  
I have two images which have been loaded using (loadImage), i then use “image” to draw the image.  
I have fair understanding of how to use “translate” function.  
How rotate the needle about an edge has been the issue.  
Most of the example utilises the centre of the image.  
What i have achieved, the needle keeps jumping randomly.  
Just look at the aspect of translation an advice.  
I accept challenge but still will ask where it seem dark for understanding.  
Thanks for your helping hand.

---

<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:** [December 1, 2021, 2:42pm UTC](https://discourse.processing.org/t/help-in-rotate-image-in-java2d/33852/4 "2021-12-01T14:42:51Z")

</div>

Hello,

I used this image because it was offset:  
[https://www.pngall.com/wp-content/uploads/6/Vector-Tribal-Arrow-PNG-Image-HD.png](https://www.pngall.com/wp-content/uploads/6/Vector-Tribal-Arrow-PNG-Image-HD.png)

Code to peruse:

```auto
  push(); 
  rotate(frameCount*TAU/360);
  noFill();
  translate(0, -25); // Estimated (visually) that it was about 1/4 of height
  rect(0, 0, 200, 100); // To see image size
  image(img, 0, 0);
  pop();

```

![test.mov](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e7a3d6bf6f97238fb51cc9d519c730d89276f80f.gif)

`:)`

---

<div class="post-metadata">

**Author:** ![avong](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@avong](https://discourse.processing.org/u/avong)\
**Post date:** [December 4, 2021, 11:05pm UTC](https://discourse.processing.org/t/help-in-rotate-image-in-java2d/33852/5 "2021-12-04T23:05:48Z")

</div>

hi glv,  
I got the problem solved.  
and needle (pointer) of the meter now turns beautifully well.

Your reference code helped.  
I saw what i was doing wrong which made the needle (pointer) to rotate at random position.  
It was a case of image(needle, 0, 0);  
After translating to the new axis and rotating. I need to draw the image of the needle(pointer) by adjusting to image(needle, -23, 21);

Thanks to all who gave advice.