for loop to make a spiral

edited October 2015 in How To...

how to draw a spiral using line and for loop

Answers

  • edited October 2015

    highlight code, press ctrl-o.

    we can do nothing with it how it is.

  • edited October 2015

    I just know how to draw ugly spirals using points, if this of any help

        int r = 100;
        int cx;
        int cy;
        int a = 0.05;
        void setup() {
            size(400, 400);
            cx = width / 2;
            cy = height / 2;
    
        }
    
        void draw() {
            for (int i = 0; i < 10000; i++) {
                float t = radians(i);
                x = cx + a * t * r * cos(t);
                y = cy + a * t * r * sin(t);
                point(x, y);
            }
        }
    
  • I think you did not test the code, because a would have to be float and x and y are not declared. But the rest seems to draw a proper spiral and by connecting the dots it would do exactly what was requested.

    Here is another way, might not be what was asked for, but it's a spiral and it uses a for-loop and line()...

    size(400, 400);
    strokeWeight(0.1);
    
    translate(width/2, height/2);
    
    for (int i = 0; i < 1000; i++) {
      rotate(0.1);
      scale(1.01);
      line(10, -15, 10, 15);
    }
    
  • edited October 2015 Answer ✓

    Ah, that's right. I've written the code on openprocessing, as I have no PDE here, and it worked, so I just pasted it here. Thtat's because javascript is less strict. Let me correct the code:

        int r = 100;
        int cx;
        int cy;
        float a = 0.05;
    
        void setup() {
            size(400, 400);
            cx = width / 2;
            cy = height / 2;
        }
    
        void draw() {
            for (int i = 0; i < 10000; i++) {
                float t = radians(i);
                float x = cx + a * t * r * cos(t);
                float y = cy + a * t * r * sin(t);
                point(x, y);
            }
        }
    
  • Thtat's because javascript is less strict.

    JS doesn't care which type we "declare" some variable.
    It only cares the type we're assigning to that variable.
    Variables are themselves typeless!

  • i am trying to understand the code, and dont really get how the equation in x, and y . is it possible to make it a bit clearly ?

  • edited October 2015 Answer ✓

    Yes, it is, actually. Here's a basic spiral for you, made of 10000 points.

    void setup() {
      size(400, 400);
    }
    
    void draw() {
      translate(width/2, height/2);
      for (int i = 0; i < 10000; i++) {
        float t = radians(i);
        float x = t * cos(t);
        float y = t * sin(t);
        point(x, y);
      }
    }
    

    As we go round and round the center, the points get further and further away from the center. If the radians thing is tripping you up, have a look at this one:

    void setup() {
      size(400, 400);
    }
    
    void draw() {
      translate(width/2, height/2);
      for (float t = 0; t < 2*TWO_PI; t+=0.1 ) {
        float x = t * cos(t);
        float y = t * sin(t);
        point(x, y);
      }
    }
    

    Here we have points that go around the spiral twice (2 * TWO_PI). Hopefully this makes some sort of sense to you...

  • if i want to connect each of the points by line, is it possible to do so.

  • Yes, but you might not get as nice a spiral as you would like.

    void setup() {
      size(400, 400);
      smooth();
    }
    
    void draw() {
      float t,tt;
      translate(width/2, height/2);
      for (int i = 0; i < 10000; i++) {
        t = radians(i);
        tt = radians(i+1);
        line(t*cos(t),t*sin(t),tt*cos(tt),tt*sin(tt));
      }
    }
    

    You might have better luck using curveVertex()...

  • it is not really as i expected :( thanks a lot for your help thanks all of you

  • edited October 2015

    file:///Users/mikanguyen/Desktop/lab5_work_on/lab5_work_on.pde

  • And we can't fix it for you because you've posted an IMAGE of your code instead of the code itself. Paste. Select. Ctrl+o to format.

  • edited October 2015
    int centerX = 250;
    int centerY =250;
    int drawsteps = 250;
    void setup() {
      size(500, 500);
    }
    
    void draw() {
     beginShape();
      for (float t = 0; t < drawsteps *TWO_PI; t+=5 ) {
        float x = centerX + t * cos(t);
        float y = centerY + t * sin(t);
        float u = centerX + (t+5) * cos(t+5);
        float s = centerX + (t+5) * sin(t+5);
        curveVertex(x, y);
        line(x,y,u,s);
      }
      endShape();
    
    }
    
  • in somehow i could post the code nicely as you all post ?

  • i fixed it

  • Hm. Spirals are hard. This one looks ok. You'll just have to fiddle with the variables until you get the kind you want. Keep looking. You're feeling very sleepy. Send all your money to me via paypal. When I snap my fingers you will think you are a chicken.

    int drawsteps = 20;
    void setup() {
      size(500, 500);
      noStroke();
      fill(0);
      smooth();
    }
    
    void draw() {
      background(255);
      translate(width/2,height/2);
      rotate(map(millis()%2000,0,2000,0,TWO_PI));
     beginShape();
      for (float t = 0; t < drawsteps *TWO_PI; t+=PI/360.0 ) {
        float x = 4 * t * cos(t);
        float y = 4 * t * sin(t);
        ellipse(x,y,3,3);
      }
      endShape();
      //filter(BLUR,3);
     //noLoop();
    
    }
    
  • :))) i am actually super dizzy when i play the code you wrote. so cool. thanks a lot for your help. i will try to change around until i get what i want. ^^. but these codes here helped me a lot. thanks again

  • edited November 2017

    A spiral... with a twist!

    final int NUM_LINES = 500;  
    float maxRadius;            
    final int NUM_TURNS = 10;  
    float startAngle = 0;       
    final float START_ANGLE_CHANGE = 0.5; 
    float x;
    float y;
    
    
    void setup() {
      size(500, 500);
      maxRadius = sqrt(sq(width/2)+sq(height/2)); 
    }
    
    void draw() {
      background(255);
      float xp=width/2;
      float yp=height/2;
      for(int i = 0; i<NUM_LINES;i++){    
        x = width/2+i*cos((i+startAngle)*NUM_TURNS*TWO_PI/maxRadius);
        y = height/2+i*sin((i+startAngle)*NUM_TURNS*TWO_PI/maxRadius);
        line(x,y,xp,yp);
        xp=x;
        yp=y;
      }
      startAngle+=START_ANGLE_CHANGE;
    }
    
  • This is my attempt (For my own records) trying to create a smoother version. This requires to have longer/coarser steps in the inner section of the spiral.

    Kf

    final int NUM_LINES = 500;             
    final int NUM_TURNS = 10;      
    final float START_ANGLE_CHANGE = 0.5;
    final float CURVERES=0.25;  //Curve step resolution
    
    float startAngle = 0;   
    float maxRadius;
    
    void setup() {
      size(500, 500);
      maxRadius = sqrt(sq(width/2)+sq(height/2));  
    }
    
    void draw() {
      background(255);
      beginShape();
      for (float i = 0; i<NUM_LINES; ) { 
        curveVertex(px(i), py(i));
        i+=pow(map(i,0,500,1.5,1),2)*CURVERES;
      }
      endShape();
      startAngle+=START_ANGLE_CHANGE;
    }
    
    
    float px(float i) {
      return width/2+i*cos((i+startAngle)*NUM_TURNS*TWO_PI/maxRadius);
    }
    
    float py(float i) {
      return height/2+i*sin((i+startAngle)*NUM_TURNS*TWO_PI/maxRadius);
    }
    
    void mousePressed() {
      looping=!looping;
    }
    
Sign In or Register to comment.