I was interested in the Oscillation example method (http://www.learningprocessing.com/examples/chapter-13/example-13-6/) that I saw and fancied pairing it up with a modified Recursion example (http://www.learningprocessing.com/examples/chapter-13/example-13-8-recursion/) that I thought looked like a light bulb. As you may have guessed I tried to make the 'bulb' swing.

Understanding that before there was just one line to move and now there would be several circles, I tried to keep the whole Recursion code separate at the bottom as it was conflicting with the x integer, I wanted to then say 'animate that thing over there' but not quite sure if I've got the right idea.


// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 13-6: Oscillation

float theta = 0.0;

void setup() {
 size(200,200);
 smooth();
}


void draw() {
 background(255);
   drawCircle(width/2,height/2,100);
 
 // The output of the sin() function oscillates smoothly between 1 and 1.
 // By adding 1 we get values between 0 and 2.
 // By multiplying by 100, we get values between 0 and 200 which can be used as the ellipse's x location.
 float x = (sin(theta) + 1) * width/2;
 
 // With each cycle, increment theta
 theta += 0.05;
 
 // Draw the ellipse at the value produced by sine
 fill(0);
 stroke(0);
 //line(width/2,0,x,height/2);
 ellipse(x,height/2,16,16);
}


// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 13-8: Recursion

void drawCircle(float x, float y, float radius) {
   noFill();
 ellipse(y, x, radius, radius);
 if(radius > 2) {
   // drawCircle() calls itself twice, creating a branching effect.
   // For every circle, a smaller circle is drawn to the left and right.
   drawCircle(x + radius/7, y, radius/2);
   drawCircle(x - radius/1, y, radius/2);
 }
}


So right now I left the opaque ball swinging and added the modified vales of the Recursion example, but don't see how to make them move. I'd like to get the whole piece to gently sway as if it were one item and not independent pieces fighting for attention.

your drawcircle method

void drawCircle(float x, float y, float radius) {

takes the position and radius as arguments but you always call it with the same, constant values:

drawCircle(width/2,height/2,100);

if you comment out that and put this after the ellipse line:
 drawCircle(height/2,x,100);
then the fractal thing will move from side to side. it won't 'swing' but it will move.

> Not very helpful these boards...

patience. it was only 11 hours between asking and complaining. people are busy.

> What I am looking for it the whole thing to swing

you might be out of luck

> because I don't understand how the pattern is made in the first place

the clue is in the title - // Example 13-8: Recursion

see at the bottom of DrawCircle() where it calls DrawCircle()? it's calling itself, twice, with different parameters, specifically half the current radius. and each call to itself calls itself twice more, which calls itself twice more (...) until the radius is less than 2, when it stops.

however, coming back to the swinging, because it always calls itself with the same middle parameter then the smaller circles will always be drawn on a straight line up and down.

(that middle parameter is called 'y' but is actually x position because i think someone swapped the two over in the ellipse call to turn it from an horizontal pattern to a vertical one)

for it to swing you'd need to turn the distance along the cord (as it were) into a radius and have the 'loose' end of the cord oscillating sinusoidally with time...

some general recursion stuff:
http://www.designpatterns.ca/files/Patterns/Recursion/Pattern_Recursion.xml

ok, so what i did was write a simple pendulum to hopefully explain about the radius thing

basically something halfway down the cord would swing half as much as something at the very end. it's linear.

Code:

// pendulum

private static final int WIDTH = 200;
private static final int HEIGHT = 200;
private static final int HWIDTH = (WIDTH / 2);
private static final int HHEIGHT = (HEIGHT / 2);
private static final float LENGTH = (HEIGHT * .8);
 
float theta = 0.0;
 
void setup() {
  size(WIDTH, HEIGHT);
  smooth();
}

void draw() {
  background(255);

  // move origin to centre
  translate(HWIDTH, 0);
  
  // theta will oscillate between -1 and 1
  // we want the angle to go from about -45 from vertical to +45 from vertical
  // except we're using radians so -(PI/4) to +(PI/4)
  // ALSO 0 is to the right so add PI/2 to rotate it to the bottom
  // (confession: i used trial and error as i'm bad at radians!)
  float angle = (2 + sin(theta)) * PI * .25;

  // x and y depend on angle
  // LENGTH is the very end
  float x = LENGTH * cos(angle);
  float y = LENGTH * sin(angle);
   
  // With each cycle, increment theta
  theta += 0.05;
   
  // Draw the ellipse at x,y
  fill(0);
  stroke(0);
  line(0, 0, x, y);	  // cord
  ellipse(x, y, 16, 16);   // bulb
  
  // a bauble halfway up swings only half as much
  x = (LENGTH * .5) * cos(angle);
  y = (LENGTH * .5) * sin(angle);
  ellipse(x, y, 8, 8);   // smaller bulb
}
 

so rather than passing x and y and radius to the drawCircle routine you'd only pass a length and the radius and the length would determine the x and y for the centre of the circle.

Well I have what I want now, brilliant. Thank you for taking the time to get this code together. I think with stuff like this you can either do it or you can't.