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?
/*==== 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
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.
/**
* 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();
}
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.
@RichardDL , actually i have the video when i run the code. But can’t upload here.
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 </> .
/*==== 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;
}
You were almost there, looking at the push/popMatrix I’ve made some adjustments and have two circling needles. Try this:
//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();
1 Like
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
Here is for the needle, actually needle 1 and 2 is same, i just rename it.
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.
@RichardDL , OMG it’s working brooooooo. Thank you 
Hello @anwar05 ,
You are working in radians unless otherwise specified.
See here for details:
https://processing.org/
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
:)