 # Spirograph with matrix transformations

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

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

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