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 memória de forma proporcional ao tamanho do arquivo;

Ampliações degradam a imagem, que possui um limite de dimensão (tela ou impressão) determinado pelo tamanho da matriz armazenada.

Os arquivos ficam grandes;

Bom para representações naturais / foto realísticas, e construções que demandem controle pixel a pixel;

 

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 construçõ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 foto realí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, wft, pfb);

Ilustração;

Animação digital;

USOS COMUNS

Mais velharias de onde estas vieram:

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

LISP

Postscript

PDF (no geral, LaTeX)

Flash (Actionscript)

PROGRAMAÇÃO COM IMAGENS VETORIAS

SVG

NA WEB  ATUALMENTE

BITMAP

VETOR

Que raios é isso?

Socorro!

Isso é realmente
necessário?

Saudades, SQN!

Aqui começamos a
conversar

ADOBE

W3C

X

<CANVAS>
<SVG>

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 o Illustrator, Indesign, Figma, e outros editores 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 (arquivo) é um 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

100 100 translate
/grid {0.5 0.3 0 0 setcmykcolor 
gsave
2 setlinewidth 400 0 moveto 0 0 lineto 0 500 lineto stroke
grestore
gsave
0.3 setlinewidth
5 { 30 100 moveto 400 100 lineto stroke 0 100 translate } repeat
grestore
gsave
0.3 setlinewidth
4 { 100 20 moveto 100 500 lineto stroke 100 0 translate } repeat
grestore
gsave
/tekst 3 string def /Helvetica findfont 10 scalefont setfont
100 100 500 { /y exch def 5 y 2 sub moveto y tekst cvs show } for
90 100 400 { /x exch def x 5 moveto x 10 add tekst cvs show } for
grestore 
0 setgray } bind def
grid

%Example 17

/triangle {100 0 rlineto -50 50 rlineto -50 -50 rlineto} def

%First triangle
gsave
100 100 translate
0 20 200 {
/x exch def
0 x 180 div 0 setrgbcolor
0 x moveto
triangle
fill
}for
grestore

%Second triangle
gsave
200 100 translate
0 30 300 {
/x exch def
0 0 x 270 div setrgbcolor
0 x moveto
triangle
fill
}for
grestore

showpage

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!

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

<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 realmente acaba 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 contra-mão do SVG;

Como o SVG é, em si, um código, a sobreposição sistemático 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 Porcessing é, sem dúvida, infinitamente melhor);

Se você for usar Processing, precisará pensar nos termos (lógica) de como o SVG é construído.

PROCESSING + SVG

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,019

More from Guilherme Ranoya