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
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:
- PDE on the desktop
- p5.js web editor https://editor.p5js.org/
- 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: Reference / Processing.org
Warm regards,
Chrisir
Hi Chrisir
Thank you for your quick reply. 
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