P5.JS Times Tables Cardioid

let r;
let factor = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  r = height/2 - 16;  
}

function getVector(index, total) {
  const angle = map(index % total, 0, total, 0, TWO_PI);
  const v = p5.Vector.fromAngle(angle + PI);
  v.mult(r);
  return v;
}

function draw() {
  background(0);
  const total = 200; //int(map(mouseX, 0, width, 0, 200));
  factor += 0.015;

  translate(width/2, height/2);
  stroke(255, 150);
  strokeWeight(2);
  noFill();
  ellipse(0, 0, r*2);
  
  strokeWeight(2);
  for (let i = 0; i < total; i++) {
    const a = getVector(i, total);
    const b = getVector(i * factor, total);
    line(a.x, a.y, b.x, b.y);
  }
}

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at WordPress.com

Up ↑

Design a site like this with WordPress.com
Get started