Fibonacci spiral

General Discussion Other

alejost848

in General Discussion • Other • 7 months ago

Hello everyone, I'm very new to Processing and I have this assignment for my programming class at the university. I have to make a Fibonacci spiral like this:

So I have an image of this teardrop like thing and I need to repeat it itself following this spiral while changing its size.

I really have no idea of how to do it and I have to finish it by tomorrow, any help please?

Replies(10)

tfguy44

Re: Fibonacci spiral

7 months ago

It's not exactly a very neat spiral, is it?

Maybe this will help you...

static float GOLD = .61803398875;
int side = 400;
int count = 10;
void setup(){
int h = side;
int w = int( side + side * GOLD );
size(w,h);
}
void draw(){
background(0);
rec_fibSquare(count);
}
void rec_fibSquare(int i){
if( i==0){ return; } // End case.
noStroke();
fill(255 - (255/count)*i);
rect(0,0,side,side);
translate(side,0);
rotate(-HALF_PI);
translate(-side,0);
scale( GOLD );
rec_fibSquare(i-1);
}

alejost848

Re: Fibonacci spiral

7 months ago

Thanks but... what I need is to know how to displace an object following that spiral. I'm not too good at this :/

tfguy44

Re: Fibonacci spiral

7 months ago

The spiral is really just made up of quarter sections of circles. We can draw those in easily enough:

static float GOLD = .61803398875;
int side = 400;
int count = 10;
void setup(){
int h = side;
int w = int( side + side * GOLD );
size(w,h);
}
void draw(){
background(0);
rec_fibSquare(count);
}
void rec_fibSquare(int i){
if( i==0){ return; } // End case.
noStroke();
fill(255 - (255/count)*i);
rect(0,0,side,side);
noFill();
stroke(random(255),random(255),random(255));
arc(side,0,2*side,2*side,HALF_PI,PI);
translate(side,0);
rotate(-HALF_PI);
translate(-side,0);
scale( GOLD );
rec_fibSquare(i-1);
}

Of course, what you want is imaged placed along those arc sections. To do that, imagine how you would place an image around a circle normally...

void setup(){
size(400,400);
}
void draw(){
background(0);
stroke(255,0,0);
noFill();
translate(200,200);
ellipse( 0,0,360,360);
for( int i=0; i < 40; i++ ){
pushStyle();
rectMode(CENTER);
fill(255,255,0);
noStroke();
rect(180,0,20,20);
rotate(TWO_PI/40);
popStyle();
}
}

Except not a whole circle...

void setup(){
size(400,400);
}
void draw(){
background(0);
stroke(255,0,0);
noFill();
translate(200,200);
ellipse( 0,0,360,360);
rotate(PI);
for( int i=0; i <= 10; i++ ){
pushStyle();
rectMode(CENTER);
fill(255,255,0);
noStroke();
rect(180,0,20,20);
rotate(HALF_PI/10);
popStyle();
}
}

And then... Well, you can finish this now, right?

alejost848

Re: Fibonacci spiral

7 months ago

Thank you very much for your help!

tfguy44

Re: Fibonacci spiral

7 months ago

Heh. Had to fiddle with it just a bit more. And now it looks nice.

static float GOLD = .61803398875;
int side = 400;
int count = 10;
void setup(){
int h = side;
int w = int( side + side * GOLD );
size(w+200,h+200);
}
void draw(){
background(0);
translate(100,100);
rec_fibSquare(count);
}
void rec_fibSquare(int i){
if( i==0){ return; } // End case.
noStroke();
fill(255 - (255/count)*i);
//rect(0,0,side,side);
noFill();
stroke(random(255),random(255),random(255));
arc(side,0,2*side,2*side,HALF_PI,PI);
pushMatrix();
translate(side,0);
rotate(HALF_PI);
for( int k=0; k < 10; k++ ){
pushStyle();
rectMode(CENTER);
fill(255,255,0);
noStroke();
rect(side,0,20,20); // Replace this with whatever your image is.
rotate(HALF_PI/10);
popStyle();
}
popMatrix();
translate(side,0);
rotate(-HALF_PI);
translate(-side,0);
scale( GOLD );
rec_fibSquare(i-1);
}

GoToLoop

Re: Fibonacci spiral

7 months ago

Did some "speed" tweaks on tfguy44's version!

/**
 * Fibonacci Spiral (v3.5)
 * by tfguy44 (2013/Mar)
 *
 * http://forum.processing.org/topic/fibonacci-spiral
 */

final static float GOLD   = .61803398875;
final static short side   = 400;
final static byte  count  = 10, spacing = 10, size = 20;
final static color colour = #00FFFF;

void setup() {
  int h = side;
  int w = round(side + side*GOLD);

  size(w+200, h+200);
  frameRate(10);
  rectMode(CENTER);
  smooth();
}

void draw() {
  background(0);
  translate(100, 100);

  rec_fibSquare(count);
}

void rec_fibSquare(int i) {
  if (i==0)    return;

  noFill();
  stroke( (color) random(0x1000000) | #000000 );
  arc(side, 0, side<<1, side<<1, HALF_PI, PI);

  pushMatrix();

  translate(side, 0);
  rotate(HALF_PI);

  noStroke();
  fill(colour);

  for (int k=0; k!=spacing; k++) {
    rect(side, 0, size, size);
    rotate(HALF_PI/spacing);
  }

  popMatrix();

  translate(side, 0);
  rotate(-HALF_PI);
  translate(-side, 0);
  scale(GOLD);

  rec_fibSquare(i-1);
}

alejost848

Re: Fibonacci spiral

7 months ago

Now, how can I change the size of every single square? Do I have to do an array? or what should I do?

So far all I got is this

float rotation=0;
int x=400;
int y=300;
PImage img;

void setup() {
img = loadImage("Fibonacci.png");
size (800, 600);
frameRate(30);
smooth();
}

void draw() {
background(0);
translate(width/2, height/2);

for (int i=0; i<10; i=i+1) {
    image(img, 100, 10);

    if (i<10) {
      img.resize(40, 62);
      rotate(rotation);

      if (rotation<=0.15) {
        rotation += 0.0005;
      }
    }

}
}

GoToLoop

Re: Fibonacci spiral

7 months ago

In the 's code, the command which scales down the squares is -> scale(GOLD);
But it doesn't work on PImages/ PGraphics.

Corresponding command would be -> img.resize(GOLD); I believe.

Problem is that you would need to keep an original copy to reset the image to its original size.

Use something like imgBkp = img.get(); for it.

alejost848

Re: Re: Fibonacci spiral

7 months ago

Problem is GOLD is a float and img.resize only allows integers. :/

GoToLoop

Re: Fibonacci spiral

7 months ago

To convert to an int, you can use a cast operator ( int), function int(),
and other more specialized functions like round(), floor() and ceil().

But now I've come to realize that it wouldn't matter anyways,
b/c GOLD would become either 0 or 1 w/ any of them.

You see, resize() uses absolute dimensions instead of relative ones.

My guess would be to multiply current image's width & height by GOLD.
And only then, apply their rounded values to resize()!

Something like this:
img.resize( img.width*GOLD, img.height*GOLD );

Top Reply