Image to ASCII
Tags: javascript, openprocessing, programming, beginners
Published: 2024-07-07 01:23:17

![Screen do processing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ns6jc2tm4ro9xju1z5k.png)

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:

<details>
 <summary>Processing Code</summary>
```java
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.");
}
```
</details>

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.

![Image ASCII](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nljo9abjza9h8sif4pnm.png)

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

![Image exemplo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g356yzq6m5gyuq3f674z.jpg)

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](https://openprocessing.org/user/343550?view=sketches&o=34) - 
[Image to ASCII
](https://openprocessing.org/sketch/2312114 )