# Hatching a rect() with diagonal lines

**URL:** <https://discourse.processing.org/t/hatching-a-rect-with-diagonal-lines/7068>\
**Category:** Coding Questions\
**Created:** [January 1, 2019, 10:41am UTC](https://discourse.processing.org/t/hatching-a-rect-with-diagonal-lines/7068 "2019-01-01T10:41:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![eltrem](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eltrem/32/3023_2.png) [@eltrem](https://discourse.processing.org/u/eltrem)\
**Post date:** [January 1, 2019, 10:41am UTC](https://discourse.processing.org/t/hatching-a-rect-with-diagonal-lines/7068/1 "2019-01-01T10:41:23Z")

</div>

Hi all!  
this is my first post in the forum, and i’m a total noob with processing… please be patient…

I want to fill a rect() with diagonal lines. I don’t want to use mask() or PGraphics, because i want to have the final output rendered as a vectorial PDF (i’ll be using a plotter to print the result)

Searching on the old forums, i found a solution for hatching a triangle with diagonal lines from Makio135.  
[https://forum.processing.org/one/topic/how-to-fill-a-triangle-with-diagonal-lines.html](https://forum.processing.org/one/topic/how-to-fill-a-triangle-with-diagonal-lines.html)

…and i can’t find the way to adapt that code for a rect()… been trying to tweak the code but couldn’t find the solution… Does anyone know how to solve this? (i’m ashamed it looks like it might be a trivial solution, so thank you very much for your patience…)

And by the way,  
are there any specific resources for vectorial hatching in processing? some libraries, tutorials, examples?

Thanks and Happy New Year!!!

---

<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:** [January 1, 2019, 12:02pm UTC](https://discourse.processing.org/t/hatching-a-rect-with-diagonal-lines/7068/2 "2019-01-01T12:02:57Z")

</div>

Look at the command lerp() in the Reference

Essentially for a line you need 2 points x1,y1 and x2,y2

so for loop and calculate the points between the corners of the rect (using lerp()) and then draw the lines

Eg start with upper right and lower left corner and go with lerp() to the lower right corner for both

---

<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:** [January 1, 2019, 12:24pm UTC](https://discourse.processing.org/t/hatching-a-rect-with-diagonal-lines/7068/3 "2019-01-01T12:24:04Z")

</div>

or, start from the existing triangle example  
and do it the hard way:  
( just think that that rect() consists of 4 triangles you have to use the same code for )

```auto
// https://forum.processing.org/one/topic/how-to-fill-a-triangle-with-diagonal-lines.html
// https://discourse.processing.org/t/hatching-a-rect-with-diagonal-lines/7068

/*
 float x1,y1, x2,y2, x3,y3, nbLines;
 
 void setup(){
 size(800, 600, P2D);
 smooth();
 randomize();
 }
 
 void draw(){
 background(255);
 triangle(x1,y1, x2,y2, x3,y3);
 
 for(int i=0; i<nbLines; i++){
 float xa = map(i,0,nbLines, x1, x3);
 float ya = map(i,0,nbLines, y1, y3);
 float xb = map(i,0,nbLines, x2, x3);
 float yb = map(i,0,nbLines, y2, y3);
 line(xa,ya, xb,yb);
 }
 
 noLoop();
 }
 
 void mousePressed(){
 randomize();
 loop();
 }
 
 void randomize(){
 x1= random(width);
 y1=random(height);
 x2= random(width);
 y2=random(height);
 x3= random(width);
 y3=random(height);
 nbLines = random(15);
 }
 
 */

float rx, ry, rw, rh; // main rect
float x1, y1, x2, y2, x3, y3, x4, y4, xa, ya, xb, yb, nbLines; // triangles and diagonal lines

void randomize() {
  rw= random(width);
  rh= random(height);
  rx= random(width-rw);
  ry= random(height-rh);
  nbLines = random(5, 10);
  x1 = rx;
  y1 = ry;
  x2 = rx+rw;
  y2 = ry+rh;
  x3 = rx+rw;
  y3 = ry;
  x4 = rx;
  y4 = ry+rh;
}

void setup() {
  size(500, 400);
  randomize();
}

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

void draw_rect() {
  stroke(0, 0, 200);
  fill(200, 200, 0);
  rect(rx, ry, rw, rh);
  stroke(0, 200, 0); 
  for (int i=0; i<nbLines; i++) {
    xa = map(i, 0, nbLines, x1, x3);
    ya = map(i, 0, nbLines, y1, y3);
    xb = map(i, 0, nbLines, x2, x3);
    yb = map(i, 0, nbLines, y2, y3);
    line(xa, ya, xb, yb);
  }
  for (int i=0; i<nbLines; i++) {
    xa = map(i, 0, nbLines, x1, x4);
    ya = map(i, 0, nbLines, y1, y4);
    xb = map(i, 0, nbLines, x2, x4);
    yb = map(i, 0, nbLines, y2, y4);
    line(xa, ya, xb, yb);
  }
  stroke(0, 200, 200); 
  for (int i=0; i<nbLines; i++) {
    xa = map(i, 0, nbLines, x3, x2);
    ya = map(i, 0, nbLines, y3, y2);
    xb = map(i, 0, nbLines, x4, x2);
    yb = map(i, 0, nbLines, y4, y2);
    line(xa, ya, xb, yb);
  }
  for (int i=0; i<nbLines; i++) {
    xa = map(i, 0, nbLines, x3, x1);
    ya = map(i, 0, nbLines, y3, y1);
    xb = map(i, 0, nbLines, x4, x1);
    yb = map(i, 0, nbLines, y4, y1);
    line(xa, ya, xb, yb);
  }
}
void mousePressed() {
  randomize();
}

```

---

<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:** [January 1, 2019, 1:42pm UTC](https://discourse.processing.org/t/hatching-a-rect-with-diagonal-lines/7068/4 "2019-01-01T13:42:46Z")

</div>

The map in the code does the same as lerp does, right?

---

<div class="post-metadata">

**Author:** ![eltrem](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eltrem/32/3023_2.png) [@eltrem](https://discourse.processing.org/u/eltrem)\
**Post date:** [January 1, 2019, 3:44pm UTC](https://discourse.processing.org/t/hatching-a-rect-with-diagonal-lines/7068/5 "2019-01-01T15:44:16Z")

</div>

Wow! Thank you very much!!!  
just tried kll solution and works perfect.

Would using lerp() allow to hatch any kind of shape? anything built in the middle of beginShape() and endShape()?

---

<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:** [January 2, 2019, 5:15am UTC](https://discourse.processing.org/t/hatching-a-rect-with-diagonal-lines/7068/6 "2019-01-02T05:15:21Z")

</div>

> [@eltrem](#):
>
> Would using lerp() allow to hatch any kind of shape?

so as i copy for you the running code for the rect == 4 triangles…  
you should pls try to do same with lerp() as @Chrisir suggested,  
and later your question might be answered already.