PROGRAMAÇÃO COM IMAGENS VETORIAIS

GUILHERME RANOYA

GUILHERME RANOYA

O QUE SÃO IMAGENS VETORIAIS?

CONSTRUÇÕES GRÁFICAS GERADAS POR FÓRMULAS MATEMÁTICAS OU ALGORITMOS, E NÃO POR UMA MATRIZ BIDIMENSIONAL DE CORES (BITMAP)

BITMAP

VETOR

#FFFFFF

#000000

#868686

X = 3.5
Y = 7.5
A = 1.045
M = 5.3

NEM SEMPRE FOI ASSIM...
AQUI NÃO TEM NEM VETOR, NEM BITMAP.
MAS ESSA É OUTRA HISTÓRIA...

AQUI SIM:
UM VIDEOGAME BASEADO
EM GRÁFICOS VETORIAIS

BITMAP

VETOR

PRECISA DE POUCO PROCESSAMENTO SE NÃO HOUVER COMPACTAÇÃO DOS DADOS, MAS CONSOMEM MEMORIA DE FORMA PROPORCIONAL AO TAMANHO DO ARQUIVO

OS ARQUIVOS FICAM GRANDES

BOM PARA REPRESENTAÇÕES NATURAIS / FOTOREALÍSTICAS E CONSTRUÇÕES QUE DEMANDEM CONTROLE PIXEL A PIXEL

AMPLIAÇÕES DEGRADAM A IMAGEM, QUE POSSUI UM LIMITE DE DIMENSÃO (TELA OU IMPRESSÃO) DETERMINADO PELO TAMANHO DA MATRIZ ARMAZENADA

DEMANDA PROCESSAMENTO COMPUTACIONAL, MAS POUCA MEMÓRIA

SÃO ESCALONÁVEIS (PODEM SER AMPLIADOS SEM LIMITES E SEM DEGRADAÇÃO)

OS ARQUIVOS FICAM PEQUENOS

BOM PARA REPRESENTAÇÕES ARTIFICIALMENTE OBTIDAS, OU CONTRUÇÕES FORTEMENTE MATEMÁTICAS / GEOMÉTRICAS

MANIPULAÇÃO DOS ELEMENTOS GRÁFICOS CONSTRUÍDOS (OBJETOS/POLÍGONOS/VETORES), E NÃO DA IMAGEM PONTO-A-PONTO

BITMAP

VETOR

TRATAMENTO E REPRODUÇÃO DE IMAGENS FOTOGRÁFICAS

RENDERIZAÇÕES FOTOREALÍSTICAS

ARTE COMPUTACIONAL (CONSTRUÇÕES ARTIFICIAIS) PARA REPRODUÇÃO LIMITADA À TELA

PROCESSAMENTO DE VÍDEO E ANIMAÇÃO QUADRO-A-QUADRO

MATERIAL PARA IMPRESSÃO

REPRESENTAÇÃO DE ARQUITETURA E DOCUMENTOS TÉCNICOS (PLANTAS, FACHADAS, CORTES, SECÇÕES, ESQUEMAS CONSTRUTIVOS, ETC.)

PROJETOS EDITORIAIS (REVISTAS, LIVROS, ETC.)

DOCUMENTOS PARA IMPRESSÃO (PDF, POSTSCRIPT)

FONTES E TIPOGRAFIA (TTF, OTF, PFB)

ILUSTRAÇÃO

ANIMAÇÃO DIGITAL

USOS COMUNS

MAIS VELHARIAS DE ONDE VIERAM ESTAS:

AS FERRAMENTAS DE PRODUÇÃO DIGITAL DE DESIGN

OS ANOS 80 E 90

AS FERRAMENTAS DE PRODUÇÃO DIGITAL DE DESIGN

OS ANOS 80 E 90

VOCÊS JÁ PERCEBERAM QUE VELHARIA É O QUE NÃO FALTA, NÉ?

LISP

POSTSCRIPT

PDF (NO GERAL, LATEX)

FLASH (ACTIONSCRIPT)

PROGRAMAÇÃO COM IMAGENS VETORIAS

SVG

NA WEB  ATUALMENTE

BITMAP
<CANVAS>

VETOR
<SVG>

QUE RAIOS É ISSO?

SOCORRO!

ISSO É REALMENTE NECESSÁRIO?

SAUDADES, SQN!

AQUI COMEÇAMOS A CONVERSAR

ADOBE

W3C

X

SVG

O SVG É UM FORMATO DE IMAGEM VETORIAL BASEADO EM XML, QUE POR SUA VEZ É BASEADO NO HTML

É UM SISTEMA DE MARCAÇÃO (TAGS) PARA AS INSTRUÇÕES QUE COMPÕEM UMA IMAGEM VETORIAL

PROGRAMAS COMO ILLUSTRATOR, INDESIGN, FIGMA, E OUTROS EDIORES VETORIAIS, GRAVAM SEUS ARQUIVOS COMO SVG

PARA OS NAVEGADORES WEB PODEMOS CARREGAR ARQUIVOS SVG COMO UMA IMAGEM, ASSIM COMO PODEMOS INSERIR O CÓDIGO SVG DIRETAMENTE NO HTML



COMO NO HTML, AS PROPRIEDADES DOS ELEMENTOS DO SVG PODEM SER DEFINIDAS ATRAVÉS DE CSS, OU MANIPULADAS POR JAVASCRIPT 

<img src="" />
<svg></svg>

SVG

SVG (ARQUIVO) É UM ARQUIVO DE TEXTO COM UM CÓDIGO
COMO ESSE ABAIXO:

<svg viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>

    <rect x=0 y=0 width=500 height=500 fill="#FF0000" />
    <line x1=10 y1=10 x2=250 y2=300 stroke="#FFFFFF" stroke-width=10 />

</svg>

...FÁCIL DE LER, NÃO?
BEM MELHOR QUE POSTSCRIPT...

SVG != POSTSCRIPT

A GRANDE PERDA AQUI É QUE O SVG NÃO É UMA LINGUAGEM DE PROGRAMAÇÃO FORMAL, MAS APENAS UM SCRIPT / LINGUAGEM DE MARCAÇÃO, SEM USO DE VARIÁVEIS, LOOPS, CONDICIONAIS, ETC.

SVG + JAVASCRIPT

O LADO BOM É QUE, NA WEB, PODEMOS USAR JAVASCRIPT PARA PROGRAMAR O SVG.

...É ISSO, POR ACASO, É LADO BOM..?

PROCESSING + SVG

O PROCESSING (ORIGINAL/JAVA) PODE EXPORTAR ARQUIVOS SVG

import processing.svg.*;

void setup() {
  size(400, 400, SVG, "filename.svg");
}

void draw() {
  // Draw something good here
  line(0, 0, width/2, height);

  // Exit the program
  println("Finished.");
  exit();
}

O PROCESSING (ORIGINAL/JAVA) PODE EXPORTAR ARQUIVOS SVG

...MUITO CUIDADO COM ISSO
DEPENDENDO DO QUE VOCÊ CONSTRUIR COM DRAW(), SEU ARQUIVO SVG PODE FICAR GIGANTE E REDUNDANTE...

PROCESSING + SVG

<svg viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>

    <rect x=0 y=0 width=500 height=500>
    <line x1=10 y1=10 x2=250 y2=300>
    
    <rect x=0 y=0 width=500 height=500>
    <line x1=11 y1=10 x2=251 y2=300>
    
    <rect x=0 y=0 width=500 height=500>
    <line x1=12 y1=10 x2=252 y2=300>
    
    <rect x=0 y=0 width=500 height=500>
    <line x1=13 y1=10 x2=253 y2=300>

</svg>
for (x=10; x<14; x++) {
   background(0);
   line(x,0,x+250,300);
}
background(0);
background(0);
background(0);
background(0);
<svg viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>

    <rect x=0 y=0 width=500 height=500>
    <line x1=13 y1=10 x2=253 y2=300>

</svg>

REDUNDANTE E DESNECESSÁRIO

ISSO É O QUE É EFETIVAMENTE VISTO

PROCESSING + SVG

APESAR DE POSSÍVEL, A LÓGICA/MECANISMO DO PROCESSING OPERA COM A PERMANENTE SOBREPOSIÇÃO DA MATRIZ GRÁFICA, QUE FUNCIONA BEM PARA IMAGENS BITMAP, MAS É O OPOSTO DA LÓGICA VETORIAL, ONDE OS ELEMENTOS SÃO DE FATO OBJETOS QUE NÃO PRECISAM SER REDESENHADOS FRAME-A-FRAME

A LÓGICA DO PROCESSING VAI NA CONTRAMÃO DO SVG

COMO O SVG É EM SI UM CÓDIGO, A SOBREPOSIÇÃO SISTEMÁTICA SÓ IRIA INCHAR O ARQUIVO/ELEMENTO COM MAIS CÓDIGO REDUNDANTE

O JAVASCRIPT PURO (VANILLA) TEM FERRAMENTAS MUITO RUDIMENTARES PARA LIDAR COM PROCESSOS GRÁFICOS (O PROCESSING É, SEM DÚVIDA, INFINITAMENTE MELHOR)

SE VOCÊ FOR USAR PROCESSING, PRECISARÁ PENSAR NOS TERMOS (LÓGICA) DE COMO O SVG É CONSTRUÍDO

EXEMPLOS EM FUNCIONAMENTO

GERADOR DE CAPAS/GRAFISMOS PARA OS LIVROS
FRONTEIRAS DO DESIGN

EXPERIMENTO DE LOGOTIPO GENERATIVO PARA
O LABORATÓRIO VISSE

COMPONENTE TIMELINER

GERADOR DE CAPAS/GRAFISMOS PARA OS LIVROS
FRONTEIRAS DO DESIGN

EXPERIMENTO DE LOGOTIPO GENERATIVO PARA
O LABORATÓRIO VISSE

COMPONENTE TIMELINER

ARC SLICE

ARC SLICE

LOGOTIPO GENERATIVO PARA O
LABORATÓRIO VISSE

LOGOTIPO GENERATIVO PARA O
LABORATÓRIO VISSE

BIBLIOTECAS E FRAMEWORKS

REFERÊNCIAS BIBLIOGRÁFICAS

Programando Imagens Vetoriais

By Guilherme Ranoya

Made with Slides.com

Programando Imagens Vetoriais

Como programar imagens vetoriais com SVG

  • 1,002

More from Guilherme Ranoya