Piston create a a block of multiple square

i want to create something like a square of square like a a square composed of 4 small squares (4x4) for a Tetris I know how to create a simple square and move it,

but I don't know how to create a more complex figure like a 4x4 square or an L and move it like a simple square do you have any idea ?

here the code if you need it =>

extern crate glutin_window;
extern crate graphics;
extern crate opengl_graphics;
extern crate piston;

use glutin_window::GlutinWindow;
use graphics::rectangle;
use opengl_graphics::{GlGraphics, OpenGL};
use piston::event_loop::{EventSettings, Events};
use piston::input::{
    Button, Key, PressEvent, ReleaseEvent, RenderArgs, RenderEvent, UpdateArgs, UpdateEvent,
};
use piston::window::WindowSettings;
use piston_window::Transformed;
use std::process;

struct Game {
    gl: GlGraphics,
    pos_x: f64,
    pos_y: f64,
}

impl Game {
    fn render(&mut self, arg: &RenderArgs) {
        use graphics;

        let BACKGROUND: [f32; 4] = [0.349019608, 0.349019608, 0.290196078, 1.0];
        let COO: [f32; 4] = [0.364705882, 0.717647059, 0.870588235, 0.8];

        let square_c = rectangle::square(100.0, 100.0, 30.0);
        let pos_x = self.pos_x as f64;
        let pos_y = self.pos_y as f64;

        println!("pos x = {}", pos_x);
        println!("pos y = {}", pos_y);

        self.gl.draw(arg.viewport(), |c, gl| {
            graphics::clear(BACKGROUND, gl);
            rectangle(COO, square_c, c.transform.trans(pos_x, pos_y), gl); // deplace le carre de -200 vers la gauche
        });
    }

    fn press(&mut self, args: &Button) {
        if let &Button::Keyboard(key) = args {
            match key {
                Key::Up => self.pos_y -= 10.0,
                Key::Down => self.pos_y += 10.0,
                Key::Left => self.pos_x -= 10.0,
                Key::Right => self.pos_x += 10.0,
                _ => {
                    println!("other1");
                }
            }
        }
    }

    fn release(&mut self, args: &Button) {
        if let &Button::Keyboard(key) = args {
            match key {
                Key::Up => {
                    println!("Up release");
                }
                Key::Down => {
                    println!("Down release");
                }
                Key::Left => {
                    println!("Left release");
                }
                Key::Right => {
                    println!("Right release");
                }
                _ => {
                    println!("other release");
                }
            }
        }
    }
}

fn main() {
    let opengl = OpenGL::V3_2;

    let mut window: GlutinWindow = WindowSettings::new("Tetris Game", [400, 800])
        .graphics_api(opengl)
        .exit_on_esc(true)
        .build()
        .unwrap();

    let mut game = Game {
        gl: GlGraphics::new(opengl),
        pos_x: 200.0,
        pos_y: 0.0,
    };

    let mut events = Events::new(EventSettings::new());
    while let Some(e) = events.next(&mut window) {
        if let Some(r) = e.render_args() {
            game.render(&r);
        }
        if let Some(b) = e.press_args() {
            game.press(&b);
        }
        if let Some(b) = e.release_args() {
            game.release(&b);
        }
    }
}

Solution

If you want to create a square of 4 squares, then you just have to repeat what you already have, i.e. call rectangle 4 times and position the rectangles accordingly.

const RED:    [f32; 4] = [1.0, 0.0, 0.0, 1.0];
const GREEN:  [f32; 4] = [0.0, 1.0, 0.0, 1.0];
const BLUE:   [f32; 4] = [0.0, 0.0, 1.0, 1.0];
const YELLOW: [f32; 4] = [1.0, 1.0, 0.0, 1.0];

let (x, y) = (50.0, 50.0);

rectangle(RED,    rectangle::square( 0.0,  0.0, 30.0), c.transform.trans(x, y), gl);
rectangle(GREEN,  rectangle::square(30.0,  0.0, 30.0), c.transform.trans(x, y), gl);
rectangle(BLUE,   rectangle::square( 0.0, 30.0, 30.0), c.transform.trans(x, y), gl);
rectangle(YELLOW, rectangle::square(30.0, 30.0, 30.0), c.transform.trans(x, y), gl);

The above renders a 4 rectangles that look like this:

If you want to create an L shape, then you can just position 2 rectangles to create that shape.

rectangle(RED,   [0.0,  0.0, 15.0, 30.0], c.transform.trans(x, y), gl);
rectangle(GREEN, [0.0, 30.0, 30.0, 15.0], c.transform.trans(x, y), gl);

You could also bake the positions directly into the rectangle shape, instead of using .trans(x, y), i.e. for the last one it would be [x, y + 30.0, 30.0, 15.0].

If you instead want to create a single polygon from a series of points, then you can use polygon(). The following creates the same L shape as before, just this time it's completely red.

polygon(
    RED,
    &[
        [ 0.0, 45.0],
        [ 0.0,  0.0],
        [15.0,  0.0],
        [15.0, 30.0],
        [30.0, 30.0],
        [30.0, 45.0],
    ],
    c.transform.trans(x, y),
    gl,
);

In the piston2d-graphics crate's documentation you can see additional draw functions, such as ellipse(), image() and text()