Little stuck on a concept

[Jamii]

I’m really new to processing and I have an idea I want to execute but I’m not too sure where to start in general. I haven’t started just I’m just wondering if anyone has tips on how to do it.

I want to create a maze-like pattern but not based on a grid, I want lines to protrude from the middle then slowly make it’s way outwards, or just generally “point” towards the middle. They’re supposed to be zig-zag lines that are rigid and I don’t want them to be continuous.

somewhat like this.

Any suggestions?

[SomeOne]

You have a nice idea there. And it’s doable. So you want to start drawing lines from center and grow them randomly outwards.
Can lines cross? If not does line stop before collision or will it change direction instead?
Do all lines grow at the same time or just one (or any other limited set)?

Very common pattern in processing sketches is to clear canvas and draw everything repeatedly in draw() cycle. Reason for this is that it’s very easy to add graphical elements in processing, but very difficult to remove them (what is underneath the removed element?). In your case you don’t necessarily need to remove anything, so you could just add to end of lines.

In both cases you will need a datastructure to store information about lines, especially of the end point (x, y), perhaps the direction it is going, possibly the speed too.

Perhaps you should try to draw one random line with noise (Reference / Processing.org), add a second line and then put 10 or 20 lines to a datastructure and draw them from it.

[Chrisir]

example

but still a long way to go

hit any key to redraw

// -----------------------------------------------------

void setup() {
  size (1400, 800);
  background(0);
}

void draw() {
  // clear & prepare canvas 
  background(0); 

  stroke(255);
  myLine( 13 );
  myLine( 83 );
  myLine( 223 );
  myLine( 293 );
  myLine( 323 );

  noLoop();
}

void keyPressed() {
  redraw();
}

void myLine(float angle) {
  // float angle=50; 
  float angle2=radians(angle);

  float xCenter=cos(angle2) * random(11, 29) + width/2;
  float yCenter=sin(angle2) * random(11, 29) + height/2;

  // radius 1 
  float r1 = random(37, 290); 
  float x=cos(angle2) * r1 + xCenter;
  float y=sin(angle2) * r1  + yCenter;

  line(xCenter, yCenter, 
    x, y);

  pushMatrix();
  translate(x, y); 
  float angle3 = give90orminus90() ; 
  rotate(radians(angle+angle3)); 
  float r2=random(37, 290); 
  line(0, 0, r2, 0);

  translate(r2, 0); 
  rotate(radians(- angle3 ));
  line(0, 0, 155, 0);

  translate(155, 0); 
  rotate(radians(give90orminus90()  ));
  line(0, 0, 35, 0);

  popMatrix();
} 

float give90orminus90() {
  if (random(100)<50)
    return 90;
  else return -90;
} 

[Jamii]

Thank you this was actually very useful as a reference, and I really appreciate you going out of the way to make that. On that note, I got it to what I wanted it to structure (like I adjusted the shape and angles), then I copied and pasted it to basically do another layer. (not sure if there was any other way to do that).

But is there a way to make sure the lines don’t touch each other?

[Chrisir]

It would be easiest to store all lines (ArrayList of a class) and before you draw a new line make a collision check line/line against all previous lines.

• Draw and store the new line when there’s no collision.

[scudly]

So you want something like this:

If you keep your line segments short, then you only need to ensure that the endpoints are far enough away from each other to avoid overlaps. That’s simpler than testing line segments for overlap.

I start with a bunch of paths with endpoints concentrated near the middle. Each endpoint has a position and the index of the prior endpoint it’s connected to (the first one has a prior of null or -1, depending on how you implement it).

Run through all the paths adding a new endpoint in a random direction from the last with a bias away from the origin making sure that the new point is some distance away from all previous endpoints. Think of the endpoints as circles and you want to make sure that each new one doesn’t overlap any of the previous circles. Take a few attempts to place the new endpoint and if you can’t find a clear spot or if you hit the edge of the screen, stop that path. Keep looping until all paths have stopped.

Draw all the paths from the last endpoint chasing through their prior indexes until you hit the starting points (where the next is null or -1).

This is basically a non-branching version of how I make mazes. See my twitter feed for some of the variety you can get out of this algorithm.

[Leoperix03]

hi, I tried to do it with Objects, so that you can store the data from the lines in a clean way, of course, there is still much to do, mostly with the spawn system and the offset, but I think this might be useful

P.S. someone flagged my post and I don’t know why, I guess someone CAN be offended by lines of code lol, anyway, before flagging me at least tell me why

int I = 10;
Line[] l = new Line[I];

float offset = 50;

void setup(){
  size(900, 900);
  for(int i=0;i<I;i++){
    l[i] = new Line(width/2 + random(-offset, offset), height/2 + random(-offset, offset), i * 360 / I, round(random(10, 50)));
  }
}
void draw(){
  for(int i=0;i<I;i++){
    l[i].add_pos();
    l[i].show();
  }
}


class Line{
  float px, py; // starting point
  int lifespan = 10; // arbitrary lifespan of the line, could be changed to be random
  int life_soFar = 0;//this is the counter for the lifespan, when this is == lifespan, the line stops to grow
  float a_limit = PI / 3; //limit angle of steer for each iteration, if it's very small, the line will be almost straight, it's RADIANS
  float a = 0;
  float step = 15;//how far is a turn from another
  float dir = 0;//the direcion of the line, otherwise all the lines would be parallel and point to hte right 
  
  ArrayList<PVector> pos; // the line is made of a dynamic array of Vectors that stores every point of this line
  color c = color(255,0,0); // this can be whatever...
  
  Line(float px, float py, float dir, int lifespan){ // dir input is in DEGREES, but the variable gets conveted in RADIANS
    this.px = px;
    this.py = py;
    pos = new ArrayList<PVector>();
    this.dir = radians(dir);
    this.lifespan = lifespan;
  }
  
  void add_pos(float a_l){ // a_l is called here so that you can change dynamicaly the amplitude of the angle_limit while you get further
    if(life_soFar < lifespan){
      a = random(-a_l, a_l);
      if(pos.size() > 0){
        int I = pos.size() -1;
        pos.add(new PVector(pos.get(I).x + step * cos(a + dir), pos.get(I).y + step * sin(a + dir)));// from the prev position, it moves a fraction of the step on the x, and on the y
      }else{
        pos.add(new PVector(px + step * cos(a + dir), py + step * sin(a + dir)));// first step is from the starting point
      }
      life_soFar++;
    }
  }
  void add_pos(){
    add_pos(a_limit);
  }
  
  void show(){
    if(pos.size() > 0){
      stroke(c);
      for(int j=1;j<pos.size(); j++){
        line(pos.get(j-1).x, pos.get(j-1).y, pos.get(j).x, pos.get(j).y);
      }
      noStroke();
    }
  }
  
  
}