# Gioco Mondrian in lavorazione

**URL:** <https://discourse.processing.org/t/gioco-mondrian-in-lavorazione/18896>\
**Category:** Coding Questions\
**Created:** [March 22, 2020, 10:58am UTC](https://discourse.processing.org/t/gioco-mondrian-in-lavorazione/18896 "2020-03-22T10:58:53Z")\
**Posts on this page:** 3\
**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:** [March 22, 2020, 10:58am UTC](https://discourse.processing.org/t/gioco-mondrian-in-lavorazione/18896/1 "2020-03-22T10:58:53Z")

</div>

Eccomi qua!  
Sto procedendo con l’ideazione del gioco dei rettangoli in movimento, il mio tentativo è quello di far in modo che i rettangoli si muovano in autonomia per far in modo che l’immagine ho inserito si possa spostare utilizzando i tasti della tastiera lungo i margini dei singoli rettangoli che saranno in movimento, in modo da poter arrivare ad un prossimo livello.  
Ho provato ad applicare un codice che si adatta con un ellipse(); ma quando voglio far applicare la stessa cosa all’immagine non riesco 🤨  
Il mio scopo è quello di far in modo che il personaggio possa muoversi all’interno dei rettangoli in movimento.

Il codice che ho scritto:

```auto
PImage pennello;
float x = 300;
float y = 300;
float y2 = 300;
float new_x = x;
float new_y = y;
float new_y2 = y2;
float speed = 2.5;

void setup() {
  size(600, 600);
  background(0);
  frameRate(10);
  surface.setTitle("Mondrian");
  pennello = loadImage("pennello.png");
}

void draw() {
  background(0); 
  stroke(#FCFDFF);
  strokeWeight(9);

  if (new_x < x) x = x-speed;
  if (new_x > x) x = x+speed;

  if (new_y < y) y = y-speed;
  if (new_y > y) y = y+speed;

  if (new_y2 < y2) y2 = y2-speed;
  if (new_y2 > y2) y2 = y2+speed;

  line(0, x, x, height);
  fill(#0326FF);
  rect(0, x, x, height);
  line(x, 0, x, height);
  fill(#FF0303);
  rect(x, 0, x, height);
  line(0, y, x, y);
  fill(#FFF703);
  rect(0, y, x, y);
  line(x, y2, width, y2);
  fill(#0326FF);
  rect(x, y2, width, y2);

  println(x, y, new_x, new_y);
  ellisse();
}
void mouseClicked() {  
  new_x = random(30, width-30);    
  new_y = random(30, height-30);
  new_y2 = random(30, height-30);
}

```

Questo per quanto riguarda la base del gioco.  
Mentre questo è il codice per l’immagine:

```auto
void ellisse() {
  noStroke();
  image(pennello, 0,0,60,60);
  //fill(#0CAF46);
 // ellipse(x, y, 30, 30);
}

void keyPressed (){
  if(key==CODED){ 
    if(keyCode==UP) y=y-10; 
    if(keyCode==DOWN) y=y+10; 
    if(keyCode==LEFT) x=x-10; 
    if(keyCode==RIGHT) x=x+10; 
  }
}

```

Qualcuno che sa darmi una dritta per far in modo che tutto funzioni correttamente? 🥰

Grazie!

---

<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:** [March 22, 2020, 9:31pm UTC](https://discourse.processing.org/t/gioco-mondrian-in-lavorazione/18896/2 "2020-03-22T21:31:49Z")

</div>

Hello!

Vuoi spostare il pennello per cursore keye?

**ecco un inizio per te:**

```auto
void ellisse() {
  noStroke();
  image(pennello, 
    xpennello, ypennello, 
    60, 60);
  // fill(#0CAF46);
  // ellipse(x, y, 30, 30);
}

void keyPressed () {
  if (key==CODED) { 
    if (keyCode==UP) ypennello=ypennello-10; 
    if (keyCode==DOWN) ypennello=ypennello+10; 
    if (keyCode==LEFT) xpennello=xpennello-10; 
    if (keyCode==RIGHT) xpennello=xpennello+10;
  }
}

```

Ad esempio, quando il pennello si trova nell’angolo in alto a sinistra, i valori casuali non devono essere inferiori a 70:

```auto

void mouseClicked() {  
  new_x = random(70, width-30);    
  new_y = random(70, height-30);
  new_y2 = random(70, height-30);
}

```

**Non l’ho fatto:**

E il pennello dovrebbe fermarsi sulla linea bianca giusta (e sulla linea inferiore) dal suo rettangolo. Non l’ho fatto.

E pennello dovrebbe andare a sinistra e in alto quando il suo rettangolo diventa troppo piccolo. Non l’ho fatto.

Chrisir

**Codice completo:**

```auto

PImage pennello;

float x = 300;
float y = 300;

float y2 = 300;
float new_x = x;
float new_y = y;
float new_y2 = y2;

float speed = 2.5;

float xpennello, ypennello; 

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

void setup() {
  size(600, 600);
  background(0);
  frameRate(10);
  surface.setTitle("Mondrian");
  pennello = loadImage("pennello.png");
}

void draw() {
  background(0); 
  stroke(#FCFDFF);
  strokeWeight(9);

  if (new_x < x) x = x-speed;
  if (new_x > x) x = x+speed;

  if (new_y < y) y = y-speed;
  if (new_y > y) y = y+speed;

  if (new_y2 < y2) y2 = y2-speed;
  if (new_y2 > y2) y2 = y2+speed;

  line(0, x, x, height);
  fill(#0326FF);
  rect(0, x, x, height);
  line(x, 0, x, height);
  fill(#FF0303);
  rect(x, 0, x, height);
  line(0, y, x, y);
  fill(#FFF703);
  rect(0, y, x, y);
  line(x, y2, width, y2);
  fill(#0326FF);
  rect(x, y2, width, y2);

  fill(0, 255, 0);
  noStroke(); 
  rect(x, y2, 17, 17);
  fill(0, 255, 255);
  rect(x, y, 17, 17);

  println(x, y, y2, "-----------", 
    new_x, new_y, new_y2);
  ellisse();
}

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

void mouseClicked() {  
  new_x = random(70, width-30);    
  new_y = random(70, height-30);
  new_y2 = random(70, height-30);
}

//

void ellisse() {
  noStroke();
  image(pennello, 
    xpennello, ypennello, 
    60, 60);
  // fill(#0CAF46);
  // ellipse(x, y, 30, 30);
}

void keyPressed () {
  if (key==CODED) { 
    if (keyCode==UP) ypennello=ypennello-10; 
    if (keyCode==DOWN) ypennello=ypennello+10; 
    if (keyCode==LEFT) xpennello=xpennello-10; 
    if (keyCode==RIGHT) xpennello=xpennello+10;
  }
}
//

```

---

<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:** [March 23, 2020, 9:07am UTC](https://discourse.processing.org/t/gioco-mondrian-in-lavorazione/18896/3 "2020-03-23T09:07:43Z")

</div>

oooh si grazie! 🥰  
in questo modo io posso arrivare a concludere in questo modo:

```auto
PImage pennello;

float x = 300;
float y = 300;

float y2 = 300;
float new_x = x;
float new_y = y;
float new_y2 = y2;

float speed = 2.5;

float xpennello, ypennello; 

void setup() {
  size(600, 600);
  background(0);
  frameRate(10);
  surface.setTitle("Mondrian");
  pennello = loadImage("pennello.png");
}

void draw() {
  background(0); 
  stroke(#FCFDFF);
  strokeWeight(9);

  if (new_x < x) x = x-speed;
  if (new_x > x) x = x+speed;

  if (new_y < y) y = y-speed;
  if (new_y > y) y = y+speed;

  if (new_y2 < y2) y2 = y2-speed;
  if (new_y2 > y2) y2 = y2+speed;

  line(0, x, x, height);
  fill(#0326FF);
  rect(0, x, x, height);
  line(x, 0, x, height);
  fill(#FF0303);
  rect(x, 0, x, height);
  line(0, y, x, y);
  fill(#FFF703);
  rect(0, y, x, y);
  line(x, y2, width, y2);
  fill(#0326FF);
  rect(x, y2, width, y2);

  println(x, y, y2, new_x, new_y, new_y2);
  img();
}

void mouseClicked() {  
  new_x = random(70, width-30);    
  new_y = random(70, height-30);
  new_y2 = random(70, height-30);
}

```

```auto
void img() {
  noStroke();
  image(pennello, 
    xpennello, ypennello, 
    60, 60);
  // fill(#0CAF46);
  // ellipse(x, y, 30, 30);
}

void keyPressed () {
  if (key==CODED) { 
    if (keyCode==UP) ypennello=ypennello-10; 
    if (keyCode==DOWN) ypennello=ypennello+10; 
    if (keyCode==LEFT) xpennello=xpennello-10; 
    if (keyCode==RIGHT) xpennello=xpennello+10;
  }
}

```

Ma adesso il mio passo successivo sarà quello di far in modo che l’immagine non entri all’interno dei rettangoli colorati ma solo sulla linea di contorno e che i rettangoli si muovino in autonomia 😍

Ti ringrazio per avermi fatto capire come muovere l’immagine al’interno del mio progetto, sei molto gentile come sempre, molto contenta che tu mi aiuti 😘

Grazie!