Spirograph with matrix transformations

p5.js Coding Questions
1

I am trying to create a simple spirograph project with matrix transformation technique. I took an algorithm based on sin math, but in the end driving paths do not match.
Any idea why I get a different trajectory?

translate(width / 2, height / 2);

// draw with matrix transformations
push();
// calculate 1-st circle
rotate(angle);
translate(150, 0);
// calculate 2-nd circle
rotate(5 * angle);
translate(50, 0);
// draw point
fill('red');
circle(0, 0, 2);
pop();

// draw with sin math
// calculate 1-st circle
let x1 = 150 * cos(angle);
let y1 = 150 * sin(angle);
// calculate 2-nd circle
let x2 = 50 * cos(5 * angle);
let y2 = 50 * sin(5 * angle);
// draw point
fill('blue');
circle(x1 + x2, y1 + y2, 2);

// update angle
angle += 0.01;

Click to see result

2 Likes
2

Consider:

let angle = 0;
let spirals = 3 ;

function setup() {
  createCanvas(600, 600);
  background(250);
  noStroke();
}

function draw() {
  translate(width/2, height/2);

  // draw with matrix transformations
  push();
  // calculate 1-st circle
  rotate(angle);
  translate(150, 0);
  
  // calculate 2-nd circle
  rotate(spirals*angle);
  translate(50, 0);
  // draw point
  fill('red');
  circle(0, 0, 2);
  pop();

  // draw with sin math
  // calculate 1-st circle
  let x1 = 150 * cos(angle);
  let y1 = 150 * sin(angle);
  // calculate 2-nd circle
  let x2 = 50 * cos(angle+spirals*angle);
  let y2 = 50 * sin(angle+spirals*angle);
  // draw point
  fill('blue');
  circle(x1 + x2, y1 + y2, 2);
  pop();
  
   //update angle
  angle += 0.02;
}

:slight_smile:

2 Likes
3

I see that matrix transformations accumulate rotation angle. I add the turn command in the opposite direction.

let a2 = 5 * angle;
rotate(a2);
translate(50, 0);
rotate(-a2);

Checked in three circles - everything works! Thanks for the tip.

2 Likes