# Spirograph with matrix transformations

**URL:** https://discourse.processing.org/t/spirograph-with-matrix-transformations/14567
**Category:** Coding Questions
**Created:** [October 10, 2019, 11:23am UTC](https://discourse.processing.org/t/spirograph-with-matrix-transformations/14567 "2019-10-10T11:23:27Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![neotechnic](https://avatars.discourse-cdn.com/v4/letter/n/8797f3/32.png) [@neotechnic](https://discourse.processing.org/u/neotechnic)
#### Post date: [October 10, 2019, 11:23am UTC](https://discourse.processing.org/t/spirograph-with-matrix-transformations/14567/1 "2019-10-10T11:23:27Z")

</div>

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?

```auto
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](https://editor.p5js.org/pashatechnic/sketches/XGcSdXhPK)

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 10, 2019, 11:38pm UTC](https://discourse.processing.org/t/spirograph-with-matrix-transformations/14567/2 "2019-10-10T23:38:27Z")

</div>

Consider:

```auto
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;
}

```

🙂

---

<div class="post-metadata">

### Author: ![neotechnic](https://avatars.discourse-cdn.com/v4/letter/n/8797f3/32.png) [@neotechnic](https://discourse.processing.org/u/neotechnic)
#### Post date: [October 11, 2019, 6:27am UTC](https://discourse.processing.org/t/spirograph-with-matrix-transformations/14567/3 "2019-10-11T06:27:06Z")

</div>

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

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

```

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