# How to create a diagonal line

**URL:** <https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869>\
**Category:** Coding Questions\
**Created:** [February 16, 2020, 7:26pm UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869 "2020-02-16T19:26:01Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon94203042](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94203042](https://discourse.processing.org/u/anon94203042)\
**Post date:** [February 16, 2020, 7:26pm UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/1 "2020-02-16T19:26:01Z")

</div>

So I have this relatively simple code that creates a white line moving left to right across the screen. It’s similar to a “shinny” effect. However, How would I do the same effect, but have the line move diagonally from top right to bottom left?

```auto
void draw()
{
  for (int a = 0; a < 1000; a += 5)
  {
    for (int b = 0; b < 1000; b += 5)
    {
      fill(60, abs((x - b) / 2), 100);
      rect(b, a, 5, 5);
    }
  }

  x += 25;
}

```

 ![Screenshot (4)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aebb180ee75fdee9177a715a4c1a4e5c156fe279.png)

So the first two for-loops basically create a grid of a couple thousand 5x5 squares. Then I have `x` as value that “moves” across the screen. The colour mode is set to `HSB` so the lower the value of `abs((x - b) / 2)` is, then the whiter the rectangle will be.

So all of this together creates a white line that moves across the screen, from left to right.

But how would I change this code up so that the line is diagonal instead of vertical?

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 16, 2020, 8:20pm UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/2 "2020-02-16T20:20:48Z")

</div>

**Not a complete solution, but added this:**

`fill(60, abs((x - b)/2 ) + abs((y - a)/2), 100);`

**and this:**

`y += 25;`

to get a diagonal movement. I’m pretty new to coding so unfortunately can’t offer a complete solution. Perhaps this helps? Though, this is not a line per se…

Also under **TUTORIALS** on the main [processing.org](http://processing.org) site there is a Dan Shiffman **2 DIMENSIONAL ARRAYS** tutorial showing a **how to make an oscillating grid with a diagonal line**. Scroll down to about midway point in text to see.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [February 16, 2020, 9:07pm UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/3 "2020-02-16T21:07:53Z")

</div>

Your code is hard to read. Instead of providing numbers, use constants or variables to indicate their functionality in your code. This is known as avoiding “magic numbers”. You can check the tutorial in the Processing website about [transformations](https://processing.org/tutorials/transform2d/). A sample code below which you will need to modify for final appearance. Finally I added the option for the effect to bounce back when it reaches the edge on the X dimension.

Kf

```java
//===========================================================================
// FINAL FIELDS:
final int GRID_SPACING=5;

//===========================================================================
// GLOBAL VARIABLES:
int currStep=0;
int stepSize=25;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(400, 600);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);

  fill(255);
  strokeWeight(2);
}

void draw() {
  translate(width/2, height/2);
  rotate(PI/4);

  for (int y = -height/2; y < height/2; y += GRID_SPACING) {
    for (int x = -width/2; x < width/2; x += GRID_SPACING) {
      fill(60, abs((currStep - x) / 2), 100);
      rect(x, y, GRID_SPACING,GRID_SPACING);
    }
  }

  currStep += stepSize;

  //Next changes direction when it reaches the edges on the x dimension
  if (currStep<0 || currStep>width)
    stepSize*=-1;
}

```

---

<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:** [February 16, 2020, 11:52pm UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/4 "2020-02-16T23:52:26Z")

</div>

One way of tackling this problem is to use rotate, as in the transformations tutorial and example solution above.

Another way is to use `line()` (possibly with `strokeWeight()`) rather than `rect()`.

[https://processing.org/reference/line\_.html](https://processing.org/reference/line_.html)

---

<div class="post-metadata">

**Author:** ![anon94203042](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94203042](https://discourse.processing.org/u/anon94203042)\
**Post date:** [February 18, 2020, 12:55am UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/5 "2020-02-18T00:55:48Z")

</div>

@jeremydouglass

Using lines seems like a good idea, but I kinda want it to “fade out” in a way. Is there a way that I can have the brightness at full in the middle of the line, but have it reduced as it goes towards the edge?

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [February 18, 2020, 1:12am UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/6 "2020-02-18T01:12:27Z")

</div>

My suggestion is to build an array of points and assign each of them a color. You build this array in setup and use it on every frame in `draw()`. You can use Pgraphics a rectangle and a mask. Or you can use the code above an adjust the brightness there.

Kf

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 18, 2020, 1:44am UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/7 "2020-02-18T01:44:39Z")

</div>

Hello,

I created a custom line from concepts gleaned here:  
[https://processing.org/examples/rgbcube.html](https://processing.org/examples/rgbcube.html)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c4e54ce2dd3cd3069a690a421920ea0e5c1385a3.png)  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6f120706bff222adc705e6040909aa41a3e6a7a3.png)

I added an alpha to the color to have it fade away.

---

<div class="post-metadata">

**Author:** ![anon94203042](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94203042](https://discourse.processing.org/u/anon94203042)\
**Post date:** [February 18, 2020, 2:13am UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/8 "2020-02-18T02:13:12Z")

</div>

@kfrajer

Oh, your code worked perfectly! I was just wondering about @jeremydouglass line.

---

<div class="post-metadata">

**Author:** ![anon94203042](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94203042](https://discourse.processing.org/u/anon94203042)\
**Post date:** [February 18, 2020, 2:14am UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/9 "2020-02-18T02:14:30Z")

</div>

@glv Oh, I wasn’t concerned about the fade at the end of the line, but rather at the edge of the line. So for example, the screenshot I posted, could you do that with a line?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 18, 2020, 2:27am UTC](https://discourse.processing.org/t/how-to-create-a-diagonal-line/17869/10 "2020-02-18T02:27:36Z")

</div>

> [@anon94203042](#):
>
> could you do that with a line?

Take a look at the link I provided.  
Trickle it down to just one face.  
You can make the width and length anything you want; it can look like a line, box or rect and can be 2D or 3D.

That is what I did with my “line”; it is really a _custom_ rectangle that is 2 pixels wide.