Making an array of closed curves ?

With a combination of few lines of code I find on the internet, I tried to generate concentric closed curves (looking like irregular circles in the inside of a tree). Instead of drawing multiple curves, I only manage to draw one spiral closing at the end... How could I fix that ?

Here is the code :

import java.util.Iterator;

ArrayList coords;
int num = 10; 
int rad = 10; 


void setup() {
  size(600, 400);
  coords = new ArrayList();
  smooth();

  for (int inter = 0; inter < 300; inter+= 20) {
    for (float a=0; a<=TWO_PI; a+=TWO_PI/num) {
      coords.add(new PVector(cos(a)*(rad + inter) *(noise(a/10)), sin(a)*(rad + inter)*(noise(a/10))));
    }
  }
}

void draw()
{
  background(255);
  strokeWeight(2);
  stroke(#8b8378);
  fill(#ffefdb);


  translate(width/2, height/2);

  beginShape();
  for (Iterator i = coords.iterator(); i.hasNext(); ) {
    PVector p = (PVector)i.next();
    curveVertex(p.x, p.y);
  }       
  for (int i=0; i<3; i++) { 
    PVector p = (PVector)coords.get(i);
    curveVertex(p.x, p.y);
  }
  endShape(CLOSE);
}

Thanks !

Answers

  • import java.util.Iterator;
    
    ArrayList<PVector> coords;
    
    int num = 10; 
    int rad = 10; 
    
    
    void setup() {
      size(600, 700);
      coords = new ArrayList();
      smooth();
    
      for (int inter = 0; inter < 300; inter+= 20) {
        for (float a=0; a<=TWO_PI; a+=TWO_PI/num) {
          PVector newPV = new PVector(cos(a)*(rad + inter) *(noise(a/10)), 
            sin(a)*(rad + inter)*(noise(a/10)));  
          coords.add( newPV );
        }
      }
      println(coords.size());
    }
    
    void draw()
    {
      background(255);
    
      strokeWeight(2);
      stroke(#8b8378);
      fill(#ffefdb);
    
    
      translate(width/2, height/2);
    
      beginShape();
    
      //for (Iterator i = coords.iterator(); i.hasNext(); ) {
      //  PVector p = (PVector)i.next();
      //  //curveVertex(p.x, p.y);
    
      //  for (int i2=0; i2<3; i2++) { 
      //    p = coords.get(i2);
      //    curveVertex(p.x, p.y);
      //  }
      //}
    
      for (PVector p : coords) 
        curveVertex(p.x, p.y);
    
      endShape();
    }
    
  • in draw() you were overthinking things a bit.

    Since you add stuff to the coords, you can just read it from there and don't need a double for-loop in draw() anymore

    main aspect was to get rid of CLOSE in endShape();

    I also told the ArrayList its type (ArrayList<PVector> coords;), so no need to cast it

  • Thanks for your answer ! But it still draws a spiral instead of multiple concentric and irregular circles... All I did between the beginShape() and and the endShape() was in order to have every circles to close...

  • doesn't work but should be the right idea....

    import java.util.Iterator;
    
    ArrayList<PVector> coords;
    
    int num = 10; 
    int rad = 10; 
    
    
    void setup() {
      size(1200, 900);
      coords = new ArrayList();
      //smooth();
    
      for (int inter = 0; inter < 300; inter+= 20) {
        for (float a=0; a<=TWO_PI; a+=TWO_PI/num) {
          PVector newPV = new PVector(cos(a)*(rad + inter) *(noise(a/10)), 
            sin(a)*(rad + inter)*(noise(a/10)));  
          coords.add( newPV );
        }
      }
      println(coords.size());
    }
    
    void draw()
    {
      background(255);
    
      strokeWeight(2);
      stroke(#8b8378);
      fill(#ffefdb);
    
      stroke(255, 2, 2); 
    
      // noFill(); 
    
      translate(width/2, height/2);
      //scale(2);
    
    
      for (int i2=0; i2<coords.size()-3; i2=i2+3) {
    
        beginShape();
    
        PVector p = coords.get(i2);
        curveVertex(p.x, p.y);
        println(p.x, p.y);
    
        PVector p2 = coords.get(i2+1);
        curveVertex(p2.x, p2.y);
        println(p2.x, p2.y);
    
        p2 = coords.get(i2+2);
        curveVertex(p2.x, p2.y);
    
        endShape();
      }//for
      noLoop();
    }
    //
    
  • I dont understand why, but it seems to display the whole thing way out of the screen and nothing like scale, constrain or map seems to work here.. I didn't know it would have been so difficult just to draw some irregular circles in processing !

  • The idea here is that you group content to circles here....

    so when in draw(), you need to read them out group by group...

    That's what I try here....

  • I understand the idea but I can't find a way to make it work...

  • you're adding 15 different rings' worth of coordinates to a single list.

    and then, when you come to use them in draw(), you are treating the whole thing as one shape. hence the spiral.

    i'd add the distinct rings to distinct lists (or arrays, given that you know the size) and then iterate over those in draw.

    and then you'll realise that you only see the out loop because you're using fill() and that's overwriting the inner loops...

    (and use noLoop() if the drawing doesn't change with time)

  • here i've gotten rid of the storing of the coords and just moved the callculations to the curvevertex call.

    not sure yet why the circles are not circular, probably something to do with the noise.

    int num = 10; 
    int rad = 10; 
    
    void setup() {
      size(600, 400);
      smooth();
      noLoop();
    }
    
    void draw()
    {
      background(255);
      strokeWeight(2);
      stroke(#8b8378);
      noFill();
    
      translate(width/2, height/2);
    
      for (int inter = 0; inter < 300; inter += 20) {
        beginShape();
        for (float a = 0 ; a <= TWO_PI ; a += TWO_PI / num) {
          curveVertex(cos(a) * (rad + inter) * noise(a / 10), sin(a) * (rad + inter) * noise(a / 9));
        }
        endShape(CLOSE);
      }
    }
    
  • ok, the curves aren't complete because the first and last control points are ignored, they just serve to set the curve at the ends.

    https://processing.org/reference/curveVertex_.html

  • Thanks for your help koogs ! The issue is now to close smoothly each circle.. I want them to be irregular (with the noise) but not to be closed with a straight line ! And to do that, the last 3 curveVertex need to have the same coordinates as the first 3...

  • To control the coordinates of the 3 last vertex I think I will have no other choice than to store them in an array list...

  • I finally managed to do it, but the ridiculous way. Thank you both for your help, don't hesitate if you have ideas to make it shorter !

    Here it is :

    float x1 = 0, x2 = 0, x3 = 0, x4 = 0, x5 = 0, x6 = 0, x7 = 0, x8 = 0, x9 = 0, x10 = 0; 
    float y1 = 0, y2 = 0, y3 = 0, y4 = 0, y5 = 0, y6 = 0, y7 = 0, y8 = 0, y9 = 0, y10 = 0; 
    int rad = 10; 
    
    int r = 5;
    
    void setup() {
      size(800, 800);
      smooth();
      noLoop();
      background(255);
    }
    
    void draw() {
    
      strokeWeight(2);
      stroke(#8b8378);
      noFill();
    
      translate(width/2, height/2);
    
      x1 = cos(0.63) * noise(0.63 / r); 
      y1 = sin(0.63) * noise(0.63 / r);
      x2 = cos(2*0.63) * noise(2*0.63 / r); 
      y2 = sin(2*0.63) * noise(2*0.63 / r);
      x3 = cos(3*0.63) * noise(3*0.63 / r); 
      y3 = sin(3*0.63) * noise(3*0.63 / r);
      x4 = cos(4*0.63) * noise(4*0.63 / r); 
      y4 = sin(4*0.63) * noise(4*0.63 / r);
      x5 = cos(5*0.63) * noise(5*0.63 / r); 
      y5 = sin(5*0.63) * noise(5*0.63 / r);
      x6 = cos(6*0.63) * noise(6*0.63 / r); 
      y6 = sin(6*0.63) * noise(6*0.63 / r);
      x7 = cos(7*0.63) * noise(7*0.63 / r); 
      y7 = sin(7*0.63) * noise(7*0.63 / r);
      x8 = cos(8*0.63) * noise(8*0.63 / r); 
      y8 = sin(8*0.63) * noise(8*0.63 / r);
      x9 = cos(9*0.63) * noise(9*0.63 / r); 
      y9 = sin(9*0.63) * noise(9*0.63 / r);
      x10 = cos(10*0.63) * noise(10*0.63 / r); 
      y10 = sin(10*0.63) * noise(10*0.63 / r);
    
      for (int inter = 0; inter < 600; inter += random(15, 22)) {
        beginShape();
        curveVertex(x1* (rad+inter), y1* (rad+inter));
        curveVertex(x2* (rad+inter), y2* (rad+inter));
        curveVertex(x3* (rad+inter), y3* (rad+inter));
        curveVertex(x4* (rad+inter), y4* (rad+inter));
        curveVertex(x5* (rad+inter), y5* (rad+inter));
        curveVertex(x6* (rad+inter), y6* (rad+inter));
        curveVertex(x7* (rad+inter), y7* (rad+inter));
        curveVertex(x8* (rad+inter), y8* (rad+inter));
        curveVertex(x9* (rad+inter), y9* (rad+inter));
        curveVertex(x10* (rad+inter), y10* (rad+inter));
        curveVertex(x1* (rad+inter), y1* (rad+inter));
        curveVertex(x2* (rad+inter), y2* (rad+inter));
        curveVertex(x3* (rad+inter), y3* (rad+inter));
        endShape(CLOSE);
      }
    }
    
  • int num = 10; 
    int rad = 10; 
    int r = 5;
    PVector[] points;
    
    void setup() {
      size(800, 800);
      noLoop();
      smooth();
      background(255);
    
      points = new PVector[num];  
      for(int i = 0; i < num; i++) {
        points[i] = new PVector(cos((i+1)*0.63) * noise((i+1)*0.63 / r), sin((i+1)*0.63) * noise((i+1)*0.63 / r)); 
      }
    }
    
    void draw()
    {
      strokeWeight(2);
      stroke(#8b8378);
      noFill();
    
      translate(width/2, height/2);
    
      for (int inter = 0; inter < 600; inter += random(15, 22)) {
        beginShape();
        for (int i = 0; i < num+3; i++) {
          curveVertex((rad+inter)*points[i%num].x, (rad+inter)*points[i%num].y);            
        }
        endShape(CLOSE);
      }
    }
    
  • Thank you so much BarbaraAlmeida, that's exactly what I was looking for ! :)

Sign In or Register to comment.