Gioco Mondrian in lavorazione

Processing Coding Questions
1

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 :face_with_raised_eyebrow:
Il mio scopo è quello di far in modo che il personaggio possa muoversi all’interno dei rettangoli in movimento.

Il codice che ho scritto:

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:

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? :smiling_face_with_three_hearts:

Grazie!

1 Like
2

Hello!

Vuoi spostare il pennello per cursore keye?

ecco un inizio per te:

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:



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:


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;
  }
}
//
2 Likes
3

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

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


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 :heart_eyes:

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 :kissing_heart:

Grazie!

2 Likes