Image to ASCII

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

PImage img;
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:

1. 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.
2. 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.
3. 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.
4. 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().
5. 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:

1. 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).

2. Função preload(): Essa função é chamada antes do setup() e carrega a imagem example.jpg antes que o programa seja executado.

3. Função setup(): Essa função é chamada uma vez, no início do programa. Ela cria um canvas de 1024x1024 pixels, define o tamanho do texto para o tamanho da célula ASCII e define a cor do texto como branco.

4. 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.

5. 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.

6. 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.

7. 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