Animated ring timing

Patterns and Code
1

Hello,
i’m trying to animate a ring with grows over time. While everything works almost as expected I’m stuck at preventing the ring to grow too big if i increase the speed.
The higher the speed to bigger the ring and he longer the gap until a new ring forms. I would like to have a new ring starts the moment the current ring isn’t visible anymore, independent from its speed.

Any advice like pointing me into the right direction and let me figure it out is appreciated :slight_smile:

// set control variables to whatever you think is the best looking
// default value
var circleThickness = 0.05; 
var circleRadius = 0.39;
var circleSpeed = 5;
 var minSpeed = 0.5;
 var maxSpeed = 10;

export function beforeRender(delta) {
  t1 = time(.1)
}

export function sliderThickness(v) {
  circleThickness = 0.01 + (0.2*v)
}

export function sliderSpeed(v) {
  circleSpeed = minSpeed + (maxSpeed*v)
}

export function render2D(index,x,y) {

  // offsetting coordinate to center
  x -= 0.5; y -= 0.5;

  //animated circle radius
  animCircleRadius = t1 * circleSpeed / 4

  if (t1 < 1) {
   
 }

  // calculate radius
  r = sqrt(x*x+y*y)

  if (abs(r-animCircleRadius) < circleThickness) {
    s = 1
    v = 1
    radians = atan2(y, x)
    degrees = radians / PI / 2
    h = degrees + t1 * 2
    
  }
  else {
    s = h = v = 0
  }
  
  hsv(h, s, v)
  
}
2

Hello and welcome!

You’ve clearly got the right idea. It looks like the problem controlling the size is mainly the result of using 1 as the maximum coordinate value instead of 0.5 (because you shifted the origin to the center with x -= 0.5, y -= 0.5)

Just to give you a few ideas to work with, here’s a simple pattern to draw a smoothed, expanding circle, at whatever speed and thickness you need.

speed = 3;
thickness = 0.075

// move coordinate origin to center of display
translate(-0.5,-0.5) 

// create sawtooth waveform with period determined by speed, and
// amplitude range [0,0.5] to match adjusted coordinates
export function beforeRender(delta) {
  t1 = 0.5 * time(.01 * speed)
}

// draw smoothed circle 
export function render2D(index,x,y) {
  h = t1
  s = 1
  v = 1.0 - abs(hypot(x,y) - t1) / thickness
  
  hsv(h, s, v)
}
2 Likes
3

Thank you @zranger1

I got it working and its so much simpler now

// set control variables to whatever you think is the best looking
// default values
var circleThickness = 0.05; 
var circleSpeed = .5;
var minSpeed = 0.05;

// offsetting coordinate to center
translate(-.5, -.5)

export function sliderThickness(v) {
  circleThickness = 0.01 + (0.2*v)
}

export function sliderSpeed(v) {
  circleSpeed = minSpeed + v
}

export function beforeRender(delta) {
  t1 = time(.01 * 1/circleSpeed)
}

export function render2D(index,x,y) {
    radians = atan2(y, x)
    degrees = radians / PI / 2
    h = degrees + t1 * 2
    s = 1  
    v = 1.0 - abs(hypot(x,y) - t1) / circleThickness
  hsv(h, s, v)
  
}
1 Like