Random vertex on diagonal line

Processing Coding Questions
1

IMG_20210622_170021
IMG_20210622_1700211080×1062 64.3 KB

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?

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

Look at lerp() in the reference

2 Likes
3

That is just what I need! Thank you so much

1 Like
4

Hello,

Given x you can solve for y :

// 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
image702×327 1.95 KB

:)

5

Same with PVector and lerp (as mentioned by charisir)

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

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

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