Skip to content

Ellipse-tracing system

Here's a curious fact: the following code draws an ellipse:

x = 0; y = 1; t = 0.25 # Or any other x, y, -2 < t < 2
for i in range(100):
  x -= y * t
  y += x * t

Explaining why this is exactly an ellipse is not intuitive, but with the help of people over at MathOverflow, it can be shown that it fits nicely into the general equation of an ellipse.
(Or, you could also use eigenvectors and eigenvalues to prove quasiperiodicity, but why complicate the math? 😂)

An ellipse is drawn, dot-by-dot, over a circle

function setup() {
  createCanvas(400, 400);
  background(220);
  noFill()
  strokeWeight(2)
  stroke(255)
  circle(200, 200, 300)
  stroke(0)
}

let x = 1
let y = 0
let t = 0.25

function draw() {
  // // Traces a perfect circle: (rotation)
  // [x, y] = [
  //   x * sqrt(1 - t * t) + y * -t,
  //   y * sqrt(1 - t * t) + x * t
  // ];
  
  // Traces an ellipse... but why?
  [x, y] = [
    x + y * -t,
    y + x * t - y * t * t
  ];
  
  // // Identical:
  // x -= y * t
  // y += x * t
  
  point(x * 150 + 200, y * 150 + 200)
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/r4dHBzVPU)

Experiments tagged p5 (71/85)

Experiments on this site (71/85)