# Random vertex on diagonal line

**URL:** <https://discourse.processing.org/t/random-vertex-on-diagonal-line/30857>\
**Category:** Coding Questions\
**Created:** [June 22, 2021, 9:06pm UTC](https://discourse.processing.org/t/random-vertex-on-diagonal-line/30857 "2021-06-22T21:06:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [June 22, 2021, 9:06pm UTC](https://discourse.processing.org/t/random-vertex-on-diagonal-line/30857/1 "2021-06-22T21:06:20Z")

</div>

![IMG_20210622_170021](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/995d168ac005f08b1ca6f6f751f5abd6cd44b75e.jpeg)

Hi there! I am trying to do a design using random vertex, as you can see on the picture. I want to take a random point between X1 and X2, that is easy to do, but I don’t know what to do with y, because it has to be on that line. Can you please help me?

```auto
  void setup() {
  size(1000, 1000);
  noStroke ();
  background(255,255,255);
  
  //central polygon
  float x1 = random(100,300);
  float y1 = random(100,300);
  float x2 = random(300,700);
  float y2 = random(100,300);
  float x3 = random(700,900);
  float y3 = random(100,300);
  
  float x4 = random(700,900);
  float y4 = random(300,700);
 
  float x5 = random(700,900);
  float y5 = random(700,900);
  float x6 = random(300,700);
  float y6 = random(700,900);
  float x7 = random(100,300);
  float y7 = random(700,900);
  
  float x8 = random(100,300);
  float y8 = random(300,700);
  
  
  //sub polygon 
  float x10 = random(x1,x4);
  float y10 = random(y1,y4);
  
  float x11 = random(x6,x7);
  float y11 = random(y7,y7);
  
 
 
  //red
  fill(255,0,0);
  beginShape();
  vertex(x1,y1);
  vertex(x2,y2);
  vertex(x3,y3);
  vertex(x4,y4);
  vertex(x5,y5);
  vertex(x6,y6);
  vertex(x7,y7);
  vertex(x8,y8);
  endShape();
  
  //yellow
  fill(0,255,255);
  beginShape();
  vertex(x4,y4);
  vertex(x5,y5);
  vertex(x6,y6);
  vertex(x7,y7);
  vertex(x8,y8);
  endShape();
 
  //dark blue
  fill(255,255,0);
  beginShape();
  vertex(x2,y2);
  vertex(x3,y3);
  vertex(x4,y4);
  vertex(x5,y5);
  vertex(x6,y6);
  endShape();
  
  //blue 
  fill(0,0,255);
  beginShape();
  vertex(x4,y4);
  vertex(x5,y5);
  vertex(x6,y6);
  endShape();
  
  
  
 
  
  }

```

---

<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:** [June 22, 2021, 9:41pm UTC](https://discourse.processing.org/t/random-vertex-on-diagonal-line/30857/2 "2021-06-22T21:41:41Z")

</div>

Look at lerp() in the reference

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [June 22, 2021, 11:14pm UTC](https://discourse.processing.org/t/random-vertex-on-diagonal-line/30857/3 "2021-06-22T23:14:22Z")

</div>

That is just what I need! Thank you so much

---

<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:** [June 23, 2021, 1:07am UTC](https://discourse.processing.org/t/random-vertex-on-diagonal-line/30857/4 "2021-06-23T01:07:56Z")

</div>

Hello,

Given `x` you can solve for `y` :

```auto
// Random Point on a Line
// v1.0.1
// GLV 2021-06-26

//https://en.wikipedia.org/wiki/Linear_equation

float x1, y1;
float x2, y2;
float xRand;

void setup() 
  {
  size(700, 300);
  x1 = 100;
  y1 = 100;
  x2 = 600;
  y2 = 200;
  }
  
void draw()
  {
  background(0);
  
  stroke(255, 0, 0);
  strokeWeight(5);
  point(x1, y1);
  point(x2, y2);

  if (frameCount%30 == 0) xRand = random(x1, x2);
  
  float xp = xRand;
  float yp = (y2-y1)/(x2-x1)*(xRand-x1) + y1; // Equation to a line (two-point form)
  
  stroke(255, 255, 0);
  point(xp, yp);
  }
  
void mouseClicked()
  {
  x1 = random(100,300);
  y1 = random(100,300);
  x2 = random(300,700);
  y2 = random(100,300);
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ebe6c4a9fb84063ac353ac6dc6911139300a735b.png)

`:)`

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [June 25, 2021, 2:18pm UTC](https://discourse.processing.org/t/random-vertex-on-diagonal-line/30857/5 "2021-06-25T14:18:58Z")

</div>

Same with PVector and lerp (as mentioned by charisir)

```auto
// Random Point on a Line
// with PVector

PVector v1, v2;

void setup() {
  size(500, 500);
  v1 = randomPoint();
  v2 = randomPoint();
}
  
void draw() {
  background(0);
  
  // line
  stroke(255, 0, 0, 50);
  strokeWeight(2);
  line(v1.x, v1.y, v2.x, v2.y);

  // random Point
  stroke(255, 0, 0);
  strokeWeight(10);
  float xRand = random(1.0);
  PVector lPoint = PVector.lerp(v1, v2, xRand);
  point(lPoint.x, lPoint.y);
}
  
void mouseClicked() {
  v1 = randomPoint();
  v2 = randomPoint();
}

PVector randomPoint() {
  PVector v = new PVector(random(width), random(height));
  return v;  
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 25, 2021, 4:14pm UTC](https://discourse.processing.org/t/random-vertex-on-diagonal-line/30857/6 "2021-06-25T16:14:29Z")

</div>

Same idea as others but does not require `lerp(...)`

```auto
// Hit type L for a new line and spot or S for a new spot
// on existing line.
float x1, y1, x2, y2, x, y;

void setup() {
  size(400, 400);
  randomLine();
  randomSpot();
}

void randomLine() {
  x1 = 10 + random(width - 20);
  y1 = 10 + random(height - 20);
  x2 = 10 + random(width - 20);
  y2 = 10 + random(height - 20);
}

void randomSpot() {
  float t = random(1.0); // t in range >=0 and < 1
  x = x1 + t * (x2 - x1);
  y = y1 + t * (y2 - y1);
}

void draw() {
  background(240);
  stroke(192);
  strokeWeight(3);
  line(x1, y1, x2, y2);
  noStroke();
  // line start
  fill(0, 255, 0);
  ellipse(x1, y1, 10, 10);
  // line end
  fill(255, 0, 0);
  ellipse(x2, y2, 10, 10);
  // random spot
  fill(0, 0, 255, 128);
  ellipse(x, y, 15, 15);
}

void keyTyped() {
  if (key == 'l') {
    randomLine();
    randomSpot();
  }
  if (key == 's') {
    randomSpot();
  }
}

```