Change Rotation Point From 0,0 to 200, 200 on a 400x400 screen

Programming Questions

mvpolo2k3

Change Rotation Point From 0,0 to 200, 200 on a 400x400 screen

in Programming Questions • 1 year ago

Hi guys, new to the forum. Ive been doing a lot of Arduino stuff, but this is my first Processing projects. I am planning on doing a digital dash for one of my cars, with a VGA to Arduino interface. Right now Im working on one guage at a time. I need to find a way to set different center points for each guage needle for the rotation. Ive read that I have to translate the needle to 0,0, do the rotation, then translate them back to their original position. Im going to have about 12 needles on the dash, this seems like it would take up a bit of CPU power. Is there an easier way? Ive attatched my code for both the SIN-COS calculated needles, and the "rotate" calculated needles. Any help would be appreciated. Thanks, Jesse.

Click Here to Watch Video

// MPH Gauge Trials 1
// SIN and COS calcualtions
import processing.serial.*;
float val;
float val1;
int mph = 0;
String arduinoPort = Serial.list()[1];
float easing = 0.05;
int easedVal;
Serial port;
float angle = 0.0;
float offset = 200;
float scalar = 150;
float speed = 0;
void setup() {
size(400,400);
textSize(26);
smooth();
port = new Serial(this, arduinoPort, 9600);
}
void draw(){
// background ();
if ( port.available() > 0) { // If data is available,
val = port.read(); // read it and store it in val
background(150);
val1 = map(val, 0, 255, 12, 35); // Convert the values, sets needle max and min
}
//NEEDLE SWEEP CALCULATIONS
float x1 = offset + cos(angle) * scalar;
float y1 = offset + sin(angle) * scalar;
fill(255, 0, 0);
triangle( 195, 200, 205, 200, x1, y1); //NEEDLE CENTER POINT AND SWEEP
angle = val1 / 5; //SWEEP ADJUST
float mph = map(val, 0, 255, 0, 180);
int mph1 = round(mph);
fill(0,0,0);
textAlign(CENTER);
text(mph1, 200, 245);
text("MPH", 200, 275);
}

rotate calculations

//rotate calculator
import processing.serial.*;
float val;
float val1;
int mph = 0;
String arduinoPort = Serial.list()[1];
float easing = 0.05;
int easedVal;
Serial port;
float angle = 0.0;
float offset = 200;
float scalar = 150;
float speed = 0;
void setup() {
size(400,400);
textSize(26);
smooth();
port = new Serial(this, arduinoPort, 9600);
}
void draw(){
// background ();
if ( port.available() > 0) { // If data is available,
val = port.read(); // read it and store it in val
background(150);
val1 = map(val, 0, 255, 12, 35); // Convert the values, sets needle max and min
}
//text labels
float mph = map(val, 0, 255, 0, 180);
int mph1 = round(mph);
fill(0,0,0);
textAlign(CENTER);
text(mph1, 200, 245);
text("MPH", 200, 275);
//NEEDLE SWEEP CALCULATIONS
//float x1 = offset + cos(angle) * scalar;
//float y1 = offset + sin(angle) * scalar;
fill(255, 0, 0);
rotate(angle);
triangle( 195, 200, 205, 200, 200, 50); //NEEDLE CENTER POINT AND SWEEP
angle = val1 / 5; //SWEEP ADJUST
}

Replies(3)

jbum

Re: Change Rotation Point From 0,0 to 200, 200 on a 400x400 screen

1 year ago

I wouldn't worry too much about 12 needles, but if you are, I would suggest making a lot more of them, and then comparing the performance of each method (by looking at what frame rates are pulling). You also might get a slight performance improvement by drawing the needle with line, versus triangle.

Here's my own version of 25 needles - I'm using both translate (to the pivot-point of the needle) and rotate.

For each needle, I'm using a value from 0-1 to represent it's rotation. To test, these needles are being set to 0-1 using noise().

float cellWidth;
float cellHeight;
float needleLength;
float needleWidth;
void setup()
{
size(500,500);
smooth();
noStroke();
fill(0);
cellWidth = width / 5;
cellHeight = height/5;
needleLength = cellWidth*.75;
needleWidth = 6;
}
void draw()
{
background(255);
for (float y = 0; y < 5; ++y) {
for (float x = 0; x < 5; ++x) {
float v = noise(x,y,millis()*.001);
pushMatrix();
translate(cellWidth/2 + x * cellWidth, cellHeight*.75 + y * cellHeight);
rotate(-v * PI);
stroke(0);
// line(-needleWidth,0, needleLength,0); // simplified needle
triangle( -needleWidth, needleWidth/2, needleLength, 0, -needleWidth, -needleWidth/2 );
popMatrix();
}
}
// test frame rate
if (frameCount % 60 == 0) println(frameRate);

mvpolo2k3

Re: Change Rotation Point From 0,0 to 200, 200 on a 400x400 screen

1 year ago

wow 25 needles and im pulling 60fps. your code is a heck of a lot simpler than mine. I still have a lot of figuring out to do, just got into this 2 days ago. Im gonna mess with this over break and see how far I get. Thanks for the info, Ill definitely be looking at your code when I get stuck. I like how you broke everything into a cell. Im not quite sure what the pushmatrix and popmatrix do. Happy Holidays!!

thickasab..

Re: Change Rotation Point From 0,0 to 200, 200 on a 400x400 screen

1 year ago

Hello,
I am very new to Processing however also trying something very similar I have found & Modified some code but can not get the serial to work from the arduino

This may save you some time on the graphic side of things (also has a nice moving needle & shift light)

//Tacho2
//_________________________________________________
PFont letters;
PFont numbers;
PFont fast;
PFont gears;

int sensorReadings;
int faceX=150;
int faceY=220;

int gearDisplayX=faceX;
int gearDisplayY=faceY+80;

int shiftLightX=faceX+130;
int shiftLightY=faceY-70;

int rpm=0;

int gear=0;

TachGauge tach;
//
import processing.serial.*;
Serial myPort;
String sensorReading="";
PFont font;
//

void setup() {
size(340, 350);
smooth();
rectMode(CENTER);
frameRate(60);
letters = loadFont("Digital-7Mono-12.vlw");
numbers = loadFont("ArialMT-20.vlw");
fast = loadFont("Digital-7Mono-15.vlw");
gears =   loadFont("Digital-7Mono-12.vlw");
tach = new TachGauge();
//
println(Serial.list());
float a=sqrt(2);
// myPort = new Serial(this, "COM4", 9600);
//myPort.bufferUntil('\n');
//font = (numbers);
//textFont(font);
//
}

void draw() {

//
//}

//
noStroke();
smooth();

tach.display();

//Dashes
int dash=100;
while (dash<=155) {
    fill(255);
    pushMatrix();
    translate(faceX, faceY);
    rotate(radians(dash*5));
    rect(105, 0, 20 , 2);
    popMatrix();
    dash++;
}

//Raised Dashes
int raised=135;
while (raised<=142) {
    fill(255);
    pushMatrix();
    translate(faceX, faceY);
    rotate(radians(raised*25));
    rect(90, 0, 20, 2);
    popMatrix();
    raised++;
}

//Red Dashes
int rDashes=75;
while (rDashes<=85) {
    fill(255,0,0);
    pushMatrix();
    translate(faceX, faceY);
    rotate(radians(rDashes*5));
    rect(93, 0, 20, 2);
    popMatrix();
    rDashes++;
}
//Raised greeen Dashes
int raisedRed=215;
while (raisedRed<=215) {
    fill(0,255,0);
    pushMatrix();
    translate(faceX, faceY);
    rotate(radians(raisedRed*25));
    rect(90, 0, 20, 2);
    popMatrix();
    raisedRed++;
}

//Solid green Line
int solid=149;
while (solid<=185) {
    fill(0,255,0);
    pushMatrix();
    translate(faceX, faceY);
    rotate(radians(solid*2));
    rect(98, 0, 4, 5);
    popMatrix();
    solid++;
}
//gray
    int solidv=120;
while (solid<=360) {
    fill(230);
    pushMatrix();
    translate(faceX, faceY);
    rotate(radians(solid*2));
    rect(120, 0,6 , 5);
    popMatrix();
    solid++;
}
    //gray
    int solidx=180;
while (solid<=360) {
    fill(230);
    pushMatrix();
    translate(faceX, faceY);
    rotate(radians(solid*3));
    rect(50, 0,6 , 5);
    popMatrix();
    solid++;
}
//Numbers
textFont(letters);
fill(255);
String s = "x100";
text(s,faceX-10,faceY+45);

textFont(letters);
fill(255);
String r = "RPM";
text(r,faceX-50,faceY-20);

   textFont(gears);
fill(240);
String w = "Serial not working press space bar";
text(w,faceX-130,faceY-195);

textFont(numbers);
fill(255);
String a = "0";
text(a,faceX-70,faceY+56);

textFont(numbers);
fill(255);
String one = "1";
text(one,faceX-74,faceY+33);

textFont(numbers);
fill(255);
String two = "2";
text(two,faceX-77,faceY);

textFont(numbers);
fill(255);
String three = "3";
text(three,faceX-67,faceY-29);

textFont(numbers);
fill(255);
String four = "4";
text(four,faceX-47,faceY-52);

textFont(numbers);
fill(200);
String five = "5";
text(five,faceX-17,faceY-60);

textFont(numbers);
fill(255);
String six = "6";
text(six,faceX+12,faceY-57);

textFont(numbers);
fill(0,255,0);
String seven = "7";
text(seven,faceX+38,faceY-42);

textFont(numbers);
fill(0,255,0);
String eight = "8";
text(eight,faceX+58,faceY-22);

textFont(numbers);
fill(0,255,0);
String nine = "9";
text(nine,faceX+65,faceY+7);

textFont(numbers);
fill(255,0,0);
String onezero = "10";
text(onezero,faceX+45,faceY+37);

//Shifter Light Rim
fill(150);
ellipse(shiftLightX,shiftLightY,60,60);

//Shifter Light
fill(0);
ellipse(shiftLightX,shiftLightY,50,50);

noStroke();
if(rpm>100&&rpm<150) {
    fill(1,0,255);
    ellipse(shiftLightX,shiftLightY,50,50);
    fill(0,0,255,100);
    ellipse(shiftLightX,shiftLightY,60,60);
}
else if(rpm>151&&rpm<230 ) {
    fill(0,255,0);
    ellipse(shiftLightX,shiftLightY,50,50);
    fill(0,255,0,100);
    ellipse(shiftLightX,shiftLightY,60,60);
}
else if (rpm>230) {
    fill(255,0,0);
    ellipse(shiftLightX,shiftLightY,50,50);
    fill(225,0,0,100);
    ellipse(shiftLightX,shiftLightY,60,60);
}

//Gear Display Rim
fill(100);
rect(gearDisplayX,gearDisplayY,65,45);

//Gear Display Screen
fill(700);
rect(gearDisplayX,gearDisplayY,40,90);
textFont(gears);

//Number
fill(0,255,0);
if (gear ==-1) {
    text('R',gearDisplayX-15,gearDisplayY+17);
}
else if (gear==0) {
    text('N',gearDisplayX-15,gearDisplayY+17);

}

if (keyPressed) {
    if (key==' ') {
      if(rpm<270) {
        if(gear<=1) {
          rpm=rpm+50;

        }
      }
    }
}
else {
    if(rpm>1) {
      rpm=rpm-8;
    }
}

      }
//Tach
class TachGauge {

int tachgaugeX;
int tachgaugeY;
color r;
color f;
color n;

TachGauge() {
r = color(100);
f = color (0) ;
n = color(260,0,0);
tachgaugeX=150;
tachgaugeY=220;
}
   void display(){
   //Gauge Rim
fill(r);
ellipse(tachgaugeX,tachgaugeY,215,215);

//Gauge
fill(f);
ellipse(tachgaugeX,tachgaugeY,255,255);

//Needle
   pushMatrix();
fill(n);
ellipse(tachgaugeX,tachgaugeY,30,30);

fill(n);
strokeWeight(10);
translate(tachgaugeX,tachgaugeY);
rotate(radians(rpm));
quad(1,0,0,-9,-76,80,5,0);
println(rpm);
translate(-tachgaugeX,-tachgaugeY);
popMatrix();
}
}

Top Reply