# Make 2 needle rotate on its center point
**URL:** https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265
**Category:** Electronics (Arduino, etc.)
**Created:** [November 2, 2021, 3:36pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265 "2021-11-02T15:36:31Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 2, 2021, 3:36pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/1 "2021-11-02T15:36:32Z")
Hi everyone,
I am a mechanical engineering student who is making a dynotest project where I will visualize the serial monitor value from Arduino using processing. I’m making two gauges. However, one of the needles of the gauge that I made cannot rotate at its center point as shown in the photo. how do i develop the code so that it can rotate around its center point?
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 2, 2021, 4:00pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/2 "2021-11-02T16:00:43Z")
```auto
/*==== UI For EECL DYNOTEST ====*/
//Declare variable untuk penyimpanan data
PImage needle1;
PImage needle2;
PImage dualgauges;
float increment;
void setup(){
background(0);
size(1350, 800);
needle1=loadImage("ndl1.png");
needle2=loadImage("ndl2.png");
dualgauges=loadImage("dualgauges.jpg");
frameRate(1);
imageMode(CENTER);
image(dualgauges, 500, 280);
needle1.resize(115, 115);
needle2.resize(115, 115);
}
void draw(){
imageMode(CENTER);
image(dualgauges, 500, 280);
//RPM Roll Gauge
pushMatrix();
imageMode(CORNER);
translate((width/2)-437.1, (height/2)-121);
rotate(((HALF_PI)-50.232)+increment);
image(needle1, 0, 0);
//popMatrix();
//RPM Engine gauge
//imageMode(CENTER);
//image(dualgauges, 500, 280);
//pushMatrix();
// imageMode(CORNER);
translate((width/2)-690, (height/2)-926);
rotate(((HALF_PI)-51.835)+increment);
image(needle2, 0, 0);
popMatrix();
increment+=1;
}
```
here is my code
---
### Author:  [@RichardDL](https://discourse.processing.org/u/RichardDL)
#### Post date: [November 2, 2021, 4:11pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/3 "2021-11-02T16:11:39Z")
Hi @anwar05, Welcome to the forum. Here’s a clock example, not sure where it came from or how much I changed it. I think you’ll find the calculations for the position of the hands are very close to what you want for your needle position.
```auto
/**
* Clock.
*
* The current time can be read with the second(), minute(),
* and hour() functions. In this example, sin() and cos() values
* are used to set the position of the hands.
*
* Updated 27 February 2010 to handle size() changes.
*/
int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;
void setup()
{
size(500, 500);
stroke(255);
smooth();
int radius = min(width, height) / 2;
secondsRadius = radius * 0.72;
minutesRadius = radius * 0.60;
hoursRadius = radius * 0.50;
clockDiameter = radius * 1.8;
cx = width / 2;
cy = height / 2;
}
void draw()
{
background(0);
// Draw the clock background
fill(80);
noStroke();
ellipse(cx, cy, clockDiameter, clockDiameter);
// Angles for sin() and cos() start at 3 o'clock;
// subtract HALF_PI to make them start at the top
float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
// Draw the hands of the clock
stroke(255);
strokeWeight(1);
line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
strokeWeight(2);
line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
strokeWeight(4);
line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
// Draw the minute ticks
strokeWeight(2);
beginShape(POINTS);
for (int a = 0; a < 360; a+=6) {
float x = cx + cos(radians(a)) * secondsRadius;
float y = cy + sin(radians(a)) * secondsRadius;
vertex(x, y);
}
endShape();
}
```
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 2, 2021, 4:37pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/4 "2021-11-02T16:37:32Z")
halo RichardDL, thanks for ur reply. actually i’ve found the best position for two needles. like this pict below, but i want both of them rotate on its center. But only the left needle rotates at its center point while the right needle is absurd.
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 2, 2021, 4:41pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/5 "2021-11-02T16:41:21Z")
@RichardDL , actually i have the video when i run the code. But can’t upload here.
---
### Author:  [@RichardDL](https://discourse.processing.org/u/RichardDL)
#### Post date: [November 2, 2021, 4:43pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/6 "2021-11-02T16:43:13Z")
Never mind video, can you make it easy for me to run your code please? Upload the 3 images, and edit the post with the code, select all the code and click \ .
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 2, 2021, 5:17pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/7 "2021-11-02T17:17:52Z")
```auto
/*==== UI For EECL DYNOTEST ====*/
//Declare variable untuk penyimpanan data
PImage needle1;
PImage needle2;
PImage dualgauges;
float increment;
void setup(){
background(0);
size(1350, 800);
needle1=loadImage("ndl1.png");
needle2=loadImage("ndl2.png");
dualgauges=loadImage("dualgauges.jpg");
frameRate(1);
imageMode(CENTER);
image(dualgauges, 500, 280);
needle1.resize(115, 115);
needle2.resize(115, 115);
}
void draw(){
imageMode(CENTER);
image(dualgauges, 500, 280);
//>>RPM Roll Gauge
pushMatrix();
imageMode(CORNER);
translate((width/2)-437.1, (height/2)-121);
rotate(((HALF_PI)-50.232)+increment);
image(needle1, 0, 0);
//popMatrix();
//>>RPM Engine gauge
// pushMatrix();
translate((width/2)-691.25, (height/2)-926.63);
rotate(((HALF_PI)-51.835)+increment);
image(needle2, 0, 0 );
popMatrix();
//increment+=1;
}
```
---
### Author:  [@RichardDL](https://discourse.processing.org/u/RichardDL)
#### Post date: [November 2, 2021, 5:18pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/8 "2021-11-02T17:18:58Z")
You were almost there, looking at the push/popMatrix I’ve made some adjustments and have two circling needles. Try this:
```auto
//RPM Roll Gauge
pushMatrix();
imageMode(CORNER);
translate((width/2)-437.1, (height/2)-121);
rotate(((HALF_PI)-50.232)+increment);
image(needle1, 0, 0);
popMatrix();
//RPM Engine gauge
//imageMode(CENTER);
//image(dualgauges, 500, 280);
pushMatrix();
imageMode(CORNER);
translate((width/2)+ 100, (height/2)-121);
rotate(((HALF_PI)-51.835)+increment);
image(needle2, 0, 0);
popMatrix();
```
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 2, 2021, 5:20pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/9 "2021-11-02T17:20:09Z")
Here the pict that i use on the code @RichardDL , Thanks in Advance
because i’m a new user i’m limited to send more pict, i’ll send one by one
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 2, 2021, 5:21pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/10 "2021-11-02T17:21:15Z")
Here is for the needle, actually needle 1 and 2 is same, i just rename it.
---
### Author:  [@RichardDL](https://discourse.processing.org/u/RichardDL)
#### Post date: [November 2, 2021, 5:22pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/11 "2021-11-02T17:22:35Z")
I meant upload the image files, to give me exactly what you have. But that can wait, try the code I just posted, pasted over the same section in your sketch.
---
### Author:  [@anwar05](https://discourse.processing.org/u/anwar05)
#### Post date: [November 2, 2021, 5:24pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/12 "2021-11-02T17:24:09Z")
@RichardDL , OMG it’s working brooooooo. Thank you 😁
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 2, 2021, 11:58pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/13 "2021-11-02T23:58:00Z")
Hello @anwar05 ,
> [@anwar05](#):
>
> `rotate(((HALF_PI)-50.232)+increment);`
> [@anwar05](#):
>
> `rotate(((HALF_PI)-51.835)+increment);`
You are working in radians unless otherwise specified.
See here for details:
[https://processing.org/](https://processing.org/)
```auto
println(degrees(-50.232)); // Oh my!
println(degrees(-51.835)); // Oh my!
println(degrees(-50.232)%360); // Almost -360 or 0
println(degrees(-51.835)%360); // Almost -90 or +270
println(degrees(HALF_PI-50.232)%360); // Almost -270 or +90
println(degrees(HALF_PI-51.835)%360); // Almost -360 or 0
```
`:)`
---
### Author:  [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [November 3, 2021, 10:42pm UTC](https://discourse.processing.org/t/make-2-needle-rotate-on-its-center-point/33265/14 "2021-11-03T22:42:30Z")
> **[Displaying Values From Arduino Using Processing](https://create.arduino.cc/projecthub/najad/displaying-values-from-arduino-using-processing-1f02da)**
>
> We are going to read some values from an Arduino and display them on an analog meter using Processing. By Najad.