# Gioco da definire

**URL:** <https://discourse.processing.org/t/gioco-da-definire/18681>\
**Category:** Coding Questions\
**Created:** [March 15, 2020, 2:07pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681 "2020-03-15T14:07:08Z")\
**Posts on this page:** 20\
**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 15, 2020, 2:07pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/1 "2020-03-15T14:07:08Z")

</div>

Ciao a tutti!  
Sto lavorando su un nuovo gioco o comunque una sorta di intrattenimento interattivo, il progetto su cui sto lavorando è basato sul fare qualcosa che attiri l’attenzione del giocatore.  
Vorrei renderlo più coinvolgete per chi andrà a giocarci, qualche suggerimento per migliorare il lavoro?

Questo è il codice scritto per ora:

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

void draw(){
  //rettangoli();
  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);
}
  void mouseClicked(){  
  new_x = random(30, width-30);    
  new_y = random(30, height-30);
  new_y2 = random(30, height-30);
}

```

Qualche consiglio mi farebbe piacere!  
Inoltre mi daresti anche una grandissima mano…grazie 🙂

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [March 15, 2020, 4:19pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/2 "2020-03-15T16:19:50Z")

</div>

Quando ho eseguito lo schizzo ho pensato immediatamente a quel gioco in cui devi far scorrere i blocchi nel quadrato per allinearli e formare un’immagine corretta. Forse puoi adattare il codice. Con il ridimensionamento delle immagini, potrebbe essere bello!

---

<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 15, 2020, 4:40pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/3 "2020-03-15T16:40:56Z")

</div>

tipo puzzle?  
carina come idea ma come l’adatteresti a quello che ho scritto?  
🧐

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [March 15, 2020, 4:54pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/4 "2020-03-15T16:54:01Z")

</div>

Sí, estaba jugando con su código para ver si podía obtener el bloque rojo en la esquina superior izquierda, pero es imposible. Entonces es allí donde debes comenzar a adaptar el código para crear un rompecabezas animado de imágenes deslizantes.

---

<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 18, 2020, 10:59pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/5 "2020-03-18T22:59:35Z")

</div>

I like the way your program is now.

I made an entire new sketch that let’s you

- drag the rects with mouse (grab the rect at the _center_) and
- change the size of the rects with the mouse (grab the rect at the _lower right corner_).

Maybe you can use it in your sketch above.

Chrisir

```auto
DraggingRect[] dragRects = new DraggingRect[4];

void setup() {
  size(1200, 600);
  background(255);   
  noStroke(); 

  dragRects[0] = new DraggingRect(50, 50, color(255, 0, 0) ); 
  dragRects[1] = new DraggingRect(250, 50, color(255, 0, 255) );
  dragRects[2] = new DraggingRect(450, 150, color(255) );
  dragRects[3] = new DraggingRect(650, 150, color(0, 0, 255) );
}

void draw() { 

  background(255);

  boolean mouseOverAnyDragSpot=false; 

  for (DraggingRect currentDraggingPic : dragRects) {

    if (currentDraggingPic.overDragSpot()||currentDraggingPic.overDragSpotCorner()) {
      mouseOverAnyDragSpot=true;
    }

    currentDraggingPic.display();
    currentDraggingPic.mouseDragged();
  }//for

  if (mouseOverAnyDragSpot) {
    cursor(CROSS);
  } else {
    cursor(ARROW);
  }
}

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

void mousePressed() {
  for (DraggingRect currentDraggingPic : dragRects) {
    currentDraggingPic.draggingpicMousePressed();
    currentDraggingPic.draggingCornerMousePressed();
  }//for
}

void mouseReleased() {
  for (DraggingRect currentDraggingPic : dragRects) {
    currentDraggingPic.draggingpicMouseReleased();
    currentDraggingPic.draggingCornerMouseReleased();
  }//for
}

// ==================================================

class DraggingRect {

  int x;
  int y;
  color colRect;

  // controls whether we are dragging (holding the mouse)
  boolean hold, hold2; 

  float width1=166; 
  float height1=166; 

  float offsetX=0, offsetY=0; 

  // constructor
  DraggingRect(int posx, int posy, 
    color col_) { 
    x=posx;
    y=posy;
    colRect = col_;
  }// constructor

  void display() {
    fill(colRect); 
    stroke(0); 
    rect( x, y, 
      width1, height1);
  }

  // -----------------------------------------------
  // dragging Corner : start dragging size

  void draggingCornerMousePressed() {
    // Corner : start dragging size 
    if (overDragSpotCorner()) {
      offsetX=x+width1-mouseX; 
      offsetY=y+height1-mouseY; 
      hold2=true;
    }
  }

  boolean overDragSpotCorner() {
    // Corner
    return
      mouseX>x+width1-12&&
      mouseX<x+width1+12 && 
      mouseY>y+height1-12&&    
      mouseY<y+height1+12;
  }

  void draggingCornerMouseReleased() {
    hold2=false;
  }

  // -----------------------------------------------
  // dragging CENTER : start dragging position 

  void draggingpicMousePressed() {
    // CENTER : start dragging position 
    if (overDragSpot()) {
      offsetX=x-mouseX; 
      offsetY=y-mouseY; 
      hold=true;
    }
  }

  boolean overDragSpot() {
    // CENTER 
    return
      mouseX>x+width1/2-12&&
      mouseX<x+width1/2+12 && 
      mouseY>y+height1/2-12&&    
      mouseY<y+height1/2+12;
  }

  void draggingpicMouseReleased() {
    hold=false;
  }

  // -----------------------------------------------
  // for both 

  void mouseDragged() {
    // dragging position 
    if (hold) {
      x=mouseX+int(offsetX); 
      y=mouseY+int(offsetY);
    }

    // dragging SIZE 
    if (hold2) {
      width1=mouseX-x; //-int(offsetX); 
      height1=mouseY-y; //-int(offsetY);
    }
  }//method
  //
}//class 
//

```

---

<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 19, 2020, 9:09am UTC](https://discourse.processing.org/t/gioco-da-definire/18681/6 "2020-03-19T09:09:56Z")

</div>

Grazie! sicuramente un idea che potrei applicare, ti ringrazio per esserti messo “al lavoro” per darmi una direttiva su cosa potrei fare, molto gentile, davvero! 🥰

---

<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 19, 2020, 3:28pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/7 "2020-03-19T15:28:48Z")

</div>

brand new version

you can **drag** with the mouse:

- with left mouse button (both directions (variables x and y)) or
- right mouse button (only y2 direction).

Chrisir

```auto
float x = 300;
float y = 300;
float y2 = 300;

// drag 
boolean hold=false; // left mouse button
boolean hold2=false; // right mouse button

// state 
final int INFO=0; 
final int GAME=1; 
int state=INFO; 

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

void setup() {
  size(600, 600);
  background(0);
  surface.setTitle("Mondrian");
}

void draw() {
  // evaluate state 
  if (state==INFO) {
    background(0);
    fill(255); 
    text("INFO-SCREEN\n\nClick left mouse and drag both directions; \nClick right mouse and drag y direction. \n\nClick mouse.", 
      100, 100);
  } 
  //---------------------
  else if (state==GAME) {
    background(0); 
    stroke(#FCFDFF);
    strokeWeight(9);

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

    //-----------------------------------------
    if (hold) {
      x+=mouseX-pmouseX;
      y+=mouseY-pmouseY;
    }//if

    if (hold2) {
      //x+=mouseX-pmouseX;
      y2+=mouseY-pmouseY;
    }//if
  }//else state 
  //
}//draw 

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

void mousePressed() {
  // evaluate state 
  if (state==INFO) {
    state = GAME;
  }
  //-----------------------------------------
  else if (state==GAME) {
    if (mouseButton==LEFT) { 
      hold=true;
    } else {
      hold2=true;
    }
  }//else
}//func 

void mouseReleased() {
  hold=false;
  hold2=false;
}//func 
//

```

---

<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 19, 2020, 4:07pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/8 "2020-03-19T16:07:03Z")

</div>

Amo questo! Bella idea, stavo pensando di far interagire anche un personaggio, magari con lo sketch in movimento: un personaggio che salta ai bordi di un quadrato all’altro in movimento gestito dai tasti della tastiera 🤩  
Grazie anche la tua idea mi può essere utile! 🥰

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [March 19, 2020, 8:19pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/9 "2020-03-19T20:19:04Z")

</div>

> [@marika20](#):
>
> un personaggio che salta ai bordi di un quadrato all’altro in movimento

Bella idea non vedo l’ora di vedere.

---

<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 19, 2020, 9:08pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/10 "2020-03-19T21:08:37Z")

</div>

Bella idea

At least, when you drag a rect, it should be highlighted, e.g. rectangle with a bigger `strokeWeight()` for the outline

```auto

void setup() {
  size(400, 400);

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

void draw() {
  background(0);

  strokeWeight(1); 
  rect (133, 44, 55, 55); 

  strokeWeight(3); 
  rect (233, 244, 55, 55);
  text("selected", 
    233-6, 244-9);
}
//

```

---

<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 23, 2020, 6:46pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/11 "2020-03-23T18:46:37Z")

</div>

Did you consider to make a 3D Mondrian?

Using boxes and spheres

```auto

// https://discourse.processing.org/t/gioco-da-definire/18681/7

import peasy.*;

final color WHITE = color(255);
final color BLACK = color(0);

final color RED = color(255, 0, 0);
final color GREEN = color(0, 255, 0);
final color BLUE = #0326FF; 

final color YELLOW = #FFF703; 
float x = 300;
float y = 300;
float y2 = 300;

// drag 
boolean hold=false; // left mouse button
boolean hold2=false; // right mouse button

// state 
final int INFO=0; 
final int GAME=1; 
int state=INFO; 

PeasyCam cam;

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

void setup() {
  size(600, 600, P3D);
  background(0);
  surface.setTitle("Mondrian");
  avoidClipping(); 
  cam = new PeasyCam(this, 5000);
}

void draw() {
  // evaluate state 
  if (state==INFO) {
    cam.beginHUD(); 
    background(0);
    fill(255); 
    text("INFO-SCREEN\n\nMove sculpture with mouse.\nWhen you hold a key: Click left mouse and drag both directions; \nClick right mouse and drag y direction. \n\nClick mouse.", 
      100, 100);
    cam.endHUD();
  } 
  //---------------------
  else if (state==GAME) {
    //
    background(0); 
    lights(); 

    stroke(#FCFDFF);
    strokeWeight(1); // 9 

    // line(0, x, x, height);

    float depth=430; 

    fill(BLUE);
    box3D(0, 0, -30, x, height, depth );

    fill(#FFF703);
    box3D(0, y, -30, x, y, depth);

    fill(WHITE);
    // box3D(0, height+10, -30, x, height, depth );

    // line(x, 0, x, height);

    fill(RED);
    box3D(x, 0, -30, x, height, depth);

    // line(0, y, x, y);

    // line(x, y2, width, y2);

    fill(#0326FF);
    box3D(x, y2, -30, width, y2, depth);

    println(x, y);

    //-----------------------------------------
    if (hold) {
      x+=mouseX-pmouseX;
      y+=mouseY-pmouseY;
    }//if

    if (hold2) {
      //x+=mouseX-pmouseX;
      y2+=mouseY-pmouseY;
    }//if

    if (keyPressed) 
      cam.setActive(false); 
    else cam.setActive(true);
  }//else state 
  //
}//draw 

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

void box3D(float x, float y, float z, 
  float w, float h, float d) {
  // 
  pushMatrix();
  translate (x, y, z);
  box(w, h, d); 
  popMatrix();
}

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

void mousePressed() {
  // evaluate state 
  if (state==INFO) {
    state = GAME;
  }
  //-----------------------------------------
  else if (state==GAME) {
    if (mouseButton==LEFT) { 
      hold=true;
    } else {
      hold2=true;
    }
  }//else
}//func 

void mouseReleased() {
  hold=false;
  hold2=false;
}//func 

void keyPressed() {
}

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

void avoidClipping() {
  // avoid clipping :
  // https : //
  // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
  perspective(PI/3.0, (float) width/height, 1, 1000000);
}//func
//

```

---

<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 24, 2020, 8:13am UTC](https://discourse.processing.org/t/gioco-da-definire/18681/12 "2020-03-24T08:13:19Z")

</div>

ho provato a vederlo ma non me lo fa vedere :pensiero:  
c’è qualche errore in PeasyCam 🙁

---

<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 24, 2020, 8:15am UTC](https://discourse.processing.org/t/gioco-da-definire/18681/13 "2020-03-24T08:15:11Z")

</div>

> [@marika20](#):
>
> c’è qualche errore in PeasyCam

ah, you have to install peasyCam:

Menu Sketch | Import library | Add library

---

<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 24, 2020, 8:32am UTC](https://discourse.processing.org/t/gioco-da-definire/18681/14 "2020-03-24T08:32:26Z")

</div>

Grazie! attualmente ho problemi a cercare peasyCam, non so perchè, spero di riuscire, intanto ti ringrazio per tutto 🤩

---

<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 24, 2020, 9:09am UTC](https://discourse.processing.org/t/gioco-da-definire/18681/15 "2020-03-24T09:09:44Z")

</div>

It should work

Menu Sketch | Import library | Add library: Search peasy, install

---

<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 24, 2020, 9:32am UTC](https://discourse.processing.org/t/gioco-da-definire/18681/16 "2020-03-24T09:32:15Z")

</div>

new 3D without peasy

```auto

// https://discourse.processing.org/t/gioco-da-definire/18681/7

final color WHITE = color(255);
final color BLACK = color(0);

final color RED = color(255, 0, 0);
final color GREEN = color(0, 255, 0);
final color BLUE = #0326FF; 

final color YELLOW = #FFF703; 
float x = 300;
float y = 300;
float y2 = 300;

// drag 
boolean hold=false; // left mouse button
boolean hold2=false; // right mouse button

// state 
final int INFO=0; 
final int GAME=1; 
int state=INFO; 

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

void setup() {
  size(600, 600, P3D);
  background(0);
  surface.setTitle("Mondrian");
  avoidClipping();
}

void draw() {
  // evaluate state 
  if (state==INFO) {

    background(0);
    fill(255); 
    text("INFO-SCREEN\n\nMove sculpture with mouse L/R.\n Click left mouse and drag both directions; \nClick right mouse and drag y direction. \n\nClick mouse.", 
      100, 100);
  } 
  //---------------------
  else if (state==GAME) {
    //
    background(0); 
    lights(); 

    translate(width/2, 0, -730);
    rotateY(map(mouseX, 0, width, -TWO_PI, TWO_PI));

    stroke(#FCFDFF);
    strokeWeight(1); // 9 

    float depth=430; 

    fill(BLUE);
    box3D(0, 0, -30, x, height, depth );

    fill(#FFF703);
    box3D(0, y, -30, x, y, depth);

    fill(WHITE);
    // box3D(0, height+10, -30, x, height, depth );

    // line(x, 0, x, height);

    fill(RED);
    box3D(x, 0, -30, x, height, depth);

    fill(#0326FF);
    box3D(x, y2, -30, width, y2, depth);

    println(x, y);

    //-----------------------------------------
    if (hold) {
      x+=mouseX-pmouseX;
      y+=mouseY-pmouseY;
    }//if

    if (hold2) {
      //x+=mouseX-pmouseX;
      y2+=mouseY-pmouseY;
    }//if
  }
  //
}//draw 

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

void box3D(float x, float y, float z, 
  float w, float h, float d) {
  // 
  pushMatrix();
  translate (x, y, z);
  box(w, h, d); 
  popMatrix();
}

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

void mousePressed() {
  // evaluate state 
  if (state==INFO) {
    state = GAME;
  }
  //-----------------------------------------
  else if (state==GAME) {
    if (mouseButton==LEFT) { 
      hold=true;
    } else {
      hold2=true;
    }
  }//else
}//func 

void mouseReleased() {
  hold=false;
  hold2=false;
}//func 

void keyPressed() {
}

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

void avoidClipping() {
  // avoid clipping :
  // https : //
  // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
  perspective(PI/3.0, (float) width/height, 1, 1000000);
}//func
//

```

---

<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 24, 2020, 11:13am UTC](https://discourse.processing.org/t/gioco-da-definire/18681/17 "2020-03-24T11:13:20Z")

</div>

Woooow 😍 che bellooo!!! davvero molto bello compliementi.  
Davvero bravo, ti ringrazio sicuramente molto motivante!  
sarebbe bello far interagire un personaggio che si può muovere sui vari rettangoli!  
Molto carina l’idea 🥰

Grazie!

---

<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 24, 2020, 11:22am UTC](https://discourse.processing.org/t/gioco-da-definire/18681/18 "2020-03-24T11:22:26Z")

</div>

Sarebbe bello fare come vedi nello sketch, ossia far in modo che la parte in 3D rimanga stabile e il mio personaggio (in questo caso l’ellisse) si possa muovere saltando e spostandosi per arrivare alla meta!  
😍 cosi secondo me sarebbe davvero un bel gioco.

![Senza-titolo-2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ea58d82fe1499ee4b996390c8415e7f5444f922e.png)

---

<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 25, 2020, 10:35am UTC](https://discourse.processing.org/t/gioco-da-definire/18681/19 "2020-03-25T10:35:57Z")

</div>

new 3D version with player

cursor steering and Space Bar to jump

 ![mon1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4f52193ff69694959ad38224e734a3001264511c.jpeg)

```auto
// Version: Best version with camera moving around center of boxes (looking at player)

// Documentation:
// Use cursor to run. Space to jump. To jump a wall, jump with Space and immediately use cursor.
// Different cameras would be possible: peasyCam, fixed Camera and player following camera. 

// to do : 
// splash screen 
// treasure (Mondrian collects canvas, brush...) -> next level
// you won / you loose
// nicer player
// camera moved to player at start 
// better keys: cursor UP, run, space jump
// follow player cam

// constants
final int UNKNOWN = -1;  
final float scale1=10;

// boxes 
ArrayList<ClassBox> listBoxes = new ArrayList(); 
// avg pos of all boxes (center)
PVector averageBoxes; 
// ID of the box the player is on
int globalID;

// camera
CameraSimple myCamera=new CameraSimple(); 

// Player
Player player = new Player( 0.0+110*scale1, -1180, 0.0+111*scale1 );

void setup() {
  size(1460, 850, P3D);
  surface.setTitle("Mondrian");
  makeBaseMap();
  avoidClipping();
  println("Use cursor to run. Space to jump. To jump a wall, jump with Space and immediately use cursor.");
}//func

void draw() {
  background(110);
  lights();

  manageCamera();
  showBoxes(); 

  player.display();
  player.move();

  keyPressedThroughout();
  sePlayerFloor(); 

  // HUD --------------------------------------------
  showHUD(); 
  //
}//func
//

// ********************************************************************************
// tab: BaseMap.pde
// set boxes 

void makeBaseMap() {

  // Left side 
  // 
  float x=0; 
  float y=0; // Z 
  float height1=0; // y
  float w=12; // x size
  float h=100; // Z size  
  float d=600; 
  listBoxes.add(new ClassBox( 0.0+x*scale1, 0.0+height1, 0.0+y*scale1, 
    w*scale1, d, h*scale1, 
    color(0, 0, 255), 
    0));

  // upper left corner
  x=-43; 
  y=0; // Z 
  height1=0; // y
  w=70; // x size
  h=int(99); // Z size  
  d=420; 
  listBoxes.add(new ClassBox( 0.0+x*scale1, 0.0+height1*scale1, 0.0+y*scale1, 
    w*scale1, d, h*scale1, 
    color(255, 0, 0), // RED
    1 ));

  x=-43; // x
  y=144; // Z 
  height1=0; // y
  w=70; // x size
  h=200-30+19; // Z size  
  d=240; 
  listBoxes.add(new ClassBox( 0.0+x*scale1, 0.0+height1*scale1, 0.0+y*scale1, 
    w*scale1, d, h*scale1, 
    color(250, 255, 0), // YELLOW
    2 ));

  x=88-14; 
  y=0; // Z 
  height1=0; // y
  w=160-23; // x size
  h=80-0; // Z size  
  d=290; 
  listBoxes.add(new ClassBox( 0.0+x*scale1, height1, 0.0+y*scale1, 
    w*scale1, d, h*scale1, 
    color(255), // WHITE 
    3));

  x=72; 
  y=140; // Z 
  height1=0; // y
  w=160; // x size
  h=200; // Z size  
  d=50; 
  listBoxes.add(new ClassBox( 0.0+x*scale1, height1, 0.0+y*scale1, 
    w*scale1, d, h*scale1, 
    color(0, 0, 255), // Blue
    4));

  x=13; // x
  y=120; // used as Z 
  height1=0; // used as y
  w=70; // x size
  h=100; // Z size  
  d=440; // y height 
  listBoxes.add(new ClassBox( x*scale1, height1*scale1, y*scale1, 
    w*scale1, d, h*scale1, 
    color(255, 0, 0), //RED 
    5));

  // after definig all: 
  averageBoxes = new PVector(); 
  for (ClassBox item : listBoxes) {
    averageBoxes.add(item.pos);
  }
  averageBoxes.div(listBoxes.size());
  //
} 

// ********************************************************************************
// tab: ClassBox.pde

// Class Box

class ClassBox {
  //
  PVector pos = new PVector(0, 0, 0); 
  PVector sizeBox = new PVector(0, 0, 0);
  color colBox; 
  int id; 

  // constr 
  ClassBox(float x, float y, float z, 
    float w, float h, float d, 
    color c_, 
    int id_) {
    //
    pos.set(x, y, z);
    sizeBox.set(w, h, d);
    colBox = c_;
    id = id_;
  }// constr 

  void display() {
    stroke(0);
    fill( colBox);

    pushMatrix();
    translate(pos.x, pos.y, pos.z);
    box (sizeBox.x, sizeBox.y, sizeBox.z);
    popMatrix();
  } 

  int playerCheck(float playerposx, float playerposz) {
    // gets params player.pos.x, player.pos.z
    if (
      inside(playerposx, pos.x-sizeBox.x/2.0, pos.x+sizeBox.x/2.0) &&
      inside(playerposz, pos.z-sizeBox.z/2.0, pos.z+sizeBox.z/2.0)
      ) {
      return id;
    }
    // Otherwise 
    return UNKNOWN;
  }

  boolean inside(float value, float min, float max) {
    return 
      value > min && 
      value < max;
  }  
  //
}//class
//

// ********************************************************************************
// tab: ClassCamera.pde

// Camera Simple

class CameraSimple {

  // simple camera wrapper

  PVector pos = new PVector(0, 0, 0);
  PVector lookAt = new PVector(0, 0, 0);
  PVector upVector = new PVector(0, 1, 0);

  // no constr ---------------------------------------------

  void useValues() {
    // apply values - this func must be called at all times 
    camera (pos.x, pos.y, pos.z, 
      lookAt.x, lookAt.y, lookAt.z, 
      upVector.x, upVector.y, upVector.z);
  }

  void useHighUp() {
    //camera test
    float x= 111; 
    float y2=-553;
    float y= 111; 
    pos = new PVector(0.0+x*74, -555, 0.0+y*74);
    lookAt = new PVector( x*74 + 13, y2*74 - 0, y*74 - 13);
    camera (pos.x, pos.y, pos.z, 
      lookAt.x, lookAt.y, lookAt.z, 
      upVector.x, upVector.y, upVector.z);
  }
  //
}//class
//

// ********************************************************************************
// tab: ClassPlayer.pde

// class Player

class Player {
  PVector pos = new PVector(0, 0, 0); 
  float moveY=0; 
  float diameter = 40; 
  boolean jumping=false; 

  float floorPlayer;

  boolean isDead=false; 

  // constr 
  Player(float x, float y, float z) {
    pos.set(x, y, z);
  }// constr 

  void display() {
    noStroke();
    fill(210);

    pushMatrix();
    translate(pos.x, pos.y, pos.z);
    sphere (diameter);
    translate(2, -diameter, 0);
    fill(255, 0, 0); 
    sphere (diameter/2);
    popMatrix();

    if (pos.y>1200)
      isDead=true;
  } 

  void move() {
    // jump 

    pos.y+=moveY;
    moveY++;

    if (pos.y>floorPlayer) { 
      pos.y=floorPlayer;
      jumping=false;
    }
  }  
  //
}//class
//

// ********************************************************************************
// tab: Inputs.pde

// Inputs 

void keyReleased() {
  key=0;
}

void keyPressedThroughout() {
  // Player steering:
  // The function allowed() checks if we run against a wall (simulate move).
  // If not allowed, we leave with return. 

  // ballPosPrev = player.pos.copy();

  if (key == CODED) {
    // CODED
    switch(keyCode) {
    case LEFT:
      if (!allowed ( player.pos.x-15-player.diameter, player.pos.z ) )
        return; 
      player.pos.x-=15; 
      break; 

    case RIGHT:
      if (!allowed ( player.pos.x+15+player.diameter, player.pos.z ) )
        return; 
      player.pos.x+=15; 
      break; 

    case UP:
      if (!allowed ( player.pos.x, player.pos.z -15-player.diameter ) )
        return; 
      player.pos.z-=15; 
      break; 

    case DOWN:
      if (!allowed ( player.pos.x, player.pos.z + 15 + player.diameter ) )
        return; 
      player.pos.z+=15; 
      break;
    }//switch
  }//if CODED 
  // ----------------------------------------
  else {
    switch(key) {
    case ' ':
      // jump with Space Bar
      if (player.jumping) // if he is alredy jumping 
        return; // leave 
      player.jumping=true; 
      player.moveY=-14;
      break;
    }//switch
    //
  }//else: not CODED
}//func 

boolean allowed( float x_, float y_ ) {
  // collision when next platform is too high 
  int testGlobalID=UNKNOWN;
  for (ClassBox item : listBoxes) {
    int temp=item.playerCheck(x_, y_);
    if (temp!=UNKNOWN)
      testGlobalID=temp;
  }//for

  // allowed (NEW platform is the same as the old)
  if (testGlobalID==globalID) {
    return true;
  }

  if (testGlobalID==UNKNOWN) {
    return true; // allowed
  } 

  // check the height difference
  ClassBox testBox = listBoxes.get(testGlobalID); // new box 
  if (player.pos.y <
    testBox.pos.y - testBox.sizeBox.y/2 ) {
    return true; // allowed (NEW platform is lower than old -> not a wall)
  } // if

  // NOT allowed (NEW platform is higher than old -> wall)
  return false;
}// func 
// 

// ********************************************************************************
// tab: Tools.pde

// Tools 

void avoidClipping() {
  // avoid clipping :
  // https://forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
  perspective(PI/3.0, (float) width/height, 1, 1000000);
}//func

void showHUD() {
  camera();
  noLights();
  textSize(14); 
  fill(255); 
  text("Use cursor to run. Space to jump. To jump a wall, jump with Space and immediately use cursor.", 
    17, 17);

  if (player.isDead) {
    fill(255, 0, 0);
    textSize(79); 
    textAlign(CENTER, CENTER);
    textMode(SHAPE); 
    text("You are Dead", width / 2, height /2);  
    textAlign(LEFT);
  }
}

void manageCamera() {
  float amt = 1.9;
  myCamera.pos = new PVector(lerp( averageBoxes.x, player.pos.x, amt ), -1130, lerp( averageBoxes.z, player.pos.z, amt ));
  myCamera.pos.y = -1130; 
  myCamera.lookAt = player.pos; // averageBoxes; // new PVector( 0, height/2, 0 );
  myCamera.useValues();

  /*
  myCamera.pos = new PVector(640, -2130, 1200);
   myCamera.lookAt = new PVector( 0, height/2, 0 );
   myCamera.useValues();
   */
}

void showBoxes() {
  translate(0, height/2, 0);
  globalID = UNKNOWN; 
  for (ClassBox item : listBoxes) {
    item.display();
    int temp = item.playerCheck(player.pos.x, player.pos.z);
    if (temp!=UNKNOWN) 
      globalID = temp;
  }//for
}

void sePlayerFloor() {
  if (globalID != UNKNOWN) {
    ClassBox currentBox = listBoxes.get(globalID);   
    player.floorPlayer =    
      currentBox.pos.y - currentBox.sizeBox.y/2 - player.diameter ;
  }//if
  else {
    // Dead......
    player.floorPlayer = 10000;
  }
}
//

```

---

<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 25, 2020, 1:08pm UTC](https://discourse.processing.org/t/gioco-da-definire/18681/20 "2020-03-25T13:08:03Z")

</div>

WOOOW!!! 😍 😍  
Molto bello e coinvolgente!!!  
Bravissimo complimenti 😍

[Next page](https://discourse.processing.org/t/gioco-da-definire/18681.md?page=2)