Help: animate radiating circles

Processing.py
1

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.

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

1 Like
2

The final result should look something like this:Screenshot from 2021-01-19 16-21-49

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

1 Like
3

Hi,

Welcome to the forum! :wink:

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.

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

    global x, y, diameter

    Also, only put global at the top of your functions otherwise it can be confusing.

  • 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 ):

    ellipse(x, y, diameter, diameter)

  • There’s already a circle() function in Processing, so you can use it! :wink:

  • 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 :

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 :wink:

1 Like
4

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.

5

For this I think the best way is to use shaders. Eventually you can read more in this Processing tutorial : Shaders \ Processing.org

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/

1 Like