Esse código é uma implementação de arte ASCII em Processing, que converte uma imagem em numa representação de caracteres ASCII. Vamos comparar esse código com a versão em Processing e explicá-lo em detalhes:
Código em Processing
O código em Processing seria muito semelhante, com algumas diferenças sintáticas e de API. Aqui está uma versão equivalente em Processing:
Processing Code
int cellSize = 8; // Tamanho da célula ASCII
void preload() {
// Carrega a imagem antes do setup
img = loadImage(“example.jpg”);
}
void setup() {
size(1024, 1024);
textSize(cellSize);
fill(255); // Define a cor do texto como branco
}
void draw() {
background(0);
if (img != null) {
img.filter(GRAY);
pushMatrix();
scale(1.0 * width / img.width, 1.0 * height / img.height);
for (int x = 0; x < img.width; x += cellSize) {
for (int y = 0; y < img.height; y += cellSize) {
color c = img.get(x, y);
float gray = brightness(c);
char asciiChar = getASCIIChar(gray);
text(asciiChar, x, y + cellSize);
}
}
popMatrix();
}
}
char getASCIIChar(float gray) {
if (gray >= 0 && gray <= 25) {
return ‘M’;
} else if (gray >= 26 && gray <= 50) {
return ‘$’;
} else if (gray >= 51 && gray <= 76) {
return ‘o’;
} else if (gray >= 77 && gray <= 102) {
return ‘|’;
} else if (gray >= 103 && gray <= 127) {
return ‘*’;
} else if (gray >= 128 && gray <= 152) {
return ‘:’;
} else if (gray >= 153 && gray <= 178) {
return ”’;
} else if (gray >= 179 && gray <= 204) {
return ‘.’;
} else {
return ‘ ‘;
}
}
void keyPressed() {
if (key == ‘s’) {
saveASCIIArt(); // Salvar a imagem ASCII art
} else if (key == ‘r’) {
img = null; // Limpar a imagem para começar de novo
}
}
void saveASCIIArt() {
saveCanvas(“ascii-art”, “png”);
println(“ASCII art saved as image.”);
}
As principais diferenças entre o código em Processing e o código em JavaScript (P5.js) são:
Sintaxe e Nomenclatura: O código em Processing usa a sintaxe e a nomenclatura da linguagem Java, enquanto o código em P5.js usa a sintaxe e a nomenclatura do JavaScript.
Declaração de Variáveis: Em Processing, as variáveis são declaradas usando o tipo de dado (como PImage para imagens), enquanto em P5.js, as variáveis são declaradas usando let.
Funções: Em Processing, as funções são definidas usando a palavra-chave void ou o tipo de retorno, enquanto em P5.js, as funções são definidas usando a sintaxe de função do JavaScript.
Chamadas de Função: Em Processing, as funções são chamadas usando o nome da função seguido de parênteses, como loadImage() e text(). Em P5.js, as funções são chamadas da mesma maneira, mas a sintaxe é ligeiramente diferente, como loadImage() e text().
Constantes: Em Processing, as constantes são definidas usando final, como GRAY. Em P5.js, as constantes são acessadas diretamente, como GRAY.
Apesar dessas diferenças sintáticas, o fluxo de execução e a lógica do programa são muito semelhantes entre as duas versões. Ambas carregam uma imagem, convertem-na em tons de cinza, percorrem a imagem célula por célula e exibem os caracteres ASCII correspondentes no canvas.
Explicação do Código
O código em Processing e o código em P5.js realizam as mesmas tarefas, com algumas diferenças de sintaxe e API. Vamos explicar o código passo a passo:
Declaração de Variáveis: Ambos os códigos declaram uma variável para armazenar a imagem (img) e uma variável para definir o tamanho da célula ASCII (cellSize).
Função preload(): Essa função é chamada antes do setup() e carrega a imagem example.jpg antes que o programa seja executado.
Função setup(): Essa função é chamada uma vez, no início do programa. Ela cria um canvas de 1024×1024 pixels, define o tamanho do texto para o tamanho da célula ASCII e define a cor do texto como branco.
Função draw(): Essa função é chamada repetidamente, a cada quadro. Ela:
Define o fundo como preto.
Verifica se a imagem foi carregada.
Converte a imagem para tons de cinza.
Dimensiona a imagem para preencher todo o canvas.
Percorre a imagem célula por célula.
Para cada célula, obtém o valor de brilho (escala de cinza) e usa a função getASCIIChar() para obter o caractere ASCII correspondente.
Exibe o caractere ASCII no canvas.
Função getASCIIChar(gray): Essa função recebe um valor de brilho (escala de cinza) e retorna o caractere ASCII correspondente, com base em um conjunto de intervalos predefinidos.
Função keyPressed(): Essa função é chamada quando uma tecla é pressionada. Ela verifica se a tecla pressionada é ‘s’ ou ‘r’:
Se for ‘s’, ela chama a função saveASCIIArt() para salvar a imagem ASCII art.
Se for ‘r’, ela define a variável img como null, limpando a imagem para que o usuário possa começar de novo.
Função saveASCIIArt(): Essa função salva o canvas atual como uma imagem PNG com o nome ‘ascii-art’ e registra uma mensagem no console.
Embora haja algumas diferenças sintáticas entre o código em Processing e o código em P5.js, a lógica e o fluxo de execução são muito semelhantes. Ambos os códigos convertem uma imagem em uma representação de caracteres ASCII e permitem que o usuário salve a imagem ASCII art.
Sketch em openprocessing.org –
Image to ASCII
