# Toggle rulers in sketch processing 3.53

**URL:** <https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474>\
**Category:** Beginners\
**Created:** [March 20, 2019, 12:48pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474 "2019-03-20T12:48:40Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erico](https://avatars.discourse-cdn.com/v4/letter/e/7feea3/32.png) [@Erico](https://discourse.processing.org/u/Erico)\
**Post date:** [March 20, 2019, 12:48pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/1 "2019-03-20T12:48:40Z")

</div>

I was watching the video by Dan Schiffman where he describes toggling rulers for the run box. I have not found a means of doing that. Does that function not exist in Sketch 3.53?

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [March 20, 2019, 7:47pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/2 "2019-03-20T19:47:08Z")

</div>

Which video?  
What do you mean by “toggling rulers”?

---

<div class="post-metadata">

**Author:** ![Erico](https://avatars.discourse-cdn.com/v4/letter/e/7feea3/32.png) [@Erico](https://discourse.processing.org/u/Erico)\
**Post date:** [March 21, 2019, 10:01am UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/3 "2019-03-21T10:01:11Z")

</div>

It was in the Hello Processing video shapes section.  
[https://hello.processing.org/editor/](https://hello.processing.org/editor/)

In the video Dan used a toggle rulers function. It put rulers in the vertical and horizontal aspects of the run box which showed the measure of the shape inside in pixels.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 21, 2019, 2:25pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/4 "2019-03-21T14:25:57Z")

</div>

![2019-03-21_21-24-46_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ee9de9524ccb8d6e85fd71faeb61fb1673a5f73b.jpeg)

OH YES, i want that too.

> Technologies  
> This site was built using [Jekyll](http://jekyllrb.com/) and is hosted by [GitHub Pages](http://pages.github.com/). Code sharing is handled by [GitHub Gist](https://gist.github.com/) and videos are hosted on [Vimeo](http://vimeo.com/). The basic foundation of the site was generated using [Initialzr](http://www.initializr.com/), which provided a template based on [HTML5 Boilerplate](http://www.initializr.com/), [Bootstrap](http://getbootstrap.com/) and [Modernizr](http://modernizr.com/).  
> This site relies heavily on open Javascript frameworks and technologies, including [Ace](http://ace.c9.io/) for code editing, [Popcorn.js](http://popcornjs.org/) for media-driven events and [Processing.js](http://processingjs.org/) for in-browser execution of Processing code. Additional utility libraries and plugins include [jQuery](http://jqueryui.com/), [Spectrum](http://bgrins.github.io/spectrum/), [FileSaver.js](https://github.com/eligrey/FileSaver.js/) and the [Bootstrap Hover Dropdown Plugin](https://github.com/CWSpear/twitter-bootstrap-hover-dropdown).

 ![2019-03-21_21-35-10_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/923807df2677e9820abf90906c184dfe068bb8f6.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2019, 4:39pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/5 "2019-03-21T16:39:55Z")

</div>

here is a simple ruler

Chrisir

```auto

String helpText=""; 

void setup() {
  size(600, 800);
  background(255);
}

void draw() {
  background(255);
  showRuler();
}

// ---------------------------------------------------------------

void showRuler() {

  int fullLengthLine=28; 

  // X-Ruler 
  stroke(0, 0, 255); // BLUE  
  fill(0, 0, 255); 
  line(0, 0, width, 0); 
  // if (false) 
  for (int x=0; x<=width; x+=50) {
    if (x%100==0) {
      // at 0, 100, 200, 300..... we show text and line
      if (x==width) {
        line(x-1, 0, x-1, fullLengthLine); 
        text(x, x-30, fullLengthLine+15);
      } else if (x==0) {
        line(1, 0, 1, fullLengthLine); 
        text(x, x+2, fullLengthLine+15);
      } else {
        line(x, 0, x, fullLengthLine); 
        text(x, x-11, fullLengthLine+15);
      }
    } else if (x%50==0) {
      // at 50, 150, 250.... we only show a shorter line
      line(x, 0, x, fullLengthLine/2);
    }
  }//for

  // ------------------------------------------------------

  // Y-Ruler 
  stroke(255, 0, 0); // RED 
  fill(255, 0, 0); 
  line(0, 0, 
    0, height); 
  for (int y=0; y<=height; y+=50) {
    if (y%100==0) {
      // at 0, 100, 200, 300..... we show text and line
      if (y==height) {
        line(0, height-1, fullLengthLine, height-1); 
        text(y, 
          30, height-7);
      } else if (y==0) {
        line(0, 1, fullLengthLine, 1);
        text(y, 30, 18);
      } else {
        // normal line and text  
        line(0, y, fullLengthLine, y); 
        text(y, fullLengthLine+3, y+4);
      }
    } else if (y%50==0) {
      // at 50, 150, 250.... we only show a shorter line 
      line(0, y, fullLengthLine/2, y);
    }
  }//for

  helpText="The screen is "
    +width
    +" wide and \n"
    +height 
    + " high.\nMouse is at "
    +mouseX+"(x), "
    +mouseY+"(y).";

  showHelpText();
}// func

// ------------------------------------------
// Minor Tools 

void showHelpText() {
  // Yellow box
  fill(#F6FA1C); // Yellow
  stroke(0); // Black
  rect(width-225, 63, 
    210, 62);

  // Black text
  fill(0); // Black
  textSize(12); 
  text(helpText, 
    width-220, 80);
  textSize(14);
}

```

---

<div class="post-metadata">

**Author:** ![Erico](https://avatars.discourse-cdn.com/v4/letter/e/7feea3/32.png) [@Erico](https://discourse.processing.org/u/Erico)\
**Post date:** [March 21, 2019, 5:25pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/6 "2019-03-21T17:25:16Z")

</div>

Ah.  
I do see it in the web editor

 ![ruler](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/447b7e45eebcc66e0ba91d33a11e25716e561807.png)

It is not going to be available in the Processing IDE?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2019, 6:09pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/7 "2019-03-21T18:09:05Z")

</div>

you can use my sketch above for the Processing IDE

Below is a version for 3D

Chrisir

```auto
String helpText=""; 
PFont font1; 
void setup() {
  size(1200, 800, P3D);
  background(255);
  font1=createFont("ARIAL", 15); 
  textFont(font1);
  textMode(SHAPE);
}

void draw() {
  background(255);
  showRuler();
}

// ---------------------------------------------------------------

void showRuler() {

  int fullLengthLine=28; 

  // X-Ruler 
  stroke(0, 0, 255); // BLUE  
  fill(0, 0, 255); 
  line(0, 0, width, 0); 
  // if (false) 
  for (int x=0; x<=width; x+=50) {
    if (x%100==0) {
      // at 0, 100, 200, 300..... we show text and line
      if (x==width) {
        line(x-1, 0, x-1, fullLengthLine); 
        text(x, x-30, fullLengthLine+15);
      } else if (x==0) {
        line(1, 0, 1, fullLengthLine); 
        text(x, x+2, fullLengthLine+15);
      } else {
        // normal line and text  
        line(x, 0, x, fullLengthLine); 
        text(x, x-11, fullLengthLine+15);
      }
    } else if (x%50==0) {
      // at 50, 150, 250.... we only show a shorter line
      line(x, 0, x, fullLengthLine/2);
    }
  }//for x

  // ------------------------------------------------------

  // Y-Ruler 
  stroke(255, 0, 0); // RED 
  fill(255, 0, 0); 
  line(0, 0, 
    0, height); 
  for (int y=0; y<=height; y+=50) {
    if (y%100==0) {
      // at 0, 100, 200, 300..... we show text and line
      if (y==height) {
        line(0, height-1, fullLengthLine, height-1); 
        text(y, 
          30, height-7);
      } else if (y==0) {
        line(0, 1, fullLengthLine, 1);
        text(y, 30, 18);
      } else {
        // normal line and text  
        line(0, y, fullLengthLine, y); 
        text(y, fullLengthLine+3, y+4);
      }
    } else if (y%50==0) {
      // at 50, 150, 250.... we only show a shorter line 
      line(0, y, fullLengthLine/2, y);
    }
  }//for y

  // ------------------------------------------------------

  // Z-Ruler 
  stroke(0, 255, 0); // GREEN 
  fill( 0, 255, 0);
  int xBasePos = width/2-250; 
  int yBasePos = height/2+150;
  line(xBasePos, yBasePos, -300, 
    xBasePos, yBasePos, 300); 
  for (int z=-300; z<=300; z+=50) {
    // Is z equal 0,100,200....? 
    if (z%100==0) {
      // yes; at 0, 100, 200, 300..... we show text and line
      // normal 3D line and text  
      line(xBasePos, yBasePos, z, 
        xBasePos+fullLengthLine, yBasePos, z); 
      text(z, 
        xBasePos+fullLengthLine+3, yBasePos+4, z);
    } else if (z%50==0) {
      // at 50, 150, 250.... we only show a shorter line 
      line(xBasePos, yBasePos, z, 
        xBasePos + fullLengthLine/2, yBasePos, z);
    }//else if
  }//for z

  // show sphere
  lights(); 
  pushMatrix();
  noStroke(); 
  fill(255, 0, 0); 
  translate(width/2, height/2, 0);
  sphere(29); 
  popMatrix();

  // floor 
  float yValueFloor = height;
  // show floor 
  checkeredFloor(yValueFloor);
  // gridOnFloor(); // other version 

  // Show Coordinates
  ShowCoordinates(); 

  // show text
  noLights();
  helpText="The screen is "
    +width
    +" wide (x-axis) and \n"
    +height 
    + " high (y-axis).\nMouse is at "
    +mouseX+"(x), "
    +mouseY+"(y).";

  showHelpText();
}// func

// ------------------------------------------
// Minor Tools 

void showHelpText() {
  // Yellow box
  fill(#F6FA1C); // Yellow
  stroke(0); // Black
  rect(width-225, 63, 
    221, 62);

  // Black text
  fill(0); // Black
  textSize(12); 
  text(helpText, 
    width-220, 80);
  textSize(14);
}

void ShowCoordinates () {
  // Show Coordinates x, y and z

  pushMatrix();
  translate(50, 140, -40); 

  int diameterSphere=14; 

  // Y
  stroke (0, 255, 0); 
  line (0, 0, 0, 
    0, 100, 0 ) ;     
  fill(0, 255, 0);
  SphereParameters (0, 100, 0, diameterSphere);     
  text ("Y", 0, 130, 0); 

  // Z 
  stroke (111);
  line (0, 0, 0, 
    0, 0, -300 ) ;  
  fill(111);
  SphereParameters (0, 0, -300, diameterSphere);     
  text ("-Z", 
    20, 40, -280);

  // X 
  stroke (255, 0, 0);
  line (0, 0, 0, 
    100, 0, 0 ) ; 
  fill(255, 0, 0);
  SphereParameters (100, 0, 0, diameterSphere); 
  text ("X", 110, 30, 0);

  //
  popMatrix();
} // function 

void SphereParameters ( float x, float y, float z, 
  float w ) {
  // function for 3D Sphere  
  // Position and size of a sphere
  noStroke(); 
  pushMatrix();
  translate ( x, y, z );
  sphere ( w );
  popMatrix();
} // function 

void checkeredFloor(float yValueFloor) {

  noStroke();

  for (int i = 0; i < 50; i = i+1) {
    for (int j = -40; j < 42; j = j+1) {

      // % is modulo, meaning rest of division 
      if (i%2 == 0) { 
        if (j%2 == 0) { 
          fill (255, 0, 0);
        } else 
        {
          fill ( 103 );
        }
      } else {
        if (j%2 == 0) { 
          fill ( 103 );
        } else 
        {
          fill (255, 0, 0);
        }
      } // if

      pushMatrix();
      translate ( 80*i-610, yValueFloor, 80*j-940 );
      box ( 80, 7, 80); // one cell / tile 
      popMatrix();
    } // for
  } // for
} // function 

//void gridOnFloor() {

// // add
// int d = 50;

// // size
// int d1 = d;

// // color
// stroke(0);
// strokeWeight(1);

// for (int x = -width; x <= width*2; x += d) {
// for (int z = -1000; z <= 100; z += d) {
// rect3D(x, height, z, 
// d1, d1);
// }
// }
//}

//void rect3D(float x, float y, float z, 
// float d1, float d2) {

// // draws a rect starting at point x,y,z 
// // on the floor of a 3D scene, 
// // this means in the x,z plane.
// // y stays constant.

// // right ---
// line(x, y, z, 
// x+d1, y, z);

// // back \
// line(x+d1, y, z, 
// x+d1, y, z+d2);

// // left ----
// line(x+d1, y, z+d2, 
// x, y, z+d2);

// // front / 
// line(x, y, z+d2, 
// x, y, z );
//}

```

---

<div class="post-metadata">

**Author:** ![Erico](https://avatars.discourse-cdn.com/v4/letter/e/7feea3/32.png) [@Erico](https://discourse.processing.org/u/Erico)\
**Post date:** [March 23, 2019, 10:17am UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/8 "2019-03-23T10:17:24Z")

</div>

Thank you for your attention to this, but I decided the simple solution was to reduce the display’s resolution from 4K to 1920\*1080.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 25, 2019, 8:11pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/9 "2019-03-25T20:11:13Z")

</div>

To summarize:

Those rulers are a special feature of helloprocessing, in javascript – they are not built into:

1. PDE on the desktop
2. p5.js web editor [https://editor.p5js.org/](https://editor.p5js.org/)
3. [openprocessing.org](http://openprocessing.org)

The simple ruler function that Chrisir made could be expanded into a library. However, it wouldn’t be the PDE app adding a ruler overlay around a running sketch – it would be Processing itself rendering a ruler within a running sketch. This creates a lot of complications – first, the way desktop windows work, but beyond that you would need a place for a toggle button, and toggle UI, and the rulers would need to work with the pixelDensity of the operating system.

Still, I could imagine that an Inspector library might be helpful – it could also (for example) draw a hairline grid, or draw crosshair lines on the mouse, or allow you to record markers to the console or to a text file (if you were using it for measurement and placement). I’m not aware of this being something that already exists…

---

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 13, 2020, 11:54pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/10 "2020-09-13T23:54:20Z")

</div>

Hi,  
I just started to learn how to use processing. I was also keen in having the ‘toggled rulers’. But also understand what you just said. I am drawing my own firs project on paper using a greed I set up. I’m also hoping to use an old WACOM tablet, and see if I can integrate the work somehow, and maybe through a photo? Would this make any sense to you?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 14, 2020, 5:52pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/11 "2020-09-14T17:52:09Z")

</div>

Hey, and welcome to the forum of processing!

Great to have you here!

It makes perfect sense!

I don’t know about WACOM tablet.

> [@eco.pm2](#):
>
> and maybe through a photo?

You can display for example the ruler from my sketch and then an image / photo as a kind of background and then you draw something upon the photo with the mouse. Look at loadImage() and image() in the reference: [Reference / Processing.org](https://www.processing.org/reference)

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![eco.pm2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eco.pm2/32/10554_2.png) [@eco.pm2](https://discourse.processing.org/u/eco.pm2)\
**Post date:** [September 15, 2020, 5:25am UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/12 "2020-09-15T05:25:57Z")

</div>

Hi Chrisir

Thank you for your quick reply. 🙂

This was very helpful.

Kind regards  
Paula

---

<div class="post-metadata">

**Author:** ![Tahliam](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@Tahliam](https://discourse.processing.org/u/Tahliam)\
**Post date:** [October 15, 2020, 5:18am UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/13 "2020-10-15T05:18:30Z")

</div>

Hi there, was just wondering how I can keep this ruler open and also draw code within the sketch window ?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 15, 2020, 5:13pm UTC](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/14 "2020-10-15T17:13:59Z")

</div>

Hello, and welcome to the forum!

Great to have you here!

Not sure if I fully understand your question.

Are you referring to the 2D or the 3D version of the ruler?

Please read Jeremy’s post for a full information.

Here is an example of the 2D ruler and how to draw an ellipse and rect and line there:

```auto

String helpText=""; 

void setup() {
  size(600, 800);
  background(255);
}

void draw() {
  background(255);
  showRuler();

  // draw stuff here

  fill(255, 0, 0); // red
  ellipse(333, 600, 
    90, 40);

  fill(0, 0, 255); // blue
  rect (444, 222, 30, 10);

  stroke(0, 255, 0); 
  line(133, 144, 
    177, 188);
}

// ---------------------------------------------------------------

void showRuler() {

  int fullLengthLine=28; 

  // X-Ruler 
  stroke(0, 0, 255); // BLUE  
  fill(0, 0, 255); 
  line(0, 0, width, 0); 
  // if (false) 
  for (int x=0; x<=width; x+=50) {
    if (x%100==0) {
      // at 0, 100, 200, 300..... we show text and line
      if (x==width) {
        line(x-1, 0, x-1, fullLengthLine); 
        text(x, x-30, fullLengthLine+15);
      } else if (x==0) {
        line(1, 0, 1, fullLengthLine); 
        text(x, x+2, fullLengthLine+15);
      } else {
        line(x, 0, x, fullLengthLine); 
        text(x, x-11, fullLengthLine+15);
      }
    } else if (x%50==0) {
      // at 50, 150, 250.... we only show a shorter line
      line(x, 0, x, fullLengthLine/2);
    }
  }//for

  // ------------------------------------------------------

  // Y-Ruler 
  stroke(255, 0, 0); // RED 
  fill(255, 0, 0); 
  line(0, 0, 
    0, height); 
  for (int y=0; y<=height; y+=50) {
    if (y%100==0) {
      // at 0, 100, 200, 300..... we show text and line
      if (y==height) {
        line(0, height-1, fullLengthLine, height-1); 
        text(y, 
          30, height-7);
      } else if (y==0) {
        line(0, 1, fullLengthLine, 1);
        text(y, 30, 18);
      } else {
        // normal line and text  
        line(0, y, fullLengthLine, y); 
        text(y, fullLengthLine+3, y+4);
      }
    } else if (y%50==0) {
      // at 50, 150, 250.... we only show a shorter line 
      line(0, y, fullLengthLine/2, y);
    }
  }//for

  helpText="The screen is "
    +width
    +" wide and \n"
    +height 
    + " high.\nMouse is at "
    +mouseX+"(x), "
    +mouseY+"(y).";

  showHelpText();
}// func

// ------------------------------------------
// Minor Tools 

void showHelpText() {
  // Yellow box
  fill(#F6FA1C); // Yellow
  stroke(0); // Black
  rect(width-225, 63, 
    210, 62);

  // Black text
  fill(0); // Black
  textSize(12); 
  text(helpText, 
    width-220, 80);
  textSize(14);
}

```

Chrisir