# How to repeat static drawing rotated four times by 90 degrees - python mode

**URL:** https://discourse.processing.org/t/how-to-repeat-static-drawing-rotated-four-times-by-90-degrees-python-mode/32409
**Category:** Processing.py
**Created:** [September 25, 2021, 4:18pm UTC](https://discourse.processing.org/t/how-to-repeat-static-drawing-rotated-four-times-by-90-degrees-python-mode/32409 "2021-09-25T16:18:34Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 25, 2021, 5:48pm UTC](https://discourse.processing.org/t/how-to-repeat-static-drawing-rotated-four-times-by-90-degrees-python-mode/32409/2 "2021-09-25T17:48:42Z")

</div>

Hello @LeoP,

you are on a good track with `rotate()` and `translate()`!  
They can be a bit complicated to grasp so start with simple things like drawing an ellipse and figure out what it does to that ellipse.

Let’s draw one in position (0, 0) and one in position (-50, -50).

```auto
def setup():      
    size(100, 100)
    background(20)
    noStroke()

    fill(230)

    ellipse(0, 0, 20, 20)
    ellipse(-50, -50, 20, 20)

```

Of course you see only the one at (0, 0) and just partially but not the one in (-50, -50) because it is on the top left on the previous one, outside of the canvas:

![000](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e872851b7f2fcddeea2d8ea20627dac0b586c2f5.png)

Now let’s use translate:

```auto
def setup():      
    size(100, 100)
    background(20)
    noStroke()
    fill(230)

    translate(75, 75)
    ellipse(0, 0, 20, 20)
    ellipse(-50, -50, 20, 20)

```

As you can see, the 2 ellipses are now visible. This is because the translate function is moving the canvas. What translate(75, 75) means is that the coordinate (0, 0) that was previously drawn at the screen pixel [0, 0] is now drawn at the screen pixel [75, 75]:

![000](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/72c8765dd246c3289872baed0ce073c1d13189b7.png)

Ok let’s add a bit of rotation now:

```auto
def setup():      
    size(100, 100)
    background(20)
    noStroke()
    fill(230)

    translate(75, 75)
    rotate(-HALF_PI / 2)
    ellipse(0, 0, 20, 20)
    ellipse(-50, -50, 20, 20)

```

I added a rotation by 45° counter clockwise and now the dots appear aligned:

![000](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/29badcfd075fb157c14f5fad07e28e3612c0264e.png)

**/!\ Be careful:** the order in which you write your transforms is important. Try switching the translate and rotate function and see how it behaves.

Something to note also is the fact that the transforms are additive:

```auto
def setup():      
    size(100, 100)
    background(20)
    noStroke()
    
    for k in range(0, 3):
        translate(25, 25)
        fill(100 + k * 50)
        ellipse(0, 0, 30 - k * 5, 30 - k * 5)

```

Even though, `translate(25, 25)` does not change, you can see how each ellipse is translated by (25, 25) from each other.

![000](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9e96cd3d6b61fb2a246164236235cf5bfb3d54fd.png)

To go around this, we can save the current transform operations, perform the one we want, and put back the old ones with the [popMatrix()](https://py.processing.org/reference/popMatrix.html) and [pushMatrix()](https://py.processing.org/reference/pushMatrix.html) functions.

```auto
def setup():      
    size(100, 100)
    background(20)
    noStroke()
    
    for k in range(0, 3):
        pushMatrix()
        translate(25, 25)
        fill(100 + k * 50)
        ellipse(0, 0, 30 - k * 5, 30 - k * 5)
        popMatrix()

```

Now all the ellipses are on top of each others:

![000](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/812a562d9a02803fe84c44f757d67d20e62e7a50.png)

I hope you have a better understanding of it now.  
Here what your code could look like to answer your question:

```auto
def setup():   
    canvasX = 600
    canvasY = 600
    margin = 50
    centerX = 300
    centerY = 300
    step = 10
    
    size(600, 600)
    background(255)
    noFill();

    for k in range(0, 4):
        
        pushMatrix()
        translate(300, 300)
        rotate(k * HALF_PI)
        translate(-300, -300)
        
        for i in range(canvasX - margin, (canvasX - margin)/2, - 2*step):
            
            circle(centerX, centerY, i)
            centerX = centerX + step
    
        for i in range((canvasX - margin)/2, step, - 2*step):
        
            circle(centerX, centerY, i)
            centerX = centerX - step
        
        popMatrix()

```

---

_[View the full topic](https://discourse.processing.org/t/how-to-repeat-static-drawing-rotated-four-times-by-90-degrees-python-mode/32409)._