# Help: animate radiating circles

**URL:** <https://discourse.processing.org/t/help-animate-radiating-circles/27682>\
**Category:** Processing.py\
**Created:** [February 9, 2021, 2:49am UTC](https://discourse.processing.org/t/help-animate-radiating-circles/27682 "2021-02-09T02:49:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TuxGirl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tuxgirl/32/12036_2.png) [@TuxGirl](https://discourse.processing.org/u/TuxGirl)\
**Post date:** [February 9, 2021, 2:49am UTC](https://discourse.processing.org/t/help-animate-radiating-circles/27682/1 "2021-02-09T02:49:41Z")

</div>

I’m trying to make circles that radiate outwards s.t there is a white wave, with ligher color than the background. Sometimes this works, but other times the color remains even.

I would also like darker circles over top, so that the inside is the background color.

```auto
diameter=5
x=150
y=150

def setup():
    '''establishes inital codition of a white circle in the middle of a black background'''
    size(300,300)
    background(0,0,125)
    noStroke()

    
def circle(x,y,diameter):
    '''defines the circle as an equal ellipse'''
    #diameter=sqrt(300 **2+300** 2) 
    ellipse(x,y,diameter,diameter)

def mouseClicked():
    '''changes circle location, when the mouse is cliceked'''
    background(0,0,125)
    global x # x from outside function
    x= mouseX # new value of x when mouse clicked
    global y # y from outside function
    y= mouseY # new value of y when mouse clicked
    diameter=sqrt(300 **2+300** 2) 
    b=125
    r=0
    g=0
    while diameter > 5:
        fill(r,g,b)
        circle(x,y,diameter)
        diameter = diameter - 10
        r=r+4
        g=g+5
        b=b+9

def draw():
    global x
    global y
    r=0
    g=0
    b=125
    
    global diameter
    circle(x,y,diameter)
    diameter=diameter+1

```

any help would be appreciated

---

<div class="post-metadata">

**Author:** ![TuxGirl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tuxgirl/32/12036_2.png) [@TuxGirl](https://discourse.processing.org/u/TuxGirl)\
**Post date:** [February 9, 2021, 3:24am UTC](https://discourse.processing.org/t/help-animate-radiating-circles/27682/2 "2021-02-09T03:24:21Z")

</div>

The final result should look something like this: ![Screenshot from 2021-01-19 16-21-49](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eea2a31199844b60b807fac5fa2b471ac69251da.png)

except the background went from blue to purple, when I converted it from .svg to .png

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 9, 2021, 6:36pm UTC](https://discourse.processing.org/t/help-animate-radiating-circles/27682/3 "2021-02-09T18:36:06Z")

</div>

Hi,

Welcome to the forum! 😉

Few tips about your code :

- For the docstrings inside functions, it’s better to use triple quotes `"""` rather than single quotes as described in the PEP standard conventions [here](https://www.python.org/dev/peps/pep-0257/#one-line-docstrings).

- When using the `global` keyword, you can group variables on one line with a comma like :

- Another syntax convention is to put a space after a comma (like in any other programming language) because is more clear to you and your readers (it’s an error when checking with [pycodestyle](https://pypi.org/project/pycodestyle/) ):

- There’s already a [`circle()`](https://py.processing.org/reference/circle.html) function in Processing, so you can use it! 😉

- Instead of saying : `my_variable = my_variable + 1`, you can just say `my_variable += 1`  
It’s shorter and you can also use it for other operators like `*`, `-`, `%`, `/`…

* * *

So here is the code formatted a bit :

```auto
x = 150
y = 150

diameter = 5

def setup():
    """
    Establishes inital codition of a white circle in 
    the middle of a black background
    """
    size(300, 300)
    
    background(0, 0, 125)
    noStroke()

def mouseClicked():
    """Changes circle location, when the mouse is clicked"""
    global x, y, diameter
    
    background(0, 0, 125)
    
    x = mouseX
    y = mouseY
    
    diameter = sqrt(300 **2 + 300** 2) 
    
    r = 0
    g = 0
    b = 125
    
    while diameter > 5:
        fill(r, g, b)
        circle(x, y, diameter)
        
        diameter -= 10
        
        r += 4
        g += 5
        b += 9

def draw():
    global x, y, diameter
    
    circle(x, y, diameter)
    diameter += 1

```

For me it works fine for now so what do you want to add more precisely?

Hope it helps 😉

---

<div class="post-metadata">

**Author:** ![TuxGirl](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tuxgirl/32/12036_2.png) [@TuxGirl](https://discourse.processing.org/u/TuxGirl)\
**Post date:** [February 9, 2021, 8:26pm UTC](https://discourse.processing.org/t/help-animate-radiating-circles/27682/4 "2021-02-09T20:26:38Z")

</div>

That fixed the color yes, but see how there is a gradient towards the edge. I want that part to expand, so that a fuzzy ring sperads outwords, and to have a stationary white dot over top.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 9, 2021, 9:35pm UTC](https://discourse.processing.org/t/help-animate-radiating-circles/27682/5 "2021-02-09T21:35:45Z")

</div>

For this I think the best way is to use shaders. Eventually you can read more in this Processing tutorial : [Shaders \ Processing.org](https://processing.org/tutorials/pshader/)

I say this because it looks like it’s better to do this by manipulating pixels directly rather than drawing shapes like ellipses to have more brightness or transparency.

You can also use the `loadPixels()` and `updatePixels()` functions to access the `pixels[]` array as described here :

[https://py.processing.org/tutorials/pixels/](https://py.processing.org/tutorials/pixels/)