Continuous Random Line

humano · May 30, 2021, 8:03pm

Hi there!

I would like to create a drawing with a line with random points , something similar to the picture attached. I have found a Code and I am trying but It does not work. Can you please help me with that and tell me what I need to change? Thank you so much

int startX = 100;
int startY = 100;
int endX = 200;
int endY = 200;

int firstX = startX;
int firstY = startX;

int totalLines = 12;

void setup() {
size(400, 400);
background(255);
noLoop();
}

void draw() {

for (int x=0; x< totalLines;x++) {
strokeWeight(2);
stroke(0);
strokeJoin(ROUND);
startX = endX;
startY = endY;

endX = int(random(0, 0));
endY = int(random(0, 0));

liner(endX, endY, startX, startY);

}
}

void liner(int x1, int y1, int x2, int y2) {
line(x1, y1, x2, y2);
pushMatrix();
translate(x2, y2);
popMatrix();
}

Flolo · May 30, 2021, 8:36pm

I think you’re making it a little too difficult for yourself.

I made an example here of how I would do it:

Click to see the code

//ArrayList is just an Array but you can add and remove points
//<Class> says what type of arrayList you want to have
//And PVector is a class of processing (in short a class with 2 floats x and y)
ArrayList<PVector> points;

void setup() {
  size(800, 800);//Set the window size
  points = new ArrayList<PVector>();
  //We have to add same Points to the arrayList.
  int count = 5;
  for (int i = 0; i < count; i++) {
    //Creates a Vector with an, x and y value (float)
    PVector p = new PVector(random(width), random(height));
    //adds the created PVector
    points.add(p);
  }
}
void draw() {
  background(0);
  //There are two types of for loops to show each point
  //the first 
  //PVector.size() is the same of array.length()
  noFill();
  stroke(255);
  strokeWeight(2);
  //shows the line
  beginShape();
  for (int i = 0; i < points.size(); i++) {
    //.get(i) is the same of array[i]
    PVector currentPoint = points.get(i);
    //add a point in the shape
    vertex(currentPoint.x, currentPoint.y);
  }
  endShape();
  //the second
  //for( the class then a space then the name of the variable : and the array or the arraylist
  //shows the points
  for (PVector currentPoint : points) {
    stroke(255);
    strokeWeight(10);
    point(currentPoint.x, currentPoint.y);
  }
}
void mousePressed() {
  //and when you click the mouse you can add a point linke this:
  PVector p = new PVector(mouseX, mouseY);
  points.add(p);
  //easy right?
}

I hope I could help you

humano · May 30, 2021, 8:50pm

Thank you so much, but I don’t want to draw the line, what I want is a Code that designs a random line as you can see it in the picture.

glv · May 30, 2021, 9:14pm

Hello @humano ,

Please format your code:
https://discourse.processing.org/faq#format-your-code

Please link to the original work if that is your starting point.
I did find the original work and it does credit the authors and the code works.
You may have a copy of a copy that does not work.
This is not the best example and could be simplified further for better understanding.

This is an exercise that is achievable and worth trying on your own.

Simple example (incomplete):

int startX = 0;
int startY = 0;

int endX = 0;
int endY = 0;

int firstX = 100; // Can be used later to close the lines.
int firstY = 100; 

// Setup() runs once! See reference.
void setup() 
  {
  size(400, 400);
  background(255);
  
  int startX = firstX;
  int startY = firstY;
  
  frameRate(1); //Slows things down for testing! See reference.
  }

// Draw() loop. See reference.
void draw() 
  {
  strokeWeight(2);
  stroke(0);
  
  println("Start points:", endX, endY);  

  // Set random endpoints here:
  // Add your code here...

  println("End points:", endX, endY);
  println();
  
  line(startX, startY, endX, endY);
  
  // Set start point x,y to end x, y for start of draw() cycle here:
 // Add your code here...

  //println("Start points:", endX, endY);  //Moved to start since it loops around
  }

Start simple, understand each element of the code and build on that… :)

There are lots of resources (tutorials, references, examples, etc.) here:
processing.org

Check out the examples that come with Processing.
These are in the menu under File > Examples…> :

:)

Flolo · May 30, 2021, 9:19pm

You mean like that:

?

//ArrayList is just an Array but you can add and remove points
//<Class> says what type of arrayList you want to have
//And PVector is a class of processing (in short a class with 2 floats x and y)
ArrayList<PVector> points;

void setup() {
  size(800, 800);//Set the window size
  points = new ArrayList<PVector>();
  //We have to add same Points to the arrayList.
  int count = 10;
  for (int i = 0; i < count; i++) {
    //Creates a Vector with an, x and y value (float)
    PVector p = new PVector(random(width), random(height));
    //adds the created PVector
    points.add(p);
  }
  PVector p = points.get(0); // get the first point
  points.add(p);//add the same point add the add
  noLoop();
  selectOutput("Select output: ", "outputSelected");
}
void outputSelected(File f) {
  if (f == null) return;
  saveFrame(f.getAbsolutePath() + ".png");
}
void draw() {
  background(0);
  //There are two types of for loops to show each point
  //the first 
  //PVector.size() is the same of array.length()
  noFill();
  stroke(255);
  strokeWeight(2);
  //shows the line
  beginShape();
  for (int i = 0; i < points.size(); i++) {
    //.get(i) is the same of array[i]
    PVector currentPoint = points.get(i);
    //add a point in the shape
    vertex(currentPoint.x, currentPoint.y);
  }
  endShape();
  //the second
  //for( the class then a space then the name of the variable : and the array or the arraylist
  //shows the points
  for (PVector currentPoint : points) {
    stroke(255);
    strokeWeight(10);
    point(currentPoint.x, currentPoint.y);
  }
}

humano · May 31, 2021, 7:31am

Actually I am doing everything with Android processing app and anything works when I press play, neither original Code from
http://recodeproject.com/artwork/v2n3typical-continuous-line-designs

I am really beguinner, could you please show me a tutorial ir some of then for lines and random points? It Would be very good to find something really básico

glv · May 31, 2021, 10:03am

Hello,

You may want to change category to Processing for Android.
Most of the basic sketches I write work on my Android.

Which one are you using?

The tutorials on the Processing website may be a good start:
https://processing.org/tutorials/

This one discusses shapes and lines:
https://processing.org/tutorials/drawing/

There are other tutorials you may want to visit first.

Looking through all the resources can be very helpful!

I encourage you to look up the reference for each method\function in your code:

Variable Scope / Examples / Processing.org
setup()
draw()
background() This needs to be understood.
random()
line()
And the related references at the bottom of each page.

The Coding Train has tutorials:

Happy Coding:

Other links from a search:

Enjoy the journey.
We were all beginners and I feel like one with each new coding challenge.

:)

humano · June 1, 2021, 10:30am

Thank u so much, these tutorials are really useful! I have been able to write an extremely simple Code to do 6 randoms lines connected, as I was looking for:

void setup() {
  size(600, 600);
  background(255,255,255);
  
  float x1 = random(0, 600);
  float y1 = random(0, 600);
  float x2 = random(0, 600);
  float y2 = random(0, 600); 
  float x3 = random(0, 600);
  float y3 = random(0, 600);
  float x4 = random(0, 600);
  float y4 = random(0, 600);
  float x5 = random(0, 600);
  float y5 = random(0, 600);
  float x6 = random(0, 600);
  float y6 = random(0, 600);  
  float x7 = random(0, 600);
  float y7 = random(0, 600);
  float x8 = random(0, 600);
  float y8 = random(0, 600);
  float x9 = random(0, 600);
  float y9 = random(0, 600); 
  float x10 = random(0, 600);
  float y10 = random(0, 600);
  float x11 = random(0, 600);
  float y11 = random(0, 600);
  float x12 = random(0, 600);
  float y12 = random(0, 600);
  
  stroke(0, 0, 0);
  strokeWeight(3);
  line(x1, y1, x2, y2);
  line(x2, y2, x3, y3);
  line(x3, y3, x4, y4);
  line(x4, y4, x5, y5);
  line(x5, y5, x6, y6);
  line(x6, y6, x7, y7);
  line(x7, y7, x8, y8);
  line(x8, y8, x9, y9);
  line(x9, y9, x10, y10);
  line(x10, y10, x11, y11);
  line(x11, y11, x12, y12);
  line(x12, y12, x1,y1);
  }

VOIDupgraded · June 1, 2021, 10:59am

I think you can simplify further by using vertex and shape.

void setup() {
  size(100, 100);
  frameRate(5);
}
void draw() {
  background(255);

  noFill();
  stroke(0);

  beginShape();
  vertex(random(5, 95), random(5, 95));
  vertex(random(5, 95), random(5, 95));
  vertex(random(5, 95), random(5, 95));
  vertex(random(5, 95), random(5, 95));
  endShape(CLOSE);
}

P.S.: You can add as many vertex as you want.

You got my brain kicking a bit, I’m sure there is a better way to do this, but you can do something like this to randomly add more lines or not, since it seemed you tried to do it in your original code, or I read everything wrong but here you go:

int moreLines = 0;

void setup() {
  size(100, 100);
  frameRate(5);
}
void draw() {
  background(255);

  noFill();
  stroke(0);

  moreLines = int(random(0, 3));

  beginShape();
  vertex(random(5, 95), random(5, 95));
  vertex(random(5, 95), random(5, 95));
  vertex(random(5, 95), random(5, 95));
  if (moreLines == 1) {
    lineA();
  }
  if (moreLines == 2) {
    lineB();
  }
  if (moreLines == 3) {
    lineC();
  }
  endShape(CLOSE);
}

void lineA() {
  vertex(random(5, 95), random(5, 95));
}

void lineB() {
  vertex(random(5, 95), random(5, 95));
  vertex(random(5, 95), random(5, 95));
}

void lineC() {
  vertex(random(5, 95), random(5, 95));
  vertex(random(5, 95), random(5, 95));
  vertex(random(5, 95), random(5, 95));
}

humano · June 1, 2021, 11:20am

I see, but is not really the kind of design that I was looking for, my Code is Boring but closer to the drawing that I want. Now I would like to colour the polygons shaped betweens lines. I know that Vertex could be easier, the problem is that I want to create polygons connected like in the picture and I dont know how could I calculate that with Shapes

VOIDupgraded · June 1, 2021, 11:23am

Hm… I would make several shapes with common vertex (1 or more) to simulate that they are connected, that way in the code they would still be able to be colored individually.

In a quick way I was able to put this together, and you can mix it with the more lines stuff I did before to make more complex shapes, and I suggest that more than one common vertex is used so it appears more like one single shape.

int moreShapes, jointX, jointY;

void setup() {
  size(400, 400);
  frameRate(5);
}
void draw() {
  background(255);

  fill(255, 0, 0);
  stroke(0);

  moreShapes = int(random(0, 3));
  jointX = int(random(5, 395));
  jointY = int(random(5, 395));

  beginShape();
  vertex(random(5, 395), random(5, 395));
  vertex(random(5, 395), random(5, 395));
  vertex(jointX, jointY);
  endShape(CLOSE);

  if (moreShapes == 1) {
    shapeA();
  }
  if (moreShapes == 2) {
    shapeB();
  }
}

void shapeA() {
  fill(0, 255, 0);

  beginShape();
  vertex(random(5, 395), random(5, 395));
  vertex(random(5, 395), random(5, 395));
  vertex(jointX, jointY);
  endShape(CLOSE);
}

void shapeB() {
  fill(0, 0, 255);

  beginShape();
  vertex(random(5, 395), random(5, 395));
  vertex(random(5, 395), random(5, 395));
  vertex(jointX, jointY);
  endShape(CLOSE);
}

humano · June 1, 2021, 11:38am

That is exactly the first idea that I had

void setup() {
  size(600, 600);
  noStroke ();
  background(255,255,255);
  
  float x1 = random(0, 600);
  float y1 = random(0, 600);
  float x2 = random(0, 600);
  float y2 = random(0, 600);
  float x3 = random(0, 600);
  float y3 = random(0, 600);
  float x4 = random(0, 600);
  float y4 = random(0, 600);
  float x5 = random(0, 600);
  float y5 = random(0, 600);
  float x6 = random(0, 600);
  float y6 = random(0, 600);
  
  
  
  fill(random(0, 255), random(0, 255), random(0,255));
  beginShape();
  vertex(x1,y1);
  vertex(x2,y2);
  vertex(x3,y3);
  endShape();
  
  fill(random(0, 255), random(0, 255), random(0,255));
  beginShape();
  vertex(x3,y3);
  vertex(x4,y4);
  vertex(x5,y5);
  endShape();
  
  fill(random(0, 255), random(0, 255), random(0,255));
  beginShape();
  vertex(x4,y4);
  vertex(x5,y5);
  vertex(x6,y6);
  endShape();
  
  
  }

But I would like to fill the whole screen with polygons, so I dont know how could I do that with all of the VertexEs

VOIDupgraded · June 1, 2021, 11:48am

For that I suggest something like this (sorry for the lousy paint drawing).
Create several shapes with vertex fixed along the stage border (red),
and only the center ones are changed (green).
Untitled
After I thing it’s just the boring part of tweaking stuff to sell the effect.

KartikSoneji · June 5, 2021, 2:57pm

@humano I think you will be interested in Voronoi diagrams.

There are several implementations of the algorithm:
https://rosettacode.org/wiki/Voronoi_diagram
https://algorist.com/problems/Voronoi_Diagrams.html

humano · June 5, 2021, 3:58pm

Thank u so much! I Will check it

humano · June 14, 2021, 2:30am

I have been working these days on this and defintely the drawing that I am looking for needs lines, with Vertexes is not possible to get the complexity of the forms that I get using lines . If I can not colour that spaces between lines, can I know somehow where are the points of the random lines to replicate designs later with vertexes?

void setup() {
  size(600, 600);
  background(255,255,255);
  
  float x1 = random(0, 600);
  float y1 = random(0, 600);
  float x2 = random(0, 600);
  float y2 = random(0, 600); 
  float x3 = random(0, 600);
  float y3 = random(0, 600);
  float x4 = random(0, 600);
  float y4 = random(0, 600);
  float x5 = random(0, 600);
  float y5 = random(0, 600);
  float x6 = random(0, 600);
  float y6 = random(0, 600);  
  float x7 = random(0, 600);
  float y7 = random(0, 600);
  float x8 = random(0, 600);
  float y8 = random(0, 600);
  float x9 = random(0, 600);
  float y9 = random(0, 600); 
  float x10 = random(0, 600);
  float y10 = random(0, 600);
  float x11 = random(0, 600);
  float y11 = random(0, 600);
  float x12 = random(0, 600);
  float y12 = random(0, 600);
 
  
  stroke(0, 0, 0);
  strokeWeight(3);
  line(x1, y1, x2, y2);
  line(x2, y2, x3, y3);
  line(x3, y3, x4, y4);
  line(x4, y4, x5, y5);
  line(x5, y5, x6, y6);
  line(x6, y6, x7, y7);
  line(x7, y7, x8, y8);
  line(x8, y8, x9, y9);
  line(x9, y9, x10, y10);
  line(x10, y10, x11, y11);
  line(x11, y11, x12, y12);
  line(x12, y12, x1,y1);
  }

VOIDupgraded · June 21, 2021, 5:21pm

Sorry I didn’t reply for a while, been away from computers for a few days.

There isn’t much more I cam help you with, as far as my knowledge goes I told you what I could. Hope you have found an answer for your problem.

Topic		Replies	Views
Drawing a line in a random direction from the end of a line Coding Questions	4	1826	December 3, 2018
Connecting Points with a Line Coding Questions	5	238	May 24, 2021
Line not drawing (PVector) Coding Questions	5	351	January 21, 2022
Help - Cant figure this out Coding Questions	4	290	March 2, 2020
Random pairs from an arrayList Coding Questions	5	291	October 31, 2019

Continuous Random Line

Related topics