# Lines movement help

**URL:** <https://discourse.processing.org/t/lines-movement-help/21862>\
**Category:** Coding Questions\
**Created:** [June 14, 2020, 9:59am UTC](https://discourse.processing.org/t/lines-movement-help/21862 "2020-06-14T09:59:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![marika20](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@marika20](https://discourse.processing.org/u/marika20)\
**Post date:** [June 14, 2020, 9:59am UTC](https://discourse.processing.org/t/lines-movement-help/21862/1 "2020-06-14T09:59:43Z")

</div>

Ciao, qualcuno saprebbe dirmi perchè non riesco a fare il movimento nella parte sinistra dello schermo?  
Riesco a far muove la parte destra con la linea e il rect(blu) ma la parte di sinistra quella con la linea e il rect(rosso) non riesco…le ho provate tutte.

```auto
color red = #FF0004;
color yellow = #F2F700;
color blue = #0A30FF;
color black = #000000;
color white = #FFFFFF;

float x = 300;
float y1 = 300;
float y2 = 500;

int w = 600;
int h = 600;

int min = 0+100;
int max = w-100;

float x_move = random (min, max);
float x_moveNext = random(min, max);
//float y_move = random (min, max);
//float y_moveNext = random (min, max);

float velocitaX = 1.5;
float velocitaX2 = 1.5;

float latoArancio = x;
//float latoRosso = y1;
float latoMagenta = y2;
//float latoGiallo = h-latoRosso;
//float latoAzzurro = h-latoMagenta; 
float latoBlu = w-latoArancio; 

void settings() {
  size(w, h);
}
void setup() {
  background(black);
  frameRate(50);
  surface.setTitle("Mondrian");
  
}

void draw() {
  background(black);
  disegnaX();
  //disegnaX2();
}

void disegnaX() {
  if (x_move < x_moveNext) {
    x_move += velocitaX;
    if (x_move >= x_moveNext) {
      x_move = x_moveNext;
      x_moveNext = random (min, max);
    }
  }

  if (x_move > x_moveNext) {
    x_move -= velocitaX;
    if (x_move <= x_moveNext) {
      x_move = x_moveNext;
      x_moveNext = random(min, max);
    }
  }  

  noStroke(); 

  fill(red);
  rect(0, latoMagenta, x_move, latoMagenta);  
  //rect(0, latoArancio, x_move, h); 
  
  fill(blue);
  rect(x_move, x_move, w, h);

  fill(yellow);
  rect(0, 0, x_move, latoMagenta);  

  stroke(white);
  strokeWeight(13);
  line(x_move, x_move, w, x_move); //blu
  line(0, latoMagenta, x_move, latoMagenta); //giallo rosso
  line(x_move, 0, x_move, h); //mezzeria

  //line(0, latoArancio, x_move, latoBlu);
}

```

Grazie

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 14, 2020, 1:03pm UTC](https://discourse.processing.org/t/lines-movement-help/21862/2 "2020-06-14T13:03:57Z")

</div>

It is a minor oversight. 🙂 Please see the comments next to relevant lines below.

> [@marika20](#):
>
> ```auto
> fill(red);
> rect(0, latoMagenta, x_move, latoMagenta); // need to increment your y position so that (0, **x_move** , x_move, latoMagenta) 
>   
> fill(blue);
> rect(x_move, x_move, w, h);
> 
> fill(yellow);
> rect(0, 0, x_move, latoMagenta); // need to increment your h, so that (0, 0, x_move, x_move)
> 
> stroke(white);
> strokeWeight(13);
> line(x_move, x_move, w, x_move); //blu
> line(0, latoMagenta, x_move, latoMagenta); // and again here, increment your y1 and y2
> 
> ```

---

<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:** [June 14, 2020, 2:54pm UTC](https://discourse.processing.org/t/lines-movement-help/21862/3 "2020-06-14T14:54:57Z")

</div>

Hello,

I often use mouseX and mouseY as I am developing code to visualize what code is doing.

> **Example \< Click here to expand**
>
> ```auto
> color red = #FF0004;
> color yellow = #F2F700;
> color blue = #0A30FF;
> color black = #000000;
> color white = #FFFFFF;
> 
> float x = 300;
> float y = 300;
> 
> int w = 600;
> int h = 600;
> 
> void settings()
> {
> size(w, h);
> }
> 
> void setup()
> {
> background(black);
> }
> 
> void draw() 
> {
> background(black);
>   
> x = mouseX;
> y = mouseY;
> 
> fill(yellow);
> rect(0, 0, x, y);  
>   
> fill(red);
> rect(0, y, x, h);
> 
> fill(black);
> rect(x, 0, w, y);   
>   
> fill(blue);
> rect(x, y, w, h);
>   
> stroke(white);
> strokeWeight(10);
> line(0, y, w, y);
> line(x, 0, x, h);
> 
> noStroke();
> fill(0, 255, 0);
> circle(x, y, 20);  
> }
> 
> ```

You can add\subtract an offset to x and y and use mouseX, mouseY to help troubleshoot.

`:)`

---

<div class="post-metadata">

**Author:** ![marika20](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@marika20](https://discourse.processing.org/u/marika20)\
**Post date:** [June 14, 2020, 5:09pm UTC](https://discourse.processing.org/t/lines-movement-help/21862/4 "2020-06-14T17:09:43Z")

</div>

si ma se io incremento i valori come mi hai suggerito, la linea del rect(blu) perde il suo flusso.  
La linea di sinistra si deve muove come la linea di destra e con loro i rect()

---

<div class="post-metadata">

**Author:** ![marika20](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@marika20](https://discourse.processing.org/u/marika20)\
**Post date:** [June 14, 2020, 5:10pm UTC](https://discourse.processing.org/t/lines-movement-help/21862/5 "2020-06-14T17:10:10Z")

</div>

si grazie questo lo so 😃

---

<div class="post-metadata">

**Author:** ![marika20](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@marika20](https://discourse.processing.org/u/marika20)\
**Post date:** [June 14, 2020, 5:36pm UTC](https://discourse.processing.org/t/lines-movement-help/21862/6 "2020-06-14T17:36:20Z")

</div>

Questo è corretto:

```auto
void disegnaX() {
  if (x_move < x_moveNext) {
    x_move += velocitaX;
    if (x_move >= x_moveNext) {
      x_move = x_moveNext;
      x_moveNext = random (min, max);
    }
  }

  if (x_move > x_moveNext) {
    x_move -= velocitaX;
    if (x_move <= x_moveNext) {
      x_move = x_moveNext;
      x_moveNext = random(min, max);
    }
  }  

  noStroke(); 

  fill(red);
  rect(0, x_move+100, x_move, h);  
  //rect(0, latoArancio, x_move, h); 
  
  fill(blue);
  rect(x_move, x_move, w, h);

  fill(yellow);
  rect(0, 0, x_move, x_move+100);  

  stroke(white);
  strokeWeight(13);
  line(x_move, x_move, w, x_move); //blu
  line(0, x_move+100, x_move, x_move+100); //giallo rosso
  line(x_move, 0, x_move, h); //mezzeria

  //line(0, latoArancio, x_move, latoBlu);
}

```

Ora mi serve sapere come far muovere le linee orizzontali:  
Esempio: \_ scorre verso il basso e l’altra \_ scorre verso l’alto

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 14, 2020, 6:16pm UTC](https://discourse.processing.org/t/lines-movement-help/21862/7 "2020-06-14T18:16:09Z")

</div>

Perhaps I do not understand the effect you are trying to achieve…  
🤨 🙂

**But** if you want the left-side horizontal line to move (up and down) separately from the right-side horizontal line (up and down) then you will need to have 2 variables, one for the right side and one for the left side…

**And/or** a second conditional statement, one for each side to control the movements separately.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 18, 2020, 1:25pm UTC](https://discourse.processing.org/t/lines-movement-help/21862/8 "2020-06-18T13:25:12Z")

</div>

here is my version

```auto

color red = #FF0004;
color yellow = #F2F700;
color blue = #0A30FF;
color black = #000000;
color white = #FFFFFF;

float x = 300;
float y1 = 300;
float y2 = 500;

int w = 600;
int h = 600;

int min = 0+100;
int max = w-100;

float x_move = random (min, max);
float x_moveNext = random(min, max);
//float y_move = random (min, max);
//float y_moveNext = random (min, max);

float velocitaX = 1.5;
float velocitaX2 = 1.5;

float latoArancio = x;
//float latoRosso = y1;
float latoMagenta = y2;
//float latoGiallo = h-latoRosso;
//float latoAzzurro = h-latoMagenta; 
float latoBlu = w-latoArancio; 

float latoMagentaAdd=2;

void settings() {
  size(w, h);
}
void setup() {
  background(black);
  frameRate(50);
  surface.setTitle("Mondrian");
}

void draw() {
  background(black);
  disegnaX();
  //disegnaX2();
}

void disegnaX() {
  if (x_move < x_moveNext) {
    x_move += velocitaX;
    if (x_move >= x_moveNext) {
      x_move = x_moveNext;
      x_moveNext = random (min, max);
    }
  }

  if (x_move > x_moveNext) {
    x_move -= velocitaX;
    if (x_move <= x_moveNext) {
      x_move = x_moveNext;
      x_moveNext = random(min, max);
    }
  }  

  noStroke(); 

  fill(red);
  rect(0, x_move, x_move, latoMagenta);  
  //rect(0, latoArancio, x_move, h); 

  fill(blue);
  rect(x_move, x_move, w, h);

  fill(yellow);
  rect(0, 0, x_move, x_move);  

  stroke(white);
  strokeWeight(13);
  line(x_move, x_move, w, x_move); //blu
  line(0, latoMagenta, x_move, latoMagenta); //giallo rosso
  line(x_move, 0, x_move, h); //mezzeria

  latoMagenta+=latoMagentaAdd; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!

  if (latoMagenta>width) // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    latoMagentaAdd=-1; 
  if (latoMagenta<0)
    latoMagentaAdd=1; 

  //line(0, latoArancio, x_move, latoBlu);
}

```