Image to ASCII

JMArts Design — Sun, 07 Jul 2024 01:23:17 +0000

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 &lt; img.width; x += cellSize) {
      for (int y = 0; y &lt; 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 &gt;= 0 &amp;&amp; gray &lt;= 25) {
    return 'M';
  } else if (gray &gt;= 26 &amp;&amp; gray &lt;= 50) {
    return '$';
  } else if (gray &gt;= 51 &amp;&amp; gray &lt;= 76) {
    return 'o';
  } else if (gray &gt;= 77 &amp;&amp; gray &lt;= 102) {
    return '|';
  } else if (gray &gt;= 103 &amp;&amp; gray &lt;= 127) {
    return '*';
  } else if (gray &gt;= 128 &amp;&amp; gray &lt;= 152) {
    return ':';
  } else if (gray &gt;= 153 &amp;&amp; gray &lt;= 178) {
    return '\'';
  } else if (gray &gt;= 179 &amp;&amp; gray &lt;= 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 1024x1024 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

DEV Community: JMArts Design

[Boost]

Serpentine Plotter: A Free Web-Based SVG Generator for Beautiful Generative Art

Jawhar Kodadi ・ Apr 2 '25

[Boost]

17 Mindblowing Github Repositories You Never Knew Existed

Kafeel Ahmad (kaf shekh) ・ Dec 27

Image to ASCII

Código em Processing

Explicação do Código