Pixel Perfect Crosshair with Processing

Have you ever wondered how is it possible to create a pixel-perfect crosshair? Well, wonder no more. Processing is here.


Off course, you’ll have to remove the background but that’s the easiest thing to do!

Well, no time to lose. Let us start off by writing the setup() function.

void setup(){
  size(500, 500);  
  noLoop();
}

It simply creates a 500*500 image, and sets the loop to noLoop, so draw() function won’t go on indefinitely. Now, the draw function. Before that, save the code. So the image will be saved in the same folder as your code. Alright, let’s have a looksie.

void draw(){
 noFill();
 strokeWeight(10);
 arc(width / 2, height / 2, 300, 300, QUARTER_PI, PI);
 strokeWeight(8);
 arc(width / 2, height / 2, 250, 250, QUARTER_PI, PI);
 strokeWeight(6);
 arc(width / 2, height / 2, 200, 200, 0, QUARTER_PI);
 strokeWeight(4);
 arc(width / 2, height / 2, 200, 200, 0, 3);
 strokeWeight(6);
 arc(width / 2, height / 2, 250, 250, PI, TWO_PI);
 fill(0);
 ellipse(width / 2, height / 2, 30, 30);
 strokeWeight(12);
 line(width * 0.25, height * 0.76, width / 2, height / 2);
 line(width * 0.75, height * 0.75, width / 2, height / 2);
 line(width * 0.25, height * 0.26, width / 2, height / 2);
 line(width * 0.75, height * 0.25, width / 2, height / 2);
  
  saveFrame("crosshair.png");
}

noFill() will disable the color fill, so we’ll only have strokes. strokeWeight() which we use religiously sets the size of the stroke in pixels. And arc() creates an arc. This is the main part of this short tutorial, the arc function goes if defined as:


arc(postion_x, position_x, radius_x, radius_y, start_angle, end_angle);

start_angle and end_angle are in Radians. You can use QUARTER_PI (45d), HALF_PI (perpendicular), PI (180d), and PI_TWO (circular) like:


PIs

You can add these together to create PI/3 (35d) and 2*PI/3 (275d).

At the end, we add four lines like so:


line(x1, y1, x2, y2);

We use math to access quarter and a third of the screen. All x2 and y2s are the center of the screen.

At the end, we save the frame.


Coming up next…

I have prepared a Processing and Illustrator tutorial for creating two types of planets. Stay tuned!

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *