# Help color movement

**URL:** <https://discourse.processing.org/t/help-color-movement/21764>\
**Category:** Coding Questions\
**Created:** [June 11, 2020, 8:24am UTC](https://discourse.processing.org/t/help-color-movement/21764 "2020-06-11T08:24:12Z")\
**Posts on this page:** 10\
**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 11, 2020, 8:24am UTC](https://discourse.processing.org/t/help-color-movement/21764/1 "2020-06-11T08:24:12Z")

</div>

Ciao a tutti!  
Ho bisogno di un suggerimento per il mio lavoro: devo far in modo che le mie linee insieme ai miei rect() si muovano nel seguente modo:

 ![Moviment-lines](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/08980e794436bbddee026c834b7bb092248f3895.jpeg)

il mio codice è il seguente:

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

float x_move = 0.0;
float x_moveNext = 0.0;

float baseA = x_move;
float altA = h;
float baseB = w-baseA;
float altB = h;

int min = 0+100;
int max = w-100;
float velocita = 2;

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);
  x_move = random (min, max);
  x_moveNext = random(min, max);
  surface.setTitle("Mondrian");
}

void draw() {  
  disegna();
}

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

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

  noStroke(); 

  fill(red);
  rect(0, latoBlu, x_move, altA);  

  fill(blue);
  rect(x_move, latoBlu, baseB, altB);

  stroke(white);
  strokeWeight(13);
  line(x_move, 0, x_move, h);
}

```

Ma sto avendo problemi sia con le linee sia con i rect().  
Qualcuno che mi può dare una mano?

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 11, 2020, 2:20pm UTC](https://discourse.processing.org/t/help-color-movement/21764/2 "2020-06-11T14:20:06Z")

</div>

Hello @marika20,

Please can you outline more specifically the desired effect you want?

In your diagram it looks like you want the left side and right side to move up and down **independent of each other?**  
And you want the entire window to move back and forth?

Please confirm if this is correct **OR** you want something different…

Also, it appears all of your variables are not being used, and I assume this is intentional?  
🤓

---

<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 11, 2020, 2:36pm UTC](https://discourse.processing.org/t/help-color-movement/21764/3 "2020-06-11T14:36:18Z")

</div>

ciao, ti ringrazio per avermi risposto.  
Si esatto le due linee in orizzontale che si muovano su e giù in autonomia e quella centrale anche a destra e a sinistra.  
Così come ho rappresentato io.

Si le variabili per ora non sono ancora utilizzate, corretto. 🙂

---

<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 11, 2020, 2:41pm UTC](https://discourse.processing.org/t/help-color-movement/21764/4 "2020-06-11T14:41:06Z")

</div>

Instead of doing the left - right movement first, can you post code for **only the left side of up - down movement**?

---

<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 11, 2020, 3:52pm UTC](https://discourse.processing.org/t/help-color-movement/21764/5 "2020-06-11T15:52:50Z")

</div>

è il problema…  
non capisco come inserire gli altri movimenti purtroppo: ho inserito il movimento destra-sinistra ma mancano i due movimenti su-giù

---

<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 11, 2020, 4:42pm UTC](https://discourse.processing.org/t/help-color-movement/21764/6 "2020-06-11T16:42:59Z")

</div>

Yes, I understand the code for the other two up-down movements are missing.  
🙂

**BUT** I think it will be easier for you if you solve the up-down movement first and then after that the left-right movement.

Once you solve the left side up-down, it will be very easy to apply to the right side up-down with minor adjustment(s).

Then the overall left-right (x variable) movement can be applied.

You will need to make your y variable your primary variable. Currently your x variable is primary.  
**For example, instead of:**

> [@marika20](#):
>
> ```auto
> float x_move = 0.0;
> float x_moveNext = 0.0;
> 
> ```

To start, change to:

```auto
float y_move = 0.0;
float y_moveNext = 0.0;

```

and then apply the same thinking you did with your previous code.  
And of course, you will need to revise your other variables as needed because your primary reference is now y and not x.

This is just my approach, someone else may have another opinion that is equally valid of course…

🤓

---

<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 12, 2020, 12:06pm UTC](https://discourse.processing.org/t/help-color-movement/21764/7 "2020-06-12T12:06:57Z")

</div>

I this solved?

Chrisir

---

<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 12, 2020, 12:15pm UTC](https://discourse.processing.org/t/help-color-movement/21764/8 "2020-06-12T12:15:07Z")

</div>

ma nell’esempio che mi hai mandato adesso abbastanza, a me serve che le linee si muovano in corrispondenza dei rect().  
Nel tuo esempio ha creato lo stroke() ai rect() ma non le linee 🤕

---

<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 12, 2020, 12:20pm UTC](https://discourse.processing.org/t/help-color-movement/21764/9 "2020-06-12T12:20:18Z")

</div>

Yes, each rect() has its line around it with

```auto
  strokeWeight(13);
  stroke(white);

```

but you can draw also lines.

---

<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 12, 2020, 12:21pm UTC](https://discourse.processing.org/t/help-color-movement/21764/10 "2020-06-12T12:21:01Z")

</div>

si esatto, a me servono le linee che muovono i rect()  
Grazie