#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Adding tick marks to arc function

edited July 2016

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.

Tagged:

• https://goo.gl/photos/A9yX5fBHncWRturC6

Just to show I'm not totally helpless ;D

• edited July 2016 Answer ✓

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();
}
``````
• 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?

• edited July 2016

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

• 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.

• 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

• 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!