Adding tick marks to arc function

djklitz

Hi guys. I'm pretty new to processing. Frankly I've never used a graphics software before so a lot of this is new to me.

I'm trying to use the arc() function but I want to make a semi-circle with a dashed or "tick'ed" border. I'm trying to make a digital gauge that is ticked based similar to an AEM digital gauge.

I could make a ton of arc()'s for each tick but that feels like a lot of processing power. Or I could make a colored background image and a single black arc() that works in reverse that covers the colored portion.

The RPM gauge is a good example of what I'm trying to build.

I've currently got a full arc() working as a gauge but I want to add tick marks.

djklitz

https://goo.gl/photos/A9yX5fBHncWRturC6

Just to show I'm not totally helpless ;D

ant0ne

Hello, here an example of tick implementation :

float x,y;
float arcWeight=20, arcAngle=PI;
float arcWidth=300, arcHeight=300;

float tickStep=0.1;

void setup() {
 size(500,500);
 x=width/2;
 y=height/2;
}

void draw() {
  println(frameRate);
  arcAngle=(frameCount%(PI*100))/100.;
  background(0);

 pushMatrix();
 translate(x,y);

 // ARC
 stroke(0,255,0);
 strokeWeight(arcWeight);
 noFill();
 strokeCap(SQUARE);
   arc(0,0,arcWidth,arcHeight,PI,PI+arcAngle);
 //

 // TICK
 strokeWeight(1);
 stroke(255,0,0);
 float midweight=arcWeight/2, midwidth=arcWidth/2;
 float midheight=arcHeight/2;
 for(float tick=PI;tick<PI+arcAngle;tick+=tickStep)
   line(cos(tick)*(midwidth-midweight),sin(tick)*(midheight-midweight),
        cos(tick)*(midwidth+midweight),sin(tick)*(midheight+midweight));
 //  

 popMatrix();
}

djklitz

ant0ne - this is great! thank you!

is there an easy way to draw the full sections between each tick at a time, instead of scrolling each pixel at a time?

ant0ne

I don't quite understand what you're saying, but this seemed the easiest and fastest way. The other way is to draw each piece of the arc with a gap of 1px between. (more difficult and less smooth).

your welcome ;)

djklitz

hey ant0ne, so if you consider each "section" of green between each red tick a block. I want to draw an entire block at a time versus scrolling through each tick.

kfrajer

Like drawing discreet blocks instead of continuous tracing...

This is my try using @antOne 's code:

float x, y;
float arcWeight=20, arcAngle=PI;
float arcWidth=300, arcHeight=300;

float tickStep=0.1;

void setup() {
  size(500, 500);
  x=width/2;
  y=height/2;
}

void draw() {
  println(frameRate);

  if (arcAngle>TWO_PI)
    arcAngle=0;           //Reset drawing... starts over!

  if (frameCount%10==0)
    //This next is to match tickStep. Or you can increment the arcAngle
    //by it: arcAngle+=tickStep;   <---Same result. Now green and red 
    //goes together
    arcAngle+=PI/180.0*5.729578;//(frameCount%(PI*100))/100. ;

  background(0);

  pushMatrix();
  translate(x, y);

  // ARC
  stroke(0, 255, 0);
  strokeWeight(arcWeight);
  noFill();
  strokeCap(SQUARE);
  arc(0, 0, arcWidth, arcHeight, PI, arcAngle);
  //

  // TICK
  strokeWeight(1);
  stroke(255, 0, 0);
  float midweight=arcWeight/2, midwidth=arcWidth/2;
  float midheight=arcHeight/2;
  for (float tick=PI; tick<arcAngle; tick+=tickStep)
    line(cos(tick)*(midwidth-midweight), sin(tick)*(midheight-midweight), 
      cos(tick)*(midwidth+midweight), sin(tick)*(midheight+midweight));
  //  

  popMatrix();
}

Kf

djklitz

kfrajer - i just saw this. work took me away from my hobbies for a little while. thank you so much for your help this is exactly what i needed.

instead of calculating the lines every frame, i made a lookup table for a little less strain on the cpu.

thanks!