Toggle rulers in sketch processing 3.53

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?

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

1 Like

It was in the Hello Processing video shapes section.
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.

1 Like

OH YES, i want that too.

Technologies
This site was built using Jekyll and is hosted by GitHub Pages. Code sharing is handled by GitHub Gist and videos are hosted on Vimeo. The basic foundation of the site was generated using Initialzr, which provided a template based on HTML5 Boilerplate, Bootstrap and Modernizr.
This site relies heavily on open Javascript frameworks and technologies, including Ace for code editing, Popcorn.js for media-driven events and Processing.js for in-browser execution of Processing code. Additional utility libraries and plugins include jQuery, Spectrum, FileSaver.js and the Bootstrap Hover Dropdown Plugin.

1 Like

here is a simple ruler

Chrisir



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);
}
3 Likes

Ah.
I do see it in the web editor

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

you can use my sketch above for the Processing IDE

Below is a version for 3D

Chrisir

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 );
//}
2 Likes

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.

1 Like

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/
  3. 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…

4 Likes

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?

Hey, and welcome to the forum of processing!

Great to have you here!

It makes perfect sense!

I don’t know about WACOM tablet.

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: https://www.processing.org/reference

Warm regards,

Chrisir

Hi Chrisir

Thank you for your quick reply. :slight_smile:

This was very helpful.

Kind regards
Paula

1 Like

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

1 Like

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:



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

1 Like