Enrico Gastaldelli

Creative Code 01 · Ferramenta · Creative code

Slice & Repeat

A foto vira uma grade irregular de células. Cada célula mostra uma fatia da região do rosto, às vezes repetida, espelhada ou comprimida.

Abrir a ferramenta

Cliente
Projeto autoral
Ano
2026
Função
Design e desenvolvimento
Serviços
Design de interface
Creative code
Ferramenta web
Ferramentas
HTML
CSS
JavaScript
Canvas
Interface da ferramenta Slice & Repeat: painel de controles à esquerda e, à direita, o retrato de um homem de óculos com uma grade de fatias do próprio rosto sobre a testa, o nariz, a barba e o queixo.
01

A ferramenta

Você carrega uma foto e marca a região do rosto. A ferramenta divide essa região em linhas e células de tamanhos diferentes e preenche cada célula com uma fatia tirada da própria foto. Algumas células repetem a fatia na horizontal ou na vertical, outras a espelham ou a comprimem. O resultado esconde o rosto sem apagá-lo.

Cada composição nasce de uma semente. O mesmo número, com os mesmos ajustes, dá sempre o mesmo resultado, e o sorteio de uma nova semente é um atalho (tecla R). Também dá para clicar numa célula e mudar só ela.

Tela completa da ferramenta Slice & Repeat com a foto de exemplo carregada: painel com imagem, composição, grade, fatias e repetição à esquerda e a pré-visualização com a região do rosto marcada à direita.
A interface: tudo em um painel, com a pré-visualização e a região do rosto ao lado.
02

Controles

Imagem
Carregar, arrastar, colar (⌘/Ctrl+V) ou usar a foto de exemplo; região do rosto que se move e se redimensiona
Composição
Semente que guarda o resultado e sorteio de nova composição
Célula
Recorte simples, repetição na horizontal ou na vertical, número de repetições, espelhar e sortear outra fatia
Grade
De 2 a 12 linhas e de 1 a 8 colunas, com irregularidade e espaço entre as células, em preto ou branco
Fatias
Origem na região ou na foto inteira, mistura da origem e aproximação do recorte
Repetição
Quantidade de células repetidas, máximo de repetições, compressão e espelhamento
Formato
Original, Feed 4:5, Feed 1:1 e Stories 9:16, com fundo branco, preto ou transparente
Exportação
PNG ou JPG nas dimensões exatas do formato escolhido
Exemplo de saída da ferramenta: retrato de um homem de óculos e camiseta preta, sobre fundo cinza, com o rosto coberto por uma grade de fatias repetidas e espelhadas da testa, do nariz e da barba, no formato 4:5.
Exemplo de saída no formato Feed 4:5 (1080×1350), com a foto de exemplo e a semente 615392.
03

Privacidade

Tudo acontece no navegador. A foto não é enviada a nenhum servidor e o site não guarda nada.