# Continuous Random Line

**URL:** <https://discourse.processing.org/t/continuous-random-line/30377>\
**Category:** Coding Questions\
**Created:** [May 30, 2021, 8:03pm UTC](https://discourse.processing.org/t/continuous-random-line/30377 "2021-05-30T20:03:22Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [May 30, 2021, 8:03pm UTC](https://discourse.processing.org/t/continuous-random-line/30377/1 "2021-05-30T20:03:22Z")

</div>

![IMG_20210530_215723](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3bd5287a63d6c4fcc7ca5f50eb89df84d4a71462.jpeg)  
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();  
}

---

<div class="post-metadata">

**Author:** ![Flolo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/flolo/32/13874_2.png) [@Flolo](https://discourse.processing.org/u/Flolo)\
**Post date:** [May 30, 2021, 8:36pm UTC](https://discourse.processing.org/t/continuous-random-line/30377/2 "2021-05-30T20:36:25Z")

</div>

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**
>
> ```auto
> //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 😄

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [May 30, 2021, 8:50pm UTC](https://discourse.processing.org/t/continuous-random-line/30377/3 "2021-05-30T20:50:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 30, 2021, 9:14pm UTC](https://discourse.processing.org/t/continuous-random-line/30377/4 "2021-05-30T21:14:25Z")

</div>

Hello @humano ,

Please format your code:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

> [@humano](#):
>
> I have found a Code and I am trying but It does not work

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_):

```auto
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](http://processing.org/)_

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

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/35f05e0e0227932c25f0c7f86269d86609c2c294.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Flolo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/flolo/32/13874_2.png) [@Flolo](https://discourse.processing.org/u/Flolo)\
**Post date:** [May 30, 2021, 9:19pm UTC](https://discourse.processing.org/t/continuous-random-line/30377/5 "2021-05-30T21:19:46Z")

</div>

You mean like that:

?

```auto
//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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [May 31, 2021, 7:31am UTC](https://discourse.processing.org/t/continuous-random-line/30377/6 "2021-05-31T07:31:47Z")

</div>

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](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 😉

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 31, 2021, 10:03am UTC](https://discourse.processing.org/t/continuous-random-line/30377/7 "2021-05-31T10:03:12Z")

</div>

Hello,

> [@humano](#):
>
> I am doing everything with Android processing app

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?

1. [APDE - Android Processing IDE](https://play.google.com/store/apps/details?id=com.calsignlabs.apde)
2. [Processing for Android](https://android.processing.org/gallery/index.html)

> [@humano](#):
>
> 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

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

This one discusses shapes and lines:  
[https://processing.org/tutorials/drawing/](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](https://processing.org/reference/) for each method\function in your code:

- _[Variable Scope / Examples / Processing.org](https://processing.org/examples/variablescope.html)_
- 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:

[![](https://img.youtube.com/vi/50Rzvxvi8D0/maxresdefault.jpg "4.3: Using random() - Processing Tutorial") ](https://www.youtube.com/watch?v=50Rzvxvi8D0)

Happy Coding:

> **[Processing Tutorials](https://happycoding.io/tutorials/processing/)**
>
> Learn how to program in Processing!

Other links from a search:

> **[Random Lines with Processing • Programming is Fun](https://programmingisfun.com/random-lines/)**
>
> Creating compositions of random lines is easy with processing.

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

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [June 1, 2021, 10:30am UTC](https://discourse.processing.org/t/continuous-random-line/30377/8 "2021-06-01T10:30:59Z")

</div>

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:

```auto
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);
  }
  
  

```

---

<div class="post-metadata">

**Author:** ![VOIDupgraded](https://avatars.discourse-cdn.com/v4/letter/v/91b2a8/32.png) [@VOIDupgraded](https://discourse.processing.org/u/VOIDupgraded)\
**Post date:** [June 1, 2021, 10:59am UTC](https://discourse.processing.org/t/continuous-random-line/30377/9 "2021-06-01T10:59:18Z")

</div>

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

```auto
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:

```auto
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));
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [June 1, 2021, 11:20am UTC](https://discourse.processing.org/t/continuous-random-line/30377/10 "2021-06-01T11:20:36Z")

</div>

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

 ![IMG_20210601_131559](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/395eea07350159bfbe3b3bda1b891d3b92770980.jpeg)

---

<div class="post-metadata">

**Author:** ![VOIDupgraded](https://avatars.discourse-cdn.com/v4/letter/v/91b2a8/32.png) [@VOIDupgraded](https://discourse.processing.org/u/VOIDupgraded)\
**Post date:** [June 1, 2021, 11:23am UTC](https://discourse.processing.org/t/continuous-random-line/30377/11 "2021-06-01T11:23:35Z")

</div>

🤔 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.

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [June 1, 2021, 11:38am UTC](https://discourse.processing.org/t/continuous-random-line/30377/12 "2021-06-01T11:38:11Z")

</div>

That is exactly the first idea that I had

```auto
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

---

<div class="post-metadata">

**Author:** ![VOIDupgraded](https://avatars.discourse-cdn.com/v4/letter/v/91b2a8/32.png) [@VOIDupgraded](https://discourse.processing.org/u/VOIDupgraded)\
**Post date:** [June 1, 2021, 11:48am UTC](https://discourse.processing.org/t/continuous-random-line/30377/13 "2021-06-01T11:48:44Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ebdda8ea0e2e2d06893d0a39cd58ffcaddf09ca4.png)  
After I thing it’s just the boring part of tweaking stuff to sell the effect.

---

<div class="post-metadata">

**Author:** ![KartikSoneji](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@KartikSoneji](https://discourse.processing.org/u/KartikSoneji)\
**Post date:** [June 5, 2021, 2:57pm UTC](https://discourse.processing.org/t/continuous-random-line/30377/14 "2021-06-05T14:57:27Z")

</div>

@humano I think you will be interested in [Voronoi diagrams](https://en.m.wikipedia.org/wiki/Voronoi_diagram).

![img](https://upload.wikimedia.org/wikipedia/commons/5/54/Euclidean_Voronoi_diagram.svg)

There are several implementations of the algorithm:  
[https://rosettacode.org/wiki/Voronoi\_diagram](https://rosettacode.org/wiki/Voronoi_diagram)  
[https://algorist.com/problems/Voronoi\_Diagrams.html](https://algorist.com/problems/Voronoi_Diagrams.html)

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [June 5, 2021, 3:58pm UTC](https://discourse.processing.org/t/continuous-random-line/30377/15 "2021-06-05T15:58:06Z")

</div>

Thank u so much! I Will check it

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [June 14, 2021, 2:30am UTC](https://discourse.processing.org/t/continuous-random-line/30377/16 "2021-06-14T02:30:06Z")

</div>

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?

```auto
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);
  }
  
  

```

---

<div class="post-metadata">

**Author:** ![VOIDupgraded](https://avatars.discourse-cdn.com/v4/letter/v/91b2a8/32.png) [@VOIDupgraded](https://discourse.processing.org/u/VOIDupgraded)\
**Post date:** [June 21, 2021, 5:21pm UTC](https://discourse.processing.org/t/continuous-random-line/30377/17 "2021-06-21T17:21:57Z")

</div>

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.