# 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:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![LeoP](https://avatars.discourse-cdn.com/v4/letter/l/e95f7d/32.png) [@LeoP](https://discourse.processing.org/u/LeoP)\
**Post date:** [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/1 "2021-09-25T16:18:34Z")

</div>

Hi all,

I am new to Processing and to python for that matter. I am interested in creating linear, geometric ‘art’, in the first instance without animation, static.

I have managed to create a set of circles shifting increasingly to the right and with each time with decreasing diameter. See attachment.

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

And this is my code:

```auto
add_library('svg')

canvasX = 600
canvasY = 600
margin = 50

def setup():
    size(canvasX, canvasY)
    background(255)
    
    global svg_output
    svg_output = createGraphics(canvasX, canvasY, SVG, "circles_1_b.svg")

centerX = canvasX/2
centerY = canvasY/2
step = 10

def draw():
    
    beginRecord(svg_output)
    
    noLoop()
    noFill()
    global centerX
    global centerY
    global canvasX
    global canvasY
    global step
    global margin
    
    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
        
        
    endRecord()    
    
    
    save("circles_1_b.png")

```

Now I would like to get Processing to repeat the same drawing superimposed on the previous so that the circles shift downwards, then to the left, then upwards.

I know I can do that by repeating the above loops with small changes, but I think there must be a better way.

I am looking into the Python Processing reference, and I think first I need to group the circles in one shape with createShape. Then I’m trying various things with rotate() and translate() but I do not understand from the reference how these function work with the draw function.

Any tips, hints or words of wisdom are welcome!

Many thanks,  
Leo

---

<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()

```

---

<div class="post-metadata">

**Author:** ![LeoP](https://avatars.discourse-cdn.com/v4/letter/l/e95f7d/32.png) [@LeoP](https://discourse.processing.org/u/LeoP)\
**Post date:** [September 27, 2021, 8:51am UTC](https://discourse.processing.org/t/how-to-repeat-static-drawing-rotated-four-times-by-90-degrees-python-mode/32409/3 "2021-09-27T08:51:32Z")

</div>

Hallo @jb4x,

Thank you so much for taking the time to post a detailed reply. I understand how these functions work a bit better but I am playing around with your ellipses examples to really get the hang of it.

I am surprised that the draw() function is not necessary. I had understood that it is compulsory in Processing.

Kind regards,  
Leo

---

<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 28, 2021, 9:21am UTC](https://discourse.processing.org/t/how-to-repeat-static-drawing-rotated-four-times-by-90-degrees-python-mode/32409/4 "2021-09-28T09:21:50Z")

</div>

Setup() is called only once at the begining of the execution then draw() is called repeatedly around 60 times per second.

If you are drawing something on the canva that will never change then no need to use draw()

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [September 28, 2021, 8:49pm UTC](https://discourse.processing.org/t/how-to-repeat-static-drawing-rotated-four-times-by-90-degrees-python-mode/32409/5 "2021-09-28T20:49:40Z")

</div>

You can leave out the `setup()`, too. So just –

```python
canvasX = 600
canvasY = 600
margin = 50
...

```

You might hear this referred to as a ‘static mode’ sketch.