Drawing a point from the slope of two points in the Cartesian plane

January 20, 2026

This is not a math tutorial. See Why am I writing about math?

Get the rise by subtracting the y value of point “a” from the y value of point “b”. Get the run by subtracting the x value of point “a” from the x value of point “b”. Get the slope by dividing rise/run.

The slope is the ratio of rise over run. If the slope is known, a new y value that falls on the line can be calculated for any run.

size(400, 400);
textSize(8);
background(235);
fill(25);

translate(width/2, height/2);
scale(1, -1);

int x1 = -123;
int y1 = -44;
int x2 = 157;
int y2 = 99;

int rise = y2 - y1;
int run = x2 - x1;
float slope = float(rise)/float(run);

pushMatrix();
scale(1, -1);
text("slope: " + str(slope), -width/2 + 8, -height/2 + 8);
popMatrix();

strokeWeight(8);
stroke(158, 41, 28);
point(x1, y1);

stroke(46, 28, 158);
point(x2, y2);

float xOffset = 111;
float calculatedX = float(x1) + xOffset;
float calculatedY = float(y1) + slope * xOffset;
stroke(50, 168, 82);
point(calculatedX, calculatedY);

// visually confirm
stroke(122);
strokeWeight(1);
line(x1, y1, x2, y2);

A dynamic version #

Sets the x and y values of the calculated point with the mouseDragged() event:

int x2 = 0;
int y2 = 0;

void setup() {
  size(400, 400);
  textSize(8);
  background(235);
  fill(25);
}

void draw() {
  translate(width/2, height/2);
  scale(1, -1);

  background(235);

  int x1 = -173;
  int y1 = -184;

  strokeWeight(8);
  stroke(158, 41, 28);
  point(x1, y1);
  stroke(46, 28, 158);
  point(x2, y2);

  int rise = y2 - y1;
  int run = x2 - x1;
  float slope = float(rise)/float(run);

  float xOffset = 100;

  float calculatedX = float(x1) + xOffset;
  float calculatedY = float(y1) + xOffset * slope;

  stroke(50, 168, 82);
  point(calculatedX, calculatedY);

  // confirm
  strokeWeight(1);
  stroke(165);
  line(x1, y1, x2, y2);

  pushMatrix();
  scale(1, -1);
  stroke(125);
  text("slope: " + str(slope), -width/2 + 8, -height/2 + 8);
  popMatrix();
}

void mouseDragged() {
  x2 = mouseX - width/2;
  y2 = -1 * (mouseY - height/2);
}

A limitation of relying on the slope to set the new point #

The new point is being calculated from the slope some new run value. For example, if the run is 50, the new x is originalX1 + run, the new y is originalY1 + run * slope. This doesn’t make it possible to accurately do something like always have the new point halfway between the original points. There’s a solution to this problem in notes / Drawing a point from the parametric representation of a line.

Tags: