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.
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.
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
:)