UNIVERSIDADE DE BRASLIA

INSTITUTO DE ARTES
PROGRAMA DE PS-GRADUAO EM ARTE E TECNOLOGIA

DESENHO SCRIPTIVO: PROGRAMAO GRFICA APLICADA

TRANSFORMAO DE TEXTO EM IMAGEM.

FERNANDO AQUINO MARTINS

Braslia, agosto de 2014

UNIVERSIDADE DE BRASLIA
INSTITUTO DE ARTES
PROGRAMA DE PS-GRADUAO EM ARTE E TECNOLOGIA

DESENHO SCRIPTIVO: PROGRAMAO GRFICA APLICADA

TRANSFORMAO DE TEXTO EM IMAGEM.

por
FERNANDO AQUINO MARTINS

Prof. Dr. Rogrio Cmara

Orientador

Dissertao apresentada ao Instituto de Artes

da Universidade de Braslia para a obteno do
grau de Mestre em Arte e Tecnologia.

Durante o desenvolvimento deste trabalho o autor recebeu auxlio financeiro da CAPES.

Braslia, agosto de 2014

DESENHO SCRIPTIVO: PROGRAMAO GRFICA APLICADA

TRANSFORMAO DE TEXTO EM IMAGEM.

Comisso Julgadora:
Prof. Dr. Rogrio Jos Cmara (orientador) DIN/UNB
Profa. Dra. Carla Denise Castanho (CIC/UNB)
Prof. Dr. Slvio Perini Zamboni (VIS/UNB)

"!

AGRADECIMENTOS

Jesus Cristo_O Caminho, A Verdade e A Vida.

#!

SUMRIO
LISTA DE FIGURAS ------------------------------------------------------------------------------ 07
LISTA DE TABELAS ----------------------------------------------------------------------------- 08
LISTA DE CDIGOS ----------------------------------------------------------------------------- 08
RESUMO --------------------------------------------------------------------------------------------- 09
ABSTRACT ------------------------------------------------------------------------------------------ 10
CAPTULO 1 INTRODUO -------------------------------------------------------------- 11
1.1

Consideraes iniciais ------------------------------------------------------------- 11

1.2

Caracterizao do problema ------------------------------------------------------- 12

1.3

Objetivo ----------------------------------------------------------------------------- 13

1.4

Justificativa -------------------------------------------------------------------------- 13

1.5

Metodologia da pesquisa ---------------------------------------------------------- 14

1.6

Organizao da dissertao ------------------------------------------------------- 16

CAPTULO 2 O DESENHO SCRIPTIVO ------------------------------------------------ 17

2.1

Desenho e script -------------------------------------------------------------------- 19

2.2

Construo de um desenho a partir de um texto ------------------------------- 22

2.3

Comunicao grfica de ideias --------------------------------------------------- 25

2.4

Mquina (sem rodas) -------------------------------------------------------------- 30

Descrio A ------------------------------------------------------------------------- 31
Descrio B ------------------------------------------------------------------------- 32

2.5

O desenho contido em uma frmula -------------------------------------------- 36

2.6

Uma geometria sem distncia ---------------------------------------------------- 42

2.7

Recurso e repetio --------------------------------------------------------------- 46

CAPTULO 3 DETALHES DE IMPLEMENTAO - ---------------------------- 55

3.1

Arquitetura cliente/servidor ------------------------------------------------------- 59

3.2

Desenhando no lado cliente ------------------------------------------------------- 62

3.3

Desenho vetorial para web -------------------------------------------------------- 70

3.4

Comparao entre SVG e canvas ------------------------------------------------ 74

$!

3.5

Desenho no lado servidor -------------------------------------------------------- 76

3.5.1 Construo de Polgonos ------------------------------------------------ 79

3.6

Desenho distribudo ---------------------------------------------------------------- 83

3.6.1 AJAX -------------------------------------------------------------------------- 86
3.6.2 CGI -------------------------------------------------------------------------- 88
3.6.3 Ambiente de hospedagem ------------------------------------------------ 90

CAPTULO 4 PROCESSO DE TRABALHO -------------------------------------------- 93

CAPTULO 5 CONCLUSO ---------------------------------------------------------------106
BIBLIOGRAFIA -----------------------------------------------------------------------------------109

%!

LISTA DE FIGURAS
Figura 1 Geometria descritiva de Drer. -------------------------------------------------------------------------- 23
Figura 2 Construo do tringulo retngulo partindo de uma reta simples. ---------------------------------- 24
Figura 3 Uma possvel ontologia para a geometria. ------------------------------------------------------------- 27
Figura 4 Sequncia de construo e desconstruo. Lgica natural? ----------------------------------------- 27
Figura 5 The Half Triangle, de Raymond Lull. ------------------------------------------------------------------ 30
Figura 6 Tringulo da inteligncia web. --------------------------------------------------------------------------- 33
Figura 7 Comparao das operaes de uma empilhadeira. ------------------------------------------ 36
Figura 8 Exemplo de desenho contido em uma frmula. ------------------------------------------------------- 37
Figura 9 Tringulo de Ouro Renascentista. ----------------------------------------------------------------------- 38
Figura 10 Plano coordenado para web.

------------------------------------------------------------------------- 39

Figura 11 Manfred Mohr. "The cubic limit series". ------------------------------------------------------------- 45

Figura 12 Uma imagem recursiva. -------------------------------------------------------------------------------- 46
Figura 13 Curvas de Hilbert de ordem 1, 2, 3. ------------------------------------------------------------------- 47
Figura 14 Demonstrao de um desenho construdo a partir de uma regra. --------------------------------- 48
Figura 15 Demonstrao de um padro recursivo possvel, mas restrito. ------------------------------------ 48
Figura 16 Acerca do Ritornelo, A mquina de gorjear. --------------------------------------------------------- 49
Figura 17 Curvas de Hilbert de 4 ordem no plano coordenado. ---------------------------------------------- 51
Figura 18 Curvas de Hilbert de ordem H1... H5. ----------------------------------------------------------------- 52
Figura 19 Cubos de cor em unidades RGB e CMYK. ---------------------------------------------------------- 56
Figura 20 Diagrama de formato de imagens. -------------------------------------------------------------------- 58
Figura 21 Arquitetura cliente/servidor ---------------------------------------------------------------------------- 60
Figura 22 Arquitetura cliente/servidor ---------------------------------------------------------------------------- 61
Figura 23 Desenho do lado cliente com o elemento canvas HTML 5 e JavaScript. ------------------------ 63
Figura 24 Coordenadas do contexto 2D de canvas -------------------------------------------------------------- 63
Figura 25 Um quadrado escrito em JavaScript e plotado em canvas HTML5. ------------------------------ 66
Figura 26 Mecanismo. ----------------------------------------------------------------------------------------------- 67
Figura 27 Curva de Sluse escrita em javaScript. ----------------------------------------------------------------- 68
Figura 28 Alavancas baseadas nas condies do mecanismo. ------------------------------------------------- 69
Figura 29 Estrutura de desenho vetorial com SVG/XML. ------------------------------------------------------- 71
Figura 30 Um quadrado vetorial escrito com SVG/XML. ------------------------------------------------------- 73
Figura 31 Um desenho recursivo vetorial escrito com SVG/XML. -------------------------------------------- 74
Figura 32 Anlise de cenrios para escolha entre canvas e SVG ---------------------------------------------- 75
Figura 33 Desenho no lado do servidor plotado como bitmap com GD/Perl -------------------------------- 77
Figura 34 Um quadrado escrito em Perl. -------------------------------------------------------------------------- 79
Figura 35 Curva W de 1 ordem. Matriz de pontos sobre o plano. ----------------------------------------- 83
Figura 36 Lgica distributiva presente em uma Curva W de 2 Ordem. ----------------------------------- 86
Figura 37 Diagrama de uma requisio sncrona tradicional --------------------------------------------------- 87

&!

Figura 38 Diagrma de uma requisio assncrona com AJAX ------------------------------------------------- 87

Figura 39 Diagrama de uma seo CGI --------------------------------------------------------------------------- 89
Figura 40 Curva W de 2 Ordem. Mtodo de trabalho com pixel. ------------------------------------------ 90
Figura 41 Ambiente de trabalho em um servidor de hospedagem. -------------------------------------------- 92

LISTA DE TABELAS
Tabela 1 NBR 8403 - Tipos de linhas e sua aplicao. ---------------------------------------------------------- 29
Tabela 2 Grfico e valores para y = x2. ---------------------------------------------------------------------------- 40
Tabela 3 Grfico e valores para x = y2 - 2y. ----------------------------------------------------------------------- 40
Tabela 4 Grfico e valores para y = 1/x. --------------------------------------------------------------------------- 41
Tabela 5 Formatos de imagem e suas caractersticas. ----------------------------------------------------------- 57
Tabela 6 Mtodos e atributos da API de canvas. ----------------------------------------------------------------- 64
Tabela 7 Elementos e atributos SVG/XML. ----------------------------------------------------------------------- 71
Tabela 8 Comparao entre desenhos feitos em SVG e canvas. ----------------------------------------------- 76
Tabela 9 Primitivas e mtodos auxiliares de GD Perl. ---------------------------------------------------------- 78
Tabela 10 Verificao da poltica de mesma origem. ------------------------------------------------------------ 85
Tabela 11 Mtodos do objeto XMLHttpRequest. ---------------------------------------------------------------- 87
Tabela 12 Variveis de ambiente CGI. ------------------------------------------------------------ 88

LISTA DE CDIGOS
Cdigo 1 Curva de Sluse escrita em JavaScript. ----------------------------------------------------------------- 68
Cdigo 2 Desenho recursivo escrito em SVG/XML. ------------------------------------------------------------- 73
Cdigo 3 Polgono escrito em Perl. -------------------------------------------------------------------------------- 82
Cdigo 4 Desenho distribudo. ------------------------------------------------------------------------------------- 91

'!

RESUMO
Este trabalho se insere no campo da arte e tecnologia. Investiga a construo de
imagens em ambientes virtuais e est fundamentado na disciplina desenho. O objetivo
desenvolver um conjunto de ferramentas e trabalh-las pela ptica da
programao grfica, da filosofia e da linguagem, fornecendo assim um material
relevante sobre leitura, manipulao e gravao de imagens ou sequncia de
imagens a partir de um texto. A metodologia seguiu os pressupostos da teoria
aliada prtica, trazendo diversificados exemplos de metalinguagem entre a
imagem e o texto e tambm demonstraes sobre geometria e tecnologia. A
concluso desse estudo sugere que o desenho uma ferramenta de trabalho e
ensino que pode ser operacionalizada por meio de algoritmos e estrutura de
dados. Sendo uma atividade construtiva, estratgico inserir em nosso dia-a-dia a
problemtica e a geometria das formas no espao, assim como os fundamentos da gesto
informativa e do processo de trabalho em arte.
Palavras-chave: Desenho, Programao Grfica, Texto.

(!

ABSTRACT
This work falls within the field of art and technology. Investigates the construction
of images in virtual environments and is based on the drawing discipline. The purpose is to
develop a set of tools and work them through perspective graphical programming,
philosophy and language, thus providing a relevant material on reading, writing and
manipulation of images or sequence of images from a text. The methodology followed the
assumptions of the allied theory to practice, bringing diverse examples of metalanguage
between image and text and also demonstrations of geometry and technology. The
conclusion of this study suggests that the drawing is a work tool and teaching that can be
operated by means of algorithms and data structures. Being constructive activity, it is
strategic to enter into our day-to-day problems and the geometry of forms in space, as well
as the fundamentals of information management and work process in art.
Keywords: Drawing, Graphics Programming, Text.

)*!

CAPTULO 1
Introduo
1.1 Consideraes iniciais
A internet um ambiente que sempre desafia a rea de criao grfica. Hoje, com o
crescimento do volume de dados provindos das redes de comunicao, torna-se necessrio a
criao de novas dinmicas para o processamento e a interao entre informao e imagem,
visualizao de dados ou mesmo interfaces dinmicas. A maioria dos dispositivos ainda
necessitam de uma sada grfica para sua operacionalizao. Cmeras fotogrficas se
popularizaram, celulares tiram fotos e postam instantaneamente o contedo nas redes sociais.
Aplicaes de anlise de dados registram suas estatsticas em grficos e geram tabelas para
visualizao de rendimentos, preos de produtos, estoques e controle de fluxos. Infogrficos
auxiliam o aprendizado, sintetizam estruturas de DNA, ensinam sobre cadeias alimentares,
ontologias de espcies, produo e consumo de alimentos.
A cada dia, os programas tornam-se mais sensveis ao contexto, ou seja,
transformam-se de acordo com geolocalizao, perfil e outros dados pessoais do cliente. As
interfaces se diversificaram na interao com o sistema, sendo ativadas por meio de gestos,
sons e toques. No espao plano do ecr possvel simular multidimenses de imagens,
captadas pelas cmeras do usurio ou provindas de outras fontes distribudas.
Atualmente, a rea de computao grfica (CG) est presente nos mais diversos
segmentos: arte, medicina, diagnsticos, todas as reas de engenharia (mecatrnica, civil,
aeronutica e as outras), metereologia, marketing, segurana pblica, turismo, processamento
de dados, indstria, educao, tratamento de imagens, desenvolvimento motor, paisagismo,
arquitetura, geografia, colheitas, astronomia, planejamento, por exemplo (Gianetti, 2006),
(VIANA & MELO, 2008) e (DOMINGUES, 1997).
Basta pensarmos em nossas tarefas cotidianas, para se evidenciar o fato de que, a todo
momento, estamos envoltos por imagens sintticas e interativas. As operaes de corte,
cpia, tratamento e outras formas de interao digital, tornaram-se simples ferramentas do
dia-a-dia, como se fossem garfos, martelos ou pincis. A labuta sobre a imagem no mais

))!

restrita a um grupo privilegiado, como nos perodos do renascimento e do barroco, mas est
destinada ao povo, milhes de pessoas, que manipulam, editam e compartilham suas
experincias visuais. Por esse motivo, no h dvida de que a nossa relao com a imagem
est em processo de transformao.

1.2 Caracterizao do problema

Como estudar o desenho na sociedade em rede? Como trabalh-lo como
disciplina, exata e tecnicamente precisa? Como desenvolver esse carter tcnico,
que uma das faces do desenho, considerando que est sendo esquecida dentro do
campo artstico.
Este trabalho de mestrado se insere na linha de pesquisa Arte e Tecnologia,
do Programa de Ps-Graduao em Arte PPG-Arte, da Universidade de Braslia
UnB. A Arte o local desta pesquisa. A disciplina histrica Desenho o objeto.
Sendo o desenho planejamento, engenharia e conhecimento, alm de outras
prticas, como ento, direcionar um estudo que satisfaa as prerrogativas de
concentrao e preciso tcnica?
A Fsica se matematizou nos sculos XVI e XVII; a Lgica se matematizou
nos sculos XIX e XX (SILVESTRE, 2011); e o desenho, para permanecer na era
da informtica, tambm ter que se matematizar. difcil pensar um desenho
digital sem a lgica matemtica. O estudo da imagem na web est parado nas
predefinies colocadas por aplicativos vrios, com intuito de comrcio e
dominao. Nesse sentido, para trabalhar o desenho na web, preciso partir para o
cdigo, pensar o suporte e as suas recurses.
Eis o problema aqui enfrentado. Trata-se de um passo que, com certeza, no
ser o primeiro nem o certeiro. O fato que a imagem est mistificada em uma
mgica incompreensvel que fascina e controla. Ento torna-se necessrio se
apoderar da imagem, conhec-la. O mtodo aqui apresentado o conhecimento
pelo desenho e a concentrao dessas operaes no plano coordenado.

)+!

1.3 Objetivo
O objetivo dessa dissertao desenvolver um conjunto de ferramentas de
desenho e trabalh-las pela ptica da programao grfica, da filosofia e da
linguagem, fornecendo assim um conjunto prtico e terico sobre leitura,
manipulao e gravao de imagens ou sequncia de imagens a partir de um texto.

1.4 Justificativa
Atualmente existem vrias abordagens que tratam a questo da Arte e da Tecnologia
em suas mais diversas linguagens e procedimentos (VENTURELLI, 2008). Em relao ao
desenho, essas perspectivas demonstram apenas procedimentos tradicionais da linguagem,
estruturados em visualizaes digitais. H pouca inovao e poucos estudos que encaram as
primitivas da tecnologia concatenadas com as primitivas da arte. Tambm, na arte em geral,
difcil encontrar pesquisas que procedem uma reviso histrica da disciplina Desenho e ainda
h poucos estudos que avanam esse desenvolvimento no contexto das novas tecnologias
(LAS-CASAS, 2008), (BORGES & JENSEN, 2014) e (SANTOS, 2000) .
Em face desse cenrio, considera-se prioritrio desenvolver o desenho pela via das
ferramentas, para um ponto em que elas permitam ao povo investigar processos de um
fenmeno natural e transfer-los para o mundo das tcnicas. H uma evidente necessidade,
principalmente na sociedade brasileira, de desmistificar a imagem. preciso revisar o
trabalho e as ferramentas de manipulao da forma e do espao. Eis a essncia da disciplina
Desenho. A reviso necessria, mas tarefa imensa que no pode ser vencida em uma
dissertao de mestrado.
A experincia adquirida no trabalho e na manipulao de mquinas diversas, seja na
indstria de lapidao de pedras, de beneficiamento de gros e na prpria computao,
propiciou ao autor dessa dissertao o entendimento de que os mecanismos devem estar
inseridos no seio das comunidades, assumindo um papel central no cotidiano dos
trabalhadores. A mquina o elemento que realiza a transformao da matria prima, o
instrumento que permite ao operrio a manipulao dos elementos da natureza e traz a
dinmica para o interior do trabalho. Isso podemos constatar com o advento da informtica.
Contudo, a tecnologia digital est se distanciando desse processo.

)"!

Justifica-se, portanto, a necessidade de estudar, sistematizar e construir ferramentas

grficas que se ajustem a nossa realidade, assim como um dia o fizeram pases como
Alemanha, Estados Unidos e Rssia. No apenas adquirir photoshops, dreamweavers ou
autocads, mas inserir no dia-a-dia a problemtica e a geometria das formas no espao, sendo
este o papel histrico da arte que agora ressurge com urgncia, ou seja, tornar-se vanguarda
no processo de renovao da educao. De certa forma, este trabalho aponta para essa
direo.

1.5 Metodologia de pesquisa

Como bastante comum no campo da arte e tambm da tecnologia, adotou-se como
metodologia o procedimento da teoria aliada prtica, ou seja, a conceituao do objeto e
depois sua construo. Primeiro, porque o Desenho , em essncia, uma aplicao terica
sobre o papel, assim como a tecnologia digital tambm pressupe a implementao de um
objeto em um ambiente virtual. Portanto, se entendeu como necessrio o uso deste mtodo
em uma pesquisa sobre desenho digital implementado na internet.
Ademais, ao considerar o objetivo subjacente deste trabalho, que a representao do
espao no plano, podemos considerar que esse movimento pressupe a sntese da realidade
no ecr. No h teoria que satisfaa esse pressuposto, preciso praticar. O desenho antes de
tudo uma aplicao prtica, estatuto natural que objetiva o delineamento de uma teoria e a
sua demonstrao no papel. Ento, o protocolo de pesquisa foi a prpria demonstrao,
podendo ser exemplificada com a considerao do gemetra e astrnomo alexandrino-grego
Apolnio de Perga (c.262-190 a.C.) que considerava a validade de seus estudos "pelo
simples fato de serem demonstraes". A prova de validade de um desenho a sua prpria
execuo.
Assim, a prtica contou com aproximadamente 1000 horas de programao, somente
para testar os objetos virtuais discutidos nesse trabalho. Os testes foram guiados por estudos
de caso em trigonometria coordenados com a programao grfica, notadamente em
linguagens de script, como Perl, PHP, SVG e JavaScript. Tidas como ferramentas de
trabalho, assim como pincis, lpis e rguas, intentou-se chegar a um conjunto de primitivas
para desenho scriptivo que melhor representasse a coalescncia entre texto e imagem.

)#!

Sendo o desenho uma linguagem que trabalha essencialmente com o risco sobre o
suporte, todo contedo foi agregado sob essa constante. Por exemplo, a curva de Hilbert de
4 ordem apresentada na Figura 17 foi ordenada como uma sequncia de coordenadas, algo
que pode muito bem ser entendido como um movimento de imagens no plano, muito
utilizado em vdeos e animaes. Mas esse fator no est descrito explicitamente, visto que
implicaria um detalhamento adicional que fugiria aos objetivos do trabalho. Por isso, optouse por trabalhar cada exemplo como objeto e, ao conjunto de objetos, a sua explicao; uma
tradio da disciplina desenho, praticado por (Vitrvio, 2007), (Vignola, 1562), (Drer,
1525), (Da Vinci, 1478-1519) e (Artobolevski, 1976).
No primeiro momento foi feita a reviso da literatura e a definio dos parmetros de
apresentao deste estudo. Os parmetros foram: demonstrao pelo mtodo geomtrico,
descrio das construes pela via filosfica e implementao dos resultados no domnio
www.desenhoscriptivo.com.br. A cadncia do texto foi considerada prioridade, visto ser
assunto de relativa complexidade e com forte tendncia ao enfado. Por isso, as descries
quantitativas dos elementos foram suprimidas e em seu lugar foi ressaltada a modularidade e
qualidade das operaes para o simples entendimento, considerando que um objeto explica o
outro, numa estrutura que compreende mais uma lemniscata do que uma exponencial.
Essas definies somente foram compreendidas aps a fase da qualificao, onde a
banca apontou repetidamente a ausncia de uma forma textual bem definida, alm de outras
questes como a falta de foco e a quantidade excessiva de dados. Ento, a primeira atitude
foi a eliminao de 80% do texto apresentado na qualificao e a reconstruo do objeto a
partir do campo prioritrio da programao grfica. O Captulo 3 foi completamente
adicionado e o Captulo 4 totalmente reformulado.
Por fim, a metodologia foi desenvolvida como uma tentativa de se realizar uma
metateoria, pois assim exigiu o objeto, de forma que o texto construsse a imagem e a
imagem fosse proposio para o texto. Antes de mais nada, trata-se de um trabalho de
desenho, disciplina fundamental para o exerccio do conhecimento com vistas
compreenso do universo que nos cerca.

)$!

1.6 Organizao da dissertao

A presente dissertao constituda por 4 captulos, ou seja, a Introduo e outros 3
captulos cujos contedos esto descritos a seguir.
O Captulo 2 apresenta as caractersticas do que se convencionou chamar Desenho
Scriptivo. A abordagem feita com base numa geometria filosfica que pretende traar
uma ontologia entre desenho e tecnologia. Trata-se de um objeto baseado em sete mtodos:
definio, construo, comunicao, mquina, frmula, distncia e repetio. Os elementos
vo sendo apresentados em metalinguagem texto e imagem at se chegar
Curva de Hilbert de 4 ordem no plano coordenado, considerado um elemento
sntese dos conceitos trabalhados no captulo.
O Captulo 3 trata dos detalhes de implementao e descrio de ferramentas
especficas de programao grfica. Aqui, a preocupao principal foi a de fornecer um
conjunto significativo para o Desenho Scriptivo. O processo construtivo foi o desenho
distribudo, ou seja, um desenho interativo composto de partes oriundas de diversas
origens e montadas em um nico lugar. Optou-se por 3 ferramentas de desenho e 2
ferramentas de comunicao. As ferramentas de desenho foram canvas HTML5 e
javaScript, para um desenho do lado do cliente; SVG/XML para um desenho vetorial na
web; e GD Perl para um desenho do lado do servidor. As ferramentas de comunicao
escolhidas foram AJAX e CGI.
No Captulo 4, que trata do processo de trabalho, foram apresentados 10 Desenhos
scriptivos como proposio. Os desenhos deste captulo so implementaes que
representam a sntese conjuntiva desta dissertao, pois so compostos por diversos
elementos de linguagem como nmero, ttulo, desenho, descrio e frmula, perfeitamente
concatenados, servindo como prova e exemplo de transformao dinmica entre textos,
regras e imagens. Os exemplos foram rigorosamente produzidos segundo critrios
semnticos, estruturais e construtivos. Funcionam como uma srie padronizada de exemplos
que compartilham de uma filosofia-geomtrica para o Desenho scriptivo.

)%!

CAPTULO 2
O desenho scriptivo
Um texto sobre a histria da linguagem desenho, ou uma ontologia sobre o ato de
desenhar, no poderia ser construdo sem uma meno especial linguagem escrita.
Alguns exemplos, surgidos no encontro entre indgenas e europeus, como o dos ndios
tupiniquins, que no conseguiam reproduzir seus desenhos corporais com lpis e
papel, uma vez que estavam acostumados com a pintura no espao flexvel e
tridimensional

do

corpo

humano.

Outro

exemplo,

meno

indgena

ilhuicactlapaltlachia para cor do cu, que no significa uma cor especfica (azul
ou alaranjado), mas algo que contm uma varivel dependente de tempo, espao
e percepo. Tambm a observao feita por Jacques Derrida (1973) sobre a
denominao Nhambiquara para o ato de escrever, iekariukedjutu, isto ,
fazer riscos. Estes exemplos indgenas so claros quanto a coalescncia ou
ciso entre desenho e escrita.
De fato, a construo de imagens a partir de textos uma atividade cheia
de desafios e incongruncias, algo que, dito de forma espontnea, pode ser
colocado em paralelo com o problema da quadratura do crculo, um clssico da
antiguidade. Parece mesmo no ser possvel a resoluo da questo, mas somente
uma aproximao.
Afinal, o que uma imagem? O que um texto? possvel descrever
todas as imagens, necessrio ver para ler? Seria possvel um cego aprender a
desenhar com base na relao xy de um plano coordenado? possvel criar um
algoritmo que reproduz uma pintura em camadas?
Imagens geradas por frmulas matemticas, ou mesmo descritas por
textos, trazem implcitas esta relao com a realidade e o mundo fsico. No h
separao nesse sentido. Portanto, fazer transies entre imagens e textos no
uma medida simples, uma vez que explora diversos limites, entre redes,
semnticas, percepes e lgicas. um trabalho que exige engenho e arte.

)&!

Assim como nas cincias exatas, que descrevem processos qumicos ou

eventos fsicos do mundo, o estudo da imagem tambm pode deduzir sobre
formas, cores e camadas da realidade perceptiva. Trata-se de uma lgica que
mensura o espao e o ser humano numa projeo ortogonal no papel.
bastante esclarecedor o fato de Picasso possuir memria muscular sobre
as pinceladas produzidas pelos pintores clssicos que estudava. Capacidade
adquirida pela repetio exaustiva das obras vistas em museus de arte em que
visitava. Sendo assim, a tentativa de concatenar o escopo da tecnologia com a
problemtica da arte deve considerar o fator humano, e no apenas descrever
sobre processos e rotinas de computao. Eis o objeto e o mote para essa
pesquisa, que feita no campo terico e prtico da arte e da tecnologia.
No se pretende neste captulo encerrar estes assuntos nem definir uma
semntica intacta sobre essa relao verificadamente dinmica. O que se oferece
aqui um subconjunto de possibilidades referentes ao desenho construdo a
partir de um texto. Os exemplos apresentados foram escolhidos tendo em vista a
possibilidade simblica de modular uma construo. Alguns trabalhos apontam
nesse sentido, em que a linguagem computacional compreendida como uma
metalinguagem e que concatenam esttica, algoritmos e estrutura de dados
(NUNES, 2008).
Assim, provvel que a esfera filosfica e geomtrica destes estudos
encontrem um campo frtil para desenvolvimento futuro, com possibilidade de
construo dos objetos e proposies aqui

apresentados. A opo foi a de

trabalhar dinamicamente o desenho escrito pela arte, a tecnologia e a filosofia.

Trata-se da construo de uma metalinguagem onde o texto descreve a imagem e
a imagem demonstra a ptica do texto. A verificao de validade, ou sua possvel
prova, a exemplificao simples do problema em termos de programao
grfica, feita no Captulo 3. Assim, o conceito aliado descrio das ferramentas
apresenta um conjunto terico-prtico completo, algo bastante comum nos
trabalhos e pesquisas realizados no campo da arte.

)'!

2.1 Desenho e script

Desenho a cincia do risco sobre o suporte. Considere o suporte como a
delimitao de um espao em branco e o risco como a definio de uma sintaxe.
Sendo ferramenta, o desenho satisfaz inmeras aplicaes da atividade humana,
desde a compreenso territorial at a construo grfica de ideias. Tentar traar
uma ontologia sobre esse conjunto demonstra que, aps o risco, o suporte passa a
ter significado, tornando-se imagem ou proposio. De fato, em acordo com
Nuno Crespo, Ludwig Wittgenstein apresenta a imagem [Bild] como "uma
espcie de desenho ou ilustrao que se pode utilizar no interior de uma
proposio" (CRESPO, 2008, p.115).
A obra portuguesa Desenho Tcnico Moderno, dos autores Arlindo Silva,
Carlos Tavares Ribeiro, Joo Dias e Lus Sousa (SILVA [et al.], 2006),
desenvolve um conjunto de metodologias e procedimentos necessrios pesquisa
e ao desenvolvimento do desenho tcnico. Os autores separam e diferenciam o
desenho tcnico do desenho livre. Classificam o primeiro como algo que "deve
ser perfeitamente perceptvel e sem ambiguidades na forma como descreve
determinado objeto" (idem) e o segundo como podendo ter, para diferentes
indivduos, vrias interpretaes e significados do mesmo objeto" (ibdem).
Apesar dessa diferenciao ser dicotmica e at restritiva, possui um aspecto
didtico prprio para o alargamento do tema, pois mostra o desenho como uma
ferramenta prtica e contextual, de um lado, tica e perceptiva, de outro.
Constitui-se na mais antiga forma de registro e
comunicao de informao e, embora tenha
conhecido mais mudanas, quanto ao modo de
produo e de apresentao, do que as mudanas
tecnolgicas verificadas ao longo da histria, nunca
foi substituda efetivamente por nenhuma outra.
(SILVA [et al.], 2006, pg.3).

Sendo to antiga quanto a escrita, a investigao sobre desenho pode ter

tido diferentes estgios ao longo da histria, indo desde a larga utilizao no dia
a dia, at o esquecimento geral e utilizao somente em crculos restritos. O fato
que o desenho permaneceu. Trouxe em sua ontologia uma capacidade de

)(!

adaptao extraordinria e pode mesmo ser considerado como uma necessidade

humana essencial. Nesse sentido amplo, como um modelo ou como um quadro
vivo, o desenho uma ferramenta do mesmo gnero que a escrita, uma espcie
de mapa constitudo pela abstrao ou pelo pensamento [Abbildung]. Seja em
uma descrio da realidade, feita atravs de uma figurao, ou em uma lgica,
que constitui e d sentido imagem, o desenho parte de elementos da realidade
perceptiva e, portanto, est sujeito s transformaes de natureza humana e
representativa.
2.202 A figurao representa uma situao possvel no
espao lgico. 2.203 A figurao contm a possibilidade da
situao, a qual ela representa. 2.21 A figurao concorda
ou no com a realidade, correta ou incorreta, verdadeira
ou falsa. 2.22 A figurao representa o que representa,
independentemente de sua verdade ou falsidade, por meio
da forma da afigurao. 2.221 O que a figurao representa
o seu sentido. 2.222 Na concordncia ou na discordncia
de seu sentido com a realidade consiste sua verdade ou sua
falsidade. 2.223 Para reconhecer se uma figurao
verdadeira ou falsa devemos compar-la com a realidade.
2.224 No possvel reconhecer apenas pela figurao se
ela verdadeira ou falsa. 2.225 No existe uma figurao a
priori verdadeira. 3 Pensamento a figurao lgica dos
fatos. (WITTGENSTEIN, 1968, p.60).

A figurao imagem ou proposio est merc de uma comparao

com o real, onde o resultado obtido por esse paralelo alcana concordncia ou
discordncia com a realidade. Trata-se de um processo ortogonal. A figurao
projeta algo, uma situao ou um objeto. A descrio ento se transforma em
uma pergunta sobre onde encontrar mais ferramentas de anlise, como construlas? No existe uma ideia inicial de verdade no elemento figurao, mas o fato
que a figura ter o seu enfrentamento com a realidade. No possvel
mensurar a dimenso de um livro raro somente pela sua caracterstica de
raridade, necessrio prov-lo.
A palavra scriptivo um neologismo criado pela importao do vocbulo
ingls script, que significa escrita. Uma antropofagia. Refere-se tambm s
linguagens de programao, interpretadas e de extenso, que servem para

+*!

controlar as funcionalidades de um programa de computador. Uma interface de

escrita, escritura, escriturao e lgica textual.
(Script) uma linguagem de programao usada
para manipular, personalizar e automatizar as
funcionalidades de um sistema existente. Em tais
sistemas, as funcionalidades j se encontram
disponveis por meio de uma interface de usurio e
a linguagem de script prov um mecanismo para
acess-las. Dessa forma, o sistema existente oferece
um ambiente de hospedagem para objetos e
funcionalidades que complementa os recursos da
linguagem de script. (SAMY, 2010, p.29)

Assim, forma-se desenho scriptivo. O desenho relacionado escrita, a escrita

escrevendo o desenho. Texto e figura, escrita e geometria, forma e contedo,
imagem e proposio. Pode ser colocado em paralelo com a teoria da
representao pictrica, no qual Wittgenstein sugere que a imagem, ou figurao
[Bilt], pode funcionar como proposio. Em certo sentido, uma proposio
necessita de uma imagem, algo para dizer o que acontece em determinada
instncia da situao, sendo mesmo uma condio interna para as proposies:
"s no contexto da linguagem as imagens podem ou no ter sentido e s no
contexto de uma proposio que uma imagem pode representar o que
acontece."(CRESPO, 2008, p.117).
Quando escrevi uma proposio [Satz] uma imagem
lgica de um facto, eu queria dizer que posso inserir uma
imagem, literalmente um desenho, numa proposio e
depois continuar a minha proposio. Podia assim usar
uma imagem como uma proposio. Como que isto
possvel? A resposta reza assim: porque, de um certo ponto
de vista, ambas concordam [bereinstimmen], e a este
comum [Gemeinsam] chamo imagem." (WITTGENSTEIN
apud CRESPO, 2008, p.114).

Vale lembrar, em acordo com CRESPO (2008), que a palavra Satz [Proposio]
possui uma riqueza de significados que no encontrando correlato na lngua portuguesa.
Significa "proposio", "frase", "afirmao", "princpio", "axioma". Neste sentido, quando
Wittgeinstein utiliza a palavra Satz refere-se no s s proposies da lgica, mas tambm

+)!

a frases enunciativas, predicativas, declarativas ou interrogativas. De certa forma, na

afirmao de que ambas concordam, Wittgenstein utiliza o desenho como texto e o texto
como desenho, imagem lgica dos fatos.
Este o sentido da juno desenho scriptivo, ou seja, a forma de concatenar texto e
imagem, como proposio e investigao sobre as consonncias e cises entre a geometria
e a escrita, a forma e o contedo, o risco e o suporte. O que interessa a oportunidade
histrica, obtida pela implementao das ferramentas digitais, de retirar esse tipo de
trabalho do papel e torn-lo prtico.

2.2 Construo de um desenho a partir de um texto

A palavra est em paralelo com a geometria, sendo ambas receptculos
lgicos significantes espera do significado ordenados segundo sua
natureza particular, a palavra pelo contedo e a geometria pela forma. A
geometria somente pode ser investigada pelo nosso prprio campo visual. "Uma
geometria depois transformada em conhecimento e investigao sobre o modo
de organizao dos objetos, das coisas: por isso a geometria nos dada e nenhum
dos seus elementos est escondido, tudo est j presente nas possibilidades
humanas de viso" (CRESPO, 2008, p.100).
A geometria do espao visual -nos dada, i.e. para
encontr-la no necessitamos de uma investigao
sobre factos escondidos at agora. No uma
investigao no sentido em que o uma
investigao em fsica ou em psicologia. E, no
entanto, pode dizer-se que ainda no conhecemos
essa geometria. Essa geometria gramtica e sua
investigao uma investigao gramatical.
(WITTGENSTEIN, 2003, p.145).

A geometria descritiva de Drer da Figura 1 no pode exercer, por si s, nenhuma

consequncia no espao fsico, sendo mesmo algo inventado, uma linguagem. No entanto,
possvel que a investigao de seu contedo oferea subsdios para a implementao de
ferramentas e maquinarias utilitrias no mundo. Trata-se de um apoderamento do espao
pelo plano. Investigar gramaticalmente essa geometria trazer luz ela, torn-la utilizvel.
!

++!

No se trata de uma predefinio sobre a utilidade ou o contedo do objeto. Naturalmente,

suas caractersticas e propriedades vo sendo povoadas de atributos e mtodos retirados do
espao concreto, tornando-a til. Os mtodos podem ser construdos por pares nome/valor,
enquanto as caractersticas so progressivamente descobertas pela realizao em estudos
sobre o prprio objeto.

Figura 1 Geometria descritiva de Drer.

Suponha, por exemplo, uma reta qualquer. Enumere dois pontos sobre esta
reta, designados por A e B (Figura 2). Com centro em A e raio AB, trace uma
circunferncia. Com centro em B e raio BA, trace outra circunferncia. Ache o
ponto D, descrito pela intercesso entre as duas circunferncias. Ache o ponto C
e feche o tringulo retngulo pitagrico. Nessa construo, a reta CB
denominada ! a hipotenusa; a reta BD a hipotenusa dividida por 2, enquanto
BDC o ngulo reto (90), DCB (30) e CBD (60).

+"!

Figura 2 Construo do tringulo retngulo partindo de uma reta simples.

Simplificadamente, podemos dizer que, no exemplo acima, o papel o

suporte que contextualiza a linguagem, tornando inseparvel a forma do
contedo. O desenho a ao que possibilita o risco lingustico ou mesmo a
representao da realidade, enquanto o texto explicativo perfaz a lgica referida
na disciplina matemtica. Trata-se de uma geometria pelo texto. "A ligao entre
'linguagem e realidade' feita por meio de definies de palavra e estas pertencem
gramtica,

de

modo

que

linguagem

permanece

autocontida

autnoma.

(WITTGENSTEIN, 2003, p.69)".

O que est em jogo no a elegncia da proposio, mas a relevncia
dessa construo na mediao entre linguagem e realidade, ou seja, possvel
implementar essa soluo agora, com compasso e rgua neste papel e
traz-la para o mundo concreto?
Inventar uma linguagem poderia significar inventar
um instrumento para um propsito particular, com
base nas leis da natureza (ou compativelmente com
elas); mas tambm tem o outro sentido, anlogo
quele em que falamos da inveno de um jogo. No
caso, estou enunciando algo a respeito da gramtica
da palavra linguagem, ligando-a com a gramtica
da palavra inventar (WITTGENSTEIN, 2003,
p.145).

+#!

A geometria diz respeito ao que se encontra "diante de ns", dos nossos

olhos. A geometria pode tornar o espao um instrumento esquemtico, ortogonal,
sendo um modo de traar o mundo e delimitar o que nele existe. J o texto
subsiste como representao das coisas pela linguagem, do fato pela linguagem.
O texto o que torna a geometria legvel, uma vez que a estrutura como objetos
e como coisas ordenadas entre si. Cria-se um conjunto de regras e coordenadas
espaciais em que todas as imagens e proposies sero estruturadas. Cria-se a
partir desse conjunto, tornando a palavra proposio recursiva, destinada ao
mesmo paradigma e mesma utilizao. Com esse procedimento, o desenho pode
ento ser lido com universalidade e preciso.

2.3 Comunicao grfica de ideias

As

transformaes

trazidas

pelas

tecnologias

da

informao

comunicao, sejam elas fsicas ou lgicas, tornaram a imagem digital uma

prtica cotidiana. Tambm abriu caminho para a mecanizao dos processos
visuais e trouxe a computao grfica avanada para o mbito informal. As
interfaces, cada vez mais, so construdas com base nos parmetros pessoais do
usurio. Os aplicativos tornaram-se teis, autocomunicativos e atraentes. Suas
lgicas internas vo tecendo mtodos de avaliao sobre as necessidades de
progresso da prpria ferramenta, como se fosse um autoaprendizado.
As tecnologias de interface integradas em sistemas
audioviduais digitais permitem, atualmente, uma
srie de investigaes sobre a inter-relao entre
realidade-virtualidade-observador-entorno.
Ao
contrrio das imagens analgicas, os dados digitais
permitem a variabilidade e a manipulao dos
parmetros de informao que constituem a
representao. (GIANNETTI, 2006, p.125)

De acordo com Cludia Giannetti, "devemos entender a comunicao

como um processo artificial baseado em modelos, ferramentas e instrumentos
que manipulam smbolos em nvel de cdigos. (GIANNETTI, 2006, p.60). As
informaes podem conter significados que se referem a outros smbolos ou
!

+$!

fenmenos concretos. Novos meios de informao podem gerar resultados

imprevisveis durante o processo de comunicao, mas a matriz provavelmente
ser formada por dados e informaes existentes. A matriz poder ser a estrutura
semntica do objeto.
Por exemplo, poderamos tomar a demonstrao expressa na Figura 3
como um comeo possvel para a geometria, uma sntese da passagem do espao
para o plano ou mesmo um trao deflagrado sobre o assunto? Seria esse um
processo de comunicao da geometria, baseado em modelos e ferramentas?
Suponha uma seleo aleatria de gravetos debaixo de uma rvore onde,
indistintamente, relacionamos trs gravetos de tamanhos iguais, ordenando e
simplificando um passo a passo desse conjunto. um claro processo de evoluo
da forma que, intercalado com a Figura 2, prev a transformao do graveto em
reta e do tringulo em roda. o domnio do terreno, sua medio e geologia.
Esse tipo de demonstrao, que utiliza volutas e classificaes, foi muito
utilizada na histria do desenho, notadamente no Cdice Atlntico (1478-1519),
de Leonardo da Vinci, e nas Regras das cinco ordens da arquitetura (1562), de
Giacomo Vignola.
Mas, voltando a nossa ontologia, ser que poderamos fugir da lgica
trigonomtrica

descrita?

Por

que,

desde

Euclides,

mtodo

tringular

prevaleceu? Veja bem, se trocssemos os valores, para 1 ou 2 gravetos, no

haveria elementos eficientes para representar o espao real. Se optssemos para
quatro ou cinco gravetos, haveria excesso de dados e, ademais, se multiplicarmos
o tringulo por 2, possvel chegar ao quadrado. Ao multiplicar por 3, outros
polgonos surgem. Eis a hegemonia do tringulo.

+%!

Figura 3 Uma possvel ontologia para a geometria.

Seria a demonstrao da Figura 3 uma inveno? uma imagem que

concorda com a realidade? Ou poderamos enunciar sua dimenso de realidade,
tendo como prova o seu prprio procedimento demonstrativo?
O que h por traz destas formas, nmeros e palavras? Se retiramos as
formas e os nmeros, ficamos com diversas palavras: Gravetos, Tringulo,
Mediatriz, Diviso, Rotao, Reflexo, Unio, Suporte, Hipotenusa, Abstrao,
Construo, Implementao. Palavras que, a princpio, esto desprovidas de
contexto e significao. Por outro lado, se conservamos somente os nmeros
(1,2,3,4,5,6,7,8,9,10,11,12), obtemos outros tantos signos, tambm dependentes
de significao contextual. Mas, estranhamente, a sequncia geomtrica da
Figura 4 conserva em si uma certa lgica natural, independente de
explicaes, onde trs gravetos causam um lapso significante, cuja significao
atinge nossos sentidos lgicos naturais.

Figura 4 Sequncia de construo e desconstruo. Lgica natural?

+&!

Obviamente, a tal lgica natural contestvel. Imagine que determinada

sociedade desconhea o conceito de 6.Reflexo no plano ou mesmo a ideia de
5.Rotao no plano. Sim, pois no plano que se d a leitura dessa geometria.
Para compreend-la necessrio mais que simplesmente ver, pois nela h mais
lgica que visualidade, ou seja, dificilmente obteramos o conjunto 8.Hipotenusa
sem a ideia de 3.Mediatriz, ou mesmo 10.Abstrao sem 5.Rotao.
Para Luhmann, o cdigo por si um veculo de
comunicao e, como tal, regula a totalidade dos
processos e canaliza a informao para as redes de
relaes sociais. Porm, como uma espcie de
operador, o cdigo desempenha uma atividade
basicamente funcional, neutra e desprovida de
valores adicionais. (GIANNETTI, 2006, p.64)

O mtodo clssico de demonstrao geomtrica, por si s, no suficiente

para comunicar as ideias dessa pesquisa. Isso porque, a programao grfica para
web exige o estabelecimento de outros assuntos, como protocolos de
comunicao, funes, algoritmos, strings, objetos, declaraes e estruturas,
circuitos integrados, recurso, combinatria, eventos, banco de dados, etc.
Obviamente, a maioria desses assuntos no sero tratados aqui, mas apenas uma
sntese representativa de uma concatenao entre as primitivas da arte com as
primitivas da tecnologia.
Por fim, a comunicao grfica em desenho scriptivo pode partir de
elementos to simples como o conjunto de regras descrito na Tabela 1, a NBR
8403, que normaliza a aplicao de linhas em desenho tcnico. A comunidade
que adota esse conjunto de regras constri para si um mecanismo de
comunicao grfica de ideias. No existe para a teoria, mas para a prtica, em
um processo de trabalho que objetiva a identificao de um ofcio, um servio ou
uma companhia. Esto estritamente relacionados ao contexto e ao suporte de
trabalho que d vazo ao modelo esquemtico e paramtrico da construo. E
essa a qualidade da internet como ferramenta. Pelo processo de comunicao,
pela ao do recorte e da cpia compartihar o observador faz nascer o
entorno da imagem, seu significado e contexto.

+'!

Tabela 1 NBR 8403 - Tipos de linhas e sua aplicao. Um conjunto de regras de desenho.

+(!

2.4 Mquina (sem rodas)

Figura 5 The Half Triangle, de Raymond Lull.

De acordo com Lcia Santaella (1997), "a palavra mquina se refere a uma
estrutura material ou imaterial, aplicando-se a qualquer construo ou
organizao cujas partes esto de tal modo conectadas e inter-relacionadas que,
ao serem colocadas em movimento, o trabalho realizado como uma unidade."
Mquinas so aplicadas na transmisso de diferentes tipos de fora e movimento,
como observa-se na Figura 5, onde a ordenao textual alcana sentido de
sequncia dentro de uma estrutura geomtrica.
No artigo denominado O homem e as mquinas (1997), a autora mapeia
trs nveis de mquinas que se relacionam com o humano: o nvel muscularmotor, o nvel sensrio e o nvel cerebral. Interessa-nos principalmente os nveis
que mais se aproximam do processamento de smbolos.
A diferena entre um dispositivo, por mais extremamente
complexo que seja, e um computador digital, visto como
uma variante da mquina de Turing, est no fato de que o
computador no simplesmente uma complicada rede de
impulsos eltricos, nem apenas um dispositivo que
caminha por meio de estados distintos como um autmato
de estados finitos, mas um dispositivo que processa
smbolos. (SANTAELLA, 1997, p.39)

"*!

Como exemplo, dois objetos sero aqui concatenados para anlise a

arte combinatria e a mquina (sem rodas) perfazendo um paralelo simblico
entre algoritmos e estrutura de dados. O primeiro, sendo analisado a partir de um
fragmento do livro Ars Magna. The Ultimate General Art, datado de 1305 e
escrito por Raymond Lull (1305), que enumera dez regras gerais que se aplicam
a todas as perguntas.
O segundo, com o manuscrito De la numration Binaire, datado em 15 de
maro de 1679, de Gottfried Leibniz, que descreve a possibilidade construtiva de
uma mquina lgica, uma espcie de computador. Os dois textos em conjunto
demonstram que o processamento simblico pode ser estritamente maqunico,
algo que em nossos dias tm se tornado banal, se considerarmos a constante
manipulao de dados na chamada era da big data.
O termo big data recente e diz respeito no somente ao grande volume
de dados ordenados, mas tambm ao processo de trabalho necessrio para tornar
todo conjunto relevante. O processo em big data simplifica-se em quatro fases:
coleta, armazenamento, anlise e acesso aos dados 1 . A transformao da
informao em conhecimento feita com anlise de ligao semntica e a
automatizao do processo leva em conta a interao do usurio com o sistema.
Esse tema amplo e no ser aprofundado, bastando a compreenso de que o
conjunto de dados que no contm uma leitura semntica adequada corre o risco
de se tornar uma informao ineficiente ou mesmo intil.
Descrio A: Raymond Lull, As Regras.
"Estas regras so dez questes gerais que se aplicam a todas as perguntas. No
processo de investigao, cada regra, de acordo com sua essncia natural, esclarece
cores e exibe o assunto para o intelecto [...] As dez perguntas so gerais e assim so
as suas espcies.
Regra B faz a pergunta - "Se?".
Regra C, ou a regra de qidade, ou "O que uma coisa em si". Essncia.

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
1

Palestra online assistida pelo instituto IGTI em 27 de junho de 2013. http://www.institutogti.com.br/

")!

Regra D investiga a consistncia material.

Regra E pergunta "porqu".
Regra F sobre a quantidade.
Regra G sobre a qualidade.
Regra H pergunta sobre o tempo.
Regra I investiga a natureza do locus perguntando "onde ".
Regra K (1) sobre modalidade ou como as coisas existem.
Regra K (2) lida com a instrumentalidade."
(LULL, 1305. Ars Magna. The Ultimate General Art, traduo do autor)

Descrio B: Gottfried Leibniz, Mquina (sem rodas).

"Este tipo de clculo pode tambm ser conseguido com uma mquina (sem
rodas). Observe o seguinte para contru-la facilmente e sem esforo. Disponha de uma
caixa provida de orifcios que podem ser abertos ou fechados, dependendo da ocasio.
Estes orifcios so espaos que correspondem a uma pequena roda com dois dentes.
Os furos abertos correspondem a 1. Os espaos fechados correspondem a 0.
Atravs dos furos abertos caem, de pequenos cubos, as esferas nos canais; e nada
atravs dos buracos fechados. A caixa deslocada de coluna em coluna, como exigido
pela multiplicao. Os canais representam as colunas e nenhuma bola deve sair de um
canal para o outro, a menos que acontea um movimento da mquina. Em seguida,
todas as bolas rolam para o canal seguinte, umas sendo levadas e as outras caindo nos
buracos. A regra que uma nica esfera cai em cada abertura. Tudo pode ser
organizado, de forma que duas bolas para fora sempre estariam em conjunto e de outra
forma no seriam removidas."
(LEIBNIZ, 1679. De la numration binaire, traduo do autor).

"+!

A mquina (sem rodas) de Leibniz no foi construda, mas talvez tenha

sido o primeiro projeto feito para a concretizao de uma lgica computacional.
Uma estrutura de deciso maqunica onde esses dois textos em conjunto
simbolizam a materializao da antiga ideia de confluncia entre texto e imagem,
ou mesmo da ideia filosfica que versava sobre a universalidade do mtodo
matemtico, uma problemtica que conduziu o trabalho de diversos estudiosos ao
longo da histria, dentre eles Raymond Lull (Ars Magna), Cornelius Agrippa (De
Incertitudine et Vanitate de Scientarium et Artium), Descartes (Mathesis
Universalis), Adrianus Romanus (Apologia pro Archimede), Bernoulli (Arte de
La Suposicin)

Leibniz

(Characteristica Universalis ou, alfabeto do

pensamento humano) em acordo com referncia no estudo Um estudo sobre

Leibniz e a criao de um alfabeto do pensamento (FRANZON & BRITO,
2012).
Na obra Algorithms of the Intelligent Web, os autores Haralambos
Marmanis e Dmitry Babenko (MARMANIS & BABENKO, 2009) descrevem trs
ferramentas que so necessrias para a construo de uma web inteligente: o
contedo agregado, as estruturas de referncia e os algoritmos (Figura 6). O
contedo agregado um conjunto de dados especficos para que o objeto
funcione. As estruturas referenciais fornecem interpretaes semnticas e
sintticas sobre o contedo. J os algoritmos so definidos tendo como base a
estrutura referencial e a anlise combinatria gerada sobre os dados.

Figura 6 Tringulo da inteligncia: 3 ingredientes para uma aplicao inteligente:

Contedo Agregado, Estruturas de Referncia e Algoritmos (MARMANIS & BABENKO, 2009).

""!

Com a dinmica acima descrita, os contedos de forma modular, tornando

eficiente as ligaes entre algoritmos, os bancos de dados e a leitura semntica.
Os autores citam o termo folksonomia como o conjunto de representaes de um
conhecimento sobre determinado objeto construdo coletivamente.
J o professor de informtica Niklaus Wirth, em sua obra Algoritmos e
Estrutura de Dados, demonstra como a estrutura de dados inseparvel da
sntese de programas. "As decises sobre estruturao de dados no podem ser
tomadas sem o conhecimento dos algoritmos aplicados aos mesmos e que, viceversa, a estrutura e a escolha dos algoritmos, em geral, dependem fortemente da
estrutura de dados em que se baseiam" (WIRTH, 1999).
A dependncia da escolha de um algoritmo quanto
estrutura de dados a ser processada um fenmeno
onipresente to forte no caso da ordenao que
os mtodos utilizados so, em geral, classificados
em duas categorias, a saber, ordenao de vetores e
ordenao de arquivos (sequnciais). (WIRTH,
1999, p.50).

Retomando Santaella, "o processamento de listagens trouxe tona as

capacidades denotativas dos smbolos, definindo o processamento de smbolos de
uma maneira tal que permitia a independncia da estrutura fixa da mquina fsica
subjacente."(SANTAELLA, 1997, pg.40). Exemplo claro a mquina de Turing
que, "diferentemente de uma mquina meramente fsica, Alan Turing inventou
uma mquina terica, cujos propsitos so essencialmente tericos."(idem).
Trata-se de uma mquina que visava iluminar as
noes de calculabilidade em geral, permitindo
reduzir todos os mtodos de clculo a um conjunto
subjacente, simples e bsico de operaes. No seu
todo, essa mquina composta por um certo nmero
de estados, sendo capaz de ler smbolos localizados
em quadrados numa fita infinita. Alguns quadrados
podem estar vazios. As operaes bsicas so
desempenhadas pela mquina em resposta a uma
combinao de: (1) o estado em que a mquina est
e (2) o smbolo que ela est lendo, naquele
momento, no quadrado. (SANTAELLA, 1997, p.39)

"#!

Ainda de acordo com a autora, a mquina cerebral, diferentemente de uma

mquina fsica, uma ferramenta intelectual destinada ao processamento de
smbolos, onde a prpria noo de mquina est sendo substituda por um
"agenciamento instvel" de redes de interfaces. Ocorre que, com a capacidade
computacional de transformar impulsos eletrnicos em informao, "no h
signo que no possa ser absorvido, traduzido, manipulado e transformado."
(idem).
Por ser, em si mesma, um princpio de interface, a
codificao digital, com seus bits de imagens,
textos sons, imbrica, em suas tramas, nosso
pensamento e nossos sentidos. o grande
processador leve, mvel, malevel e inquebrantvel.
(SANTAELLA, 1997, p.41).

Assim, a internet um espao de luta e de guerra, uma espcie de mquina

(sem rodas) movimentada por uma combinatria. O discurso flui entre ambientes
lgicos diversos, ativado ou desativado pelo usurio na simples ao de pass-lo
adiante ou ignor-lo. Todos esses movimentos podem ser armazenados e
combinados, modelados e medidos.
Exemplos como a espionagem industrial, os cavalos de tria do sculo
XXI e os ciberataques de todo tipo, faz da internet um local que graas aos
milagres da navegao espacial e do progresso tcnico, conhecemos a extenso
de nossos prprios recursos, assim como a dos de outros pases (SANTOS,
2007, p.32). Ento, quais perguntas devem ser feitas para se chegar
compreenso sobre as regras dessa mquina (sem rodas)? Qual o ponto em que
ela se apoia?
Aqui ser concatenado a descrio A com a descrio B, perfazendo as
regras para uma mquina (sem rodas) Regra B, traz a condio essencial "se",
ou seja, se a web existe enquanto modalidade de algo pr-existente ou seria de
fato algo novo, uma mquina nova? Regra C, qual a essncia dessa mquina,
virtual ou real, est para a lgica ou para a natureza? Regra D, uma
mquina com ou sem rodas, ou seja, est em nossa motricidade, no corpo, ou
tende somente abstrao, ao conceito? Regra E, historicamente, quando

"$!

sobreveio a ideia de uma rede e porque esse espao se tornou indispensvel para
essa sociedade? Regra F, qual a sua quantidade, quantos objetos, quantos
arquivos possui. H mais textos produzidos por humanos para criar a mquina ou
mais mquinas escrevendo os textos para estruturar as aes do humano? (Figura
7) Regra G, a qualidade da interao com os textos, como organiz-los e
reescrev-los, com que dinmica, com quais parmetros? Regra H, como a
noo de tempo se modifica quando estamos conectados, o tempo online retorna?
Regra I, o locus da internet, onde est a internet? Na terra, nas nuvens?
Regra K(1) e K(2), como as coisas existem neste espao (movimento, tempo,
mecnica,

semntica),

com

que

matrizes

estamos

lidando

quais

as

especificaes desse instrumento?

Figura 7 Comparao das operaes de uma empilhadeira e o brao e a mo humana para

movimentar materiais (MOURA, 1975).

2.5 O desenho contido em uma frmula

Jean Dhombres (1996), em entrevista temtica sobre O que uma forma?,
trabalha com a questo da imagem contida em uma frmula (Figura 8). Os termos com
que Dombres apresenta o modo particular de expressar o movimento do pensamento
humano para o plano coordenado, ou mesmo para o espao em branco, traduz-se em uma

"%!

dinmica compreensiva que tenta ser direta mas no imediata, ou seja, pretende atingir
uma profundidade do que est expressa em nossa forma de enumerar e quantificar os
elementos do mundo, entretanto, sem deixar de ser crtico quanto ao procedimento
controverso com o qual o executamos.
Esse um modo particular de expressar o
movimento do procedimento cientfico: passar para
duas dimenses, geometrizar pelo plano o que est
no
espao

efetuar
uma
simplificao.
(DHOMBRES, 1996, p.25).
!"#$ %& % ' ( )#*+ , + - . / , 0 1 )
!" #$%&'(')*+"
,'" onde
,$-$&.'"
3+-$*+"
$1" $-#04#40+-"
(5)*%+-"
/+0+"
Pois
no local
j /+0+12#0*%'"
estamos, e -$"
onde
sempre
estivemos,
no movimento
da
+" )$'1$#0*+6" ,$" 1','" 74$" 1',*8*%+9:$-" $1" 41+" /+0#$" ,'" ,$-$&.'" +(#$0$"

simplificao
e da sntese,+-"que
nos/+0#$-"
apoderamos
do espao.
As confrontaes
e as guerras
+4#'1+#*%+1$&#$"
'4#0+-"
*&#$0;0$(+%*'&+,+-<"
!" #2%&*%+"
$=*)$" +" %0*+9>'"
,$"41"-*-#$1+"?@$0#$30+(A"/+0+"%+,+"'3B$#'6",$"1','"74$"+-"0$(+9:$-",$"+9>'"$"
obtidas por
meio dessas atitudes de dominao no retiram a camada gloriosa com a qual o
0$+9>'"$"+-"%'&,*9:$-",$"14,+&9+"$-#04#40+("$-#+3$($%*,+-"-$B+1"0$-/$*#+,+-<

ser humano se reveste ao pensar na impossibilidade de ter feito o risco sobre o suporte, na
C41"-*-#$1+"/+0+12#0*%'6"-$",$%(+0+"'-"/+0D1$#0'-",'"'3B$#'"$"&>'"+"-4+"8'01+<"

caverna ou
no-4)$0$"
papel.74$6"
A &41"
forma
concreta
da linguagem
fsico
quase sempre se
E-#'"
,$-$&.'"
,*&D1*%'"
'0*$&#+,'6"no
'-" espao
,+,'-" ,$"
+(*1$&#+9>'"
,$/$&,F&%*+"
%'&B4&#'-"
sobrepe +,74*0$1"
possibilidade
lgica41"de,'-"
se'4#0'-"
fazer 8'01+&,'"
um movimento
no*&#$0(*)+,'-"
papel. NoG+HI&J<"
h erro possvel
C$-#$" %+-'6" +-" *&8'01+9:$-" ->'" #0+3+(.+,+-" %'1" 3+-$" $1" 41+" *&8$0F&%*+"

no espao/+0+12#0*%+"
concreto, h
apenas a efetividade
de sua*&8'01+9:$-"
permanncia.
G%04K+1$&#'"
*&8'01+#*@'J"ou
$" no
#'0&+1;-$"
'0)+&*K+,+-"
-'30$",+,'-",$-$-#04#40+,'-<

PEQ"H<"R+0D1$#0'-"$"8'01+-",$"41"L$-$&.'<

Figura 8 Exemplo de desenho contido em uma frmula.

!" 4#*(*K+9>'" ,$" /+0D1$#0'-" %'&-#04#*@'-" $" $-#04#40+*-" &'" L$-$&.'" M%0*/#*@'" 2"
84&,+1$&#+(" /+0+" +" '3#$&9>'" ,$" #0+&-8'01+9:$-" #$1/'0+*-" $" 1$#+1'08'-$-"
8'01+*-"
&'" '3B$#'<" !"
,+" 8'01+"
74$" -$" ,$-,'30+" de
$-#+3$($%$"
Por
ser linguagens
que,*&D1*%+"
trabalham
com representaes
espao
&$%$--+0*+1$&#$"41+"84&9>'"+()'0N#1*%+"74$"%'&#$=#4+(*K+"+"$-%0*#+<

e tempo

utilizando tcnicas e mtodos prprios, escrever e desenhar requerem qualquer

O-#$" /0'%$,*1$&#'" /$01*#$" +" -$/+0+9>'" %'&%$*#4+(" $&#0$" 41+" *1+)$1"

delimitao
analtica, ou seja, torna-se necessrio trabalhar sob a perspectiva de
$-#04#40+,+"$"41+"*1+)$1"@*-4+(<"!"*1+)$1"@*-4+("8'01+;-$"/$(+"%'&B4&9>'",'-"
!

"&!

uma metateoria, com um ponto de vista que simplifique, pelo plano, o espao e o
tempo, tornando-os processo. Perfazendo uma escrita geomtrica, primeiramente
podemos dizer que o desenho o elemento raiz, composto por duas subrvores
o risco e o suporte que estruturam uma dialtica entre a forma e o
contedo. A definio sobre o mtodo de trabalho nesse conjunto, ou o que ele
representa, constitui a sua efetividade textual.
A imagem est contida em uma frmula simplesmente
enquanto representao contnua de um certo nmero de
pontos tomados em uma sucesso, de um certo tipo de
dados empricos organizados por um movimento prprogramado: de certo modo, a mquina nivela os dados. E
h obteno de uma imagem porque h programao de
uma forma, no sentido algbrico pr-desenho de alguma
coisa. (DHOMBRES, 1996, p.25).

Por outro lado, somente passar para o plano as definies apreendidas do

espao no efetiva qualquer modificao sobre esse espao em um nvel
considervel de preciso e reproduo, pois no h nele padro algum, o plano
est disperso e a frmula no retorna para a realidade palpvel. Observando a
Figura 9 podemos perceber o que significa estipular uma frmula para o espao.
O tringulo de ouro renascentista, um passo fundamental para a geometria
moderna a suspenso do ngulo reto (90). No caso, a hipotenusa colocada
em perpendicularidade com o solo, algo at certo ponto inovador. Quase uma
reinveno da roda, esse movimento ala o vo dos objetos futuros.

Figura 9 Tringulo de Ouro Renascentista e a perpendicularidade da hipotenusa com o

solo.

"'!

A passagem para o plano coordenado (sistema cartesiano) considerado

outro movimento fundamental para o apoderamento do espao pelo plano. Nessa
gramtica, o plano associado aos nmeros reais, com os pontos nesse mesmo
plano colocados com pares de nmeros reais a partir de um sistema retangular de
coordenadas, que consiste em dois eixos perpendiculares coordenados. Neste
sistema, os eixos dividem o plano em 4 regies ou quadrantes, numerados em
sentido anti-horrio.

Figura 10 Plano coordenado para web.

O sistema cartesiano para web (Figura 10) semelhante ao matemtico,

com a diferena da origem do ponto (0,0). Na matemtica, o quadrante das
coordenadas positivas se origina no canto inferior esquerdo, enquanto na web a
origem o canto superior esquerdo (ou rea de renderizao), com a coordenada
positiva horizontal x da esquerda para a direita e a vertical y de cima para baixo
(SAMY,2012, p.34).
A correspondncia entre pontos de um plano e pares
ordenados de nmeros reais torna possvel visualizar
equaes algbricas como curvas geomtricas e,
inversamente, representar curvas geomtricas por equaes
algbricas. (ANTON, 2000, p.A17).

Para exemplificar, em acordo com Howard ANTON (2000), suponha um

sistema de coordenadas xy e uma equao que envolve duas variveis x e y.

"(!

6x 4y = 10; y = x 2 (Tabela 2); x = y 2 - 2y (Tabela 3); ou y = 1/x (Tabela 4).

A definio de uma soluo para essas equaes pode ser um par ordenado
(a,b), cujas coordenadas, quando substitudas x por a e y por b, satisfaam a
equao apresentada. Neste exemplo, o par ordenado (3,2) uma soluo para a
equao 6x - 4y = 10, pois a equao est satisfeita por x = 3 e y = 2. J o par
ordenado (2,0) no uma soluo para essa equao, pois no se satisfaz por x =
2 e y = 0. Abaixo, trs grficos desenhados a partir de dados gerados pela
soluo das respectivas frmulas.

y = x2

(x,y)

(0,0)

(1,1)

(2,4)

(3,9)

-1

(-1,1)

-2

(-2,4)

-3

(-3,9)

Tabela 2 Grfico e valores para y = x 2 , baseado em ANTON (2000, p.A18).

x = y 2 - 2y

(x,y)

-2

(8,-2)

-1

(3,-1)

(0,0)

-1

(-1,1)

(0,2)

(3,3)

(8,4)

Tabela 3 Grfico e valores para x = y 2 - 2y, baseado em ANTON (2000, p.A19).

#*!

y = 1/x

(x,y)

1/3

(1/3,3)

1/2

(1/2,2)

(1,1)

1/2

(2,1/2)

1/3

(3,1/3)

-1/3

-3

(-1/3,-3)

-1/2

-2

(-1/2,-2)

-1

-1

(-1,-1)

-2

-1/2

(-2,-1/2)

-3

-1/3

(-3,-1/3)

Tabela 4 Grfico e valores para y = 1/x, baseado em ANTON (2000, p.A19).

Temos ento a seguinte definio: "O conjunto de todas as solues de

uma equao em x e y chamado conjunto da soluo da equao, e o conjunto
de todos os pontos no plano xy cujas coordenadas so elementos do conjunto da
soluo chamado de grfico da equao." (ANTON, 2000, p.a17). O autor afirma
que identificar a forma exata de um grfico um tema muito importante para o clculo.
Ou, visto pela perspectiva do desenho scriptivo, O que est em questo no somente um
procedimento que simplifica, mas tambm um processo de prejuzo que avana:
apoderamo-nos do espao por meio do plano. (DHOMBRES, 1996, p.25).

#)!

2.6 Uma geometria sem distncia

Na segunda seo da obra Gramtica Filosfica , Ludwig Wittgenstein
(2003) menciona uma certa geometria na qual no houvesse algo como
distncia. Sob o ttulo A generalidade. Parte II (Sobre a Lgica e a
Matemtica) o texto destaca e analisa a seguinte proposio:
A proposio O crculo est no quadrado , em
certo sentido, independente da atribuio de uma
posio particular (em certo sentido, totalmente
desligada). (WITTGENSTEIN, 2003, p.199)

Para Wittgenstein (1968), os objetos so os elementos mais simples em

que se pode decompor o mundo. Sua configurao "forma o estado das coisas"
(2.0272) e se ligam uns aos outros como "elos de uma cadeia"(2.03). O objeto
sustenta uma estrutura lgica da imagem, como suporte e risco. "O objeto o
fixo, o subsistente; a configurao o mutvel, o instvel"(2.0271).
Um objeto depende de um espao. No haveria lugar para os objetos
ideais, hierarquizados ou institudos por qualquer especialidade. Essa ideia
chamada de atomismo lgico de Wittgenstein, sendo mesmo tradio entre
leitores e comentadores do Tratado Lgico-Filosfico. "A diferena entre as
coisas so determinadas no pela sua substncia mas pelo seu lugar no espao
lgico e, logo, pelo seu lugar na estrutura lgica da proposio." (CRESPO,
2008, p.87).
Dois objetos de mesma forma lgica abstraindo
suas propriedades externas se diferenciam um do
outro
apenas
por
serem
distintos.
(WITTGENSTEIN, 1968, 2.0233)

Eis o ponto que permite compreender a ideia de uma geometria sem

distncia, onde "cada coisa (Ding) est como que num espao (Raum) de
possveis estados de coisas possveis. Posso pensar este espao vazio, mas no a
coisa sem o espao"(2.013). Nessa geometria, as relaes de posio so
ignoradas, as distncias elsticas e as extenses sem importncia. Um exemplo

#+!

visual. Para o autor, as imagens

seriam iguais (WITTGENSTEIN,

2003, p.201). "A forma a possibilidade da estrutura"(2.033).

A distino interior/exterior uma necessidade
instrumental e metodolgica em que ao interior
correspondem as condies de possibilidade da existncia
de objectos no espao e ao exterior as posies que esses
objectos ocupam na realidade. Aquilo que aqui interessa
so as condies de possibilidade da existncia de objectos
no espao: uma oposio que permite opr a uma
geometria do campo de viso (poder-se-ia talvez dizer
humana), uma geometria da fsica ou das cincias da
natureza. (CRESPO, 2008, p.99)

No caso da proposio "H um crculo no quadrado" as relaes de

distncia, mtrica, extenso e posio so desconsideradas, sem importncia ou
mesmo no so mencionadas. No importa o tamanho do crculo ou as extenses
do quadrado, visto que isso poderia ser averiguado em um segundo momento, no
acesso a suas particularidades. O caso geral no faz nada mais do que segurar
(colar) o crculo no quadrado. "O modo pelo qual os objetos se vinculam no
estado de coisas constitui a estrutura do estado de coisas"(2.032). Dentro do
quadrado, ao crculo concedida "completa liberdade", uma varivel geomtrica.
Onde quer que o retalho (crculo) esteja no
quadrado... significa "contanto que esteja no
quadrado..." e, no caso, tudo o que se quer dizer a
liberdade (falta de restrio) no quadrado, no um
conjunto de posies. (WITTGENSTEIN, 2003,
p.201)

As regras que governam as variveis no so as mesmas que governam

seus valores particulares." (WITTGENSTEIN, 2003, p.199). Mas como trabalhar
essa lgica em um script de desenho?

#"!

Perceber um complexo quer dizer perceber que suas

partes constituintes esto em relao entre si de um
certo modo. Isto tambm explica por que possvel
ver a figura de duas maneiras como um cubo; e
todos os fenmenos parecidos. Porquanto vemos
realmente dois fatos diferentes. (Primeiro veja a
partir dos vrtices a, e s ligeiramente a partir de b;
a
aparece
na
frente;
e
vice-versa).
(WITTGENSTEIN, 1968, p.108 com figura)

Sendo essa criao grfica baseada em recurses semnticas, os termos

providos pela proposio geral, alm de possurem regras filosfico-gramaticais,
devem trazer toda a multiplicidade dos casos particulares, o que nos leva
frmula (x).fx, proposta por Wittgenstein, em que fa decorre de (x).fx.

(x).fx
fa decorrer de (x).fx significa que a mencionado em
(x).fx? Sim, se a proposio geral pretendida de tal
maneira que a verificao consista em uma
enumerao. (WITTGENSTEIN, 2003, p.200)

artista grfico Manfred Mohr, apresenta a imagem The cubic limit

series (Figura 11), estruturada de maneira recursiva, onde demonstra 961

formas de se representar um cubo. Trata-se de uma proposio geral, enumerada
em um segundo momento, no acesso a suas particularidades. Aqui, vemos a
!

##!

forma como possibilidade da estrutura, descrita por 961 formas de representao

da figura.
"S se houver objetos, pode haver forma fixa no mundo"(2.026). "O fixo,
o subsistente e o objeto so um s"(2.027). "No estado de coisas os objetos
esto uns em relao aos outros de um modo determinado"(2.031). H um modo
de representar os limites do cubo, e esta forma poder ser encontrada na
particularidade da proposio, em suas variveis. J a afirmao de Wirth (1999)
quanto caracterstica das estruturas dinmicas da informao demonstra que a
prpria estrutura de uma varivel ou objeto pode ser alterada.
A caracterstica de tais problemas reside no fato de
que, durante o processamento, no apenas os
valores de tais variveis so alterados, como
tambm o so as prprias estruturas das variveis
em questo. (WIRTH, 1999, p.141).

Figura 11 Manfred Mohr. "The cubic limit series", 1976 - One of four works from ICCH/2

#$!

Podemos submeter a que comparaes esta "geometria sem distncias"

com o desenho ou, como concatenar desenho e variveis de forma elegante? O
cubo um limite, somente o cubo. As 961 formas podem ser lidas como um
nico cubo, o mesmo cubo. No importam as suas particularidades, contanto que
todas as possibilidades sejam esgotadas. As formas de resoluo desse problema
podem ser acessadas num segundo momento, observando at o lugar em que se
encontram na matriz lgica criada por Mohr.
As regras tomam o lugar da visualidade. No possvel memorizar todas
as possibilidades da srie, mas possvel reproduz-las, bastando somente
compreender a sua construo, ou seja, uma combinatria de 12 linhas unindo
pontos. Obtm-se o par cubo e geometria sem distncia, pois ao cubo tambm
dada completa liberdade, desde que esteja em concordncia com a regra.

2.7 Recurso e repetio

Entende-se por recurso o procedimento no qual um objeto definido em
termos de si prprio, como na Figura 12. De acordo com Niklaus Wirth (1999),
o poder da tcnica est na possibilidade de se definir um conjunto infinito de
objetos atravs de uma formulao finita. Na prtica, a recursividade uma
repetio acumulativa de uma funo que chama e retorna seus prprios
parmetros, onde A = A[B,A].

Figura 12 Uma imagem recursiva.

#%!

Considera-se que o tema recurso tambm pertena ao campo da

visualidade. Concatenada com a escrita, possibilita a transmisso de determinada
informao aos conjuntos recursivos da imagem, surgindo assim uma sequncia
visual construda por uma frmula algbrica, ou mesmo sequncias semnticas
estruturadas por regras.
Assim, a tcnica da recurso utilizada como
ferramenta para a definio de um princpio de
estruturao, a sequenciao ou a iterao. As
sequncias e as iteraes so to comuns que so
usualmente
consideradas
como
padres
fundamentais de estruturas e comportamentos.
Deve-se, porm, ter sempre em mente que tais
padres podem ser alternativamente definidos por
meio da recurso. Entretanto, o inverso no
verdadeiro, j que a recurso pode ser utilizada de
modo elegante e eficaz na definio de estruturas
muito mais sofisticadas. (WIRTH, 1999, p.165)

O padro grfico da Figura 13 baseado numa demonstrao feita por

Wirth (1999, p.114-117). Apresenta uma imagem construda por uma tcnica
recursiva.

Figura 13 Curvas de Hilbert de ordem 1, 2, 3. Padro baseado em Wirth, 1999, p.115.

No exemplo de Wirth, pressupomos a Figura 14, pois a regra diz que A 1

deve ser construdo por quatro elementos conectados por trs retas. A 2 por quatro
elementos de A 1 , com metade do tamanho, rotacionado adequadamente e
conectado por mais trs retas. A 3 por A 2 , e assim por diante.

#&!

Figura 14 Curvas de Hilbert de ordem 0, 1, 2, 3. Demonstrao de um desenho construdo

partir de uma regra.

J o exemplo da Figura 15 transfigura a noo de recurso e executa a

demonstrao com restrio repetitiva. O n A 4 e A 5 nada trazem de novo para a
proposio, sendo mesmo elementos de repetio e no de ritornelo.

Figura 15 Curvas de Hilbert de ordem 1, 2, 3 acrescido de a4 e a5. Demonstrao de um

padro recursivo possvel, mas restrito.

A Figura 16 uma captura de tela da pgina Acerca do Ritornelo, do

livro Mil Plats de Gilles Deleuze e Flix Guattari. Mquina de Gorjear, ou seja,
mquina de canto, de sons melodiosos, como a msica aqutica Water Music
de Hndel. O ritornelo o estribilho, um termo que descreve uma ao de
retorno na msica.

#'!

Figura 16 Acerca do Ritornelo, A mquina de gorjear. Captura de tela do livro Mil Plats
vol.4. (DELEUZE & GUATTARI, 1997)

Para Deleuze e Guattari (1997), a noo de Ritornelo direcionada para

uma compreenso teritorial, sendo agenciado em motivos e paisagens territoriais.
A noo carrega os elementos de direo, dimenso e passagem.
Agora que consideramos expresses que tm seu contedo
nelas mesmas, temos uma outra distino: o rosto com seus
correlatos visuais (olhos) remete pintura; a voz remete
msica com seus correlatos auditivos (a orelha ela
prpria um ritornelo, ela tem a forma do ritornelo). A
msica primeiro uma desterritorializao da voz, que se
torna cada vez menos linguagem, assim como a pintura
uma desterritorializao do rosto. (DELEUZE &
GUATTARI, 1997, pg.90).

#(!

O confronto desses conceitos direcionam a compreenso para outras

paragens, sendo preciso assimilar o modo de construo de uma voluta barroca,
por exemplo. Trata-se de uma forma envolvente, semelhante a uma curva cclica,
linha curva plana sempre em movimento, que se desenvolve em uma relao
urea de proporo. A construo desse modelo com compasso e rgua pressupe
a descrio detalhada dos seus pontos. Eis a repetio controlada e tecnicamente
precisa, como se fossem circuitos integrados por curvas e correntes eltricas.
Assim, outro caminho para esse padro o da Figura 17, onde A 4
construdo a partir dos trs elementos anteriores, notadamente A 1 , A 2 e A 3 , os
elementos que contm alguma informao visual. A inovao deste quarto passo
est na sincronia dos trs desenhos em lugar de trs retas. Essas retas no so
mais repetidas, mas alinhadas em camadas. O que acontece que A 0 permuta a
regra, prosseguindo assim a elegncia da proposio. A figura tambm
perspectiva planos sucessivos, alm de exemplificar um circuito integrado
descrito em um plano coordenado para web.
[] sincronizadores de ritmos (a palavra "sincronizador"
ambgua, pois estes sincronizadores moleculares no
procedem por medida igualizante ou homogeneizante, e
operam de dentro, entre dois ritmos). No seria a
consolidao o nome terrestre da consistncia? O
agenciamento territorial um consolidado de meio, um
consolidado de espao-tempo, de coexistncia e de
sucesso. O ritornelo opera com os trs fatores.
(DELEUZE & GUATTARI, 1997, pg. 124).

$*!

Figura 17 Curvas de Hilbert de 4 ordem no plano coordenado.

Abaixo, circuito integrado da Figura 17, enumerao dos pontos (x,y) no plano
coordenado:
Curva 1 Ordem => ( -4, -4 ) ( -4, 4 ) ( 4, 4 ) ( 4, -4 );
Curva 2 Ordem => ( -6, -6 ) ( -2, -6 ) ( -2, -2 ) ( -6, -2 ) ( -6, 2 ) ( 6, 6 ) ( -2, 6 ) ( -2, 2 ) ( 2, 2 ) ( 2, 6 ) ( 6, 6 ) ( 6, 2 ) ( 6, -2 )
( 2, -2 ) ( 2, -6 ) ( 6, -6 );
Curva de 3 Ordem => ( -7, -7 ) ( -7, -5 ) ( -5, -5 ) ( -5, -7 ) ( -1, -7
( -1, -5 ) ( -3, -5 ) ( -3, -3 ) ( -1, -3 ) ( -1, -1 ) ( -5, -1 ) ( -5,
3 ) ( -7, -3 ) ( -7, 1 ) ( -5, 1 ) ( -5, 3 ) ( -7, 3 ) ( -7, 7 ) ( -5, 7
( -5, 5 ) ( -3, 5 ) ( -3, 7 ) ( -1, 7 ) ( -1, 3 ) ( -3, 3 ) ( -3, 1 )
3, 1 ) ( 3, 3 ) ( 1, 3 ) ( 1, 7 ) ( 3, 7 ) ( 3, 5 ) ( 5, 5 ) ( 5, 7 )
7, 7 ) ( 7, 3 ) ( 5, 3 ) ( 5, 1 ) ( 7, 1 ) ( 7, -3 ) ( 5, -3 ) ( 5, -1
( 1, -1 ) ( 1, -3 ) ( 3, -3 ) ( 3, -5 ) ( 1, -5 ) ( 1, -7 ) ( 5, -7 )
5, -5 ) ( 7, -5 ) ( 7, -7 ).
!

)
)
(
(
)
(

$)!

O padro contido na Figura 18 demonstra uma curva de Hilbert H 1... H 5 ,

tambm baseada em Wirth (1999, p.117). H 5 opera uma multiplicao
quantitativa do elemento de 4 Ordem. Novamente, a elegncia caminha no
limiar do sucesso, entre a utilidade e a esttica. evidente o desgaste do recurso
axial. As possibilidades esto limitadas, assim como estavam no momento
apresentado pela Figura 15. Exemplificando com base em A 4 e A 5 , as
proposies novamente parecem esgotadas.

Figura 18 Curvas de Hilbert de ordem H 1 ... H 5 . Padro retirado de WIRTH, 1999.

Nesse momento, o passo A 0 movimenta-se como varivel, torna e define

novas regras a serem seguidas, como em uma mquina (sem rodas). O trecho
abaixo, retirado da obra Tuttamia de Joo Guimares Rosa, exemplifica esse
momento, em que a esttica defronta-se com o real. O objeto faca existe
somente para satisfazer a lgica do texto. Enquanto o texto reduz o objeto uma
figurao vazia, como na permuta do elemento A 0 .

$+!

O nada uma faca sem lmina, da qual se tirou o

cabo [] porque a ideia do objeto no existindo
necessariamente a ideia do objeto existindo,
acrescida da representao de uma excluso desse
objeto pela realidade atual tomada em bloco.
(ROSA, 2001, p.32)

Quando procuramos refletir sobre o Desenho inserido nos campos da Arte e da

Tecnologia, no podemos deixar de questionar sobre a contribuio que a disciplina trouxe
para ambas as reas no desenvolvimento de suas tcnicas. O Desenho possibilita a reflexo
terica sobre a tcnica ao estabelecer uma comunicao baseada em um modelo
bidimensional, ou seja, uma geometrizao do que est no espao pelo plano. Trata-se de
um risco sobre o suporte ou mesmo uma escrita sobre o objeto. Tomado neste sentido, a
tcnica questionada pela teoria, resultando na tecnologia isto : a 'logia' ou o 'saber'
da tcnica [que] s possvel depois do advento do conhecimento terico. (VARGAS,
1994, p.224).
A questo da tcnica especialmente importante para a civilizao latina, sendo
essencial para o desenvolvimento e mesmo uma questo de sobrevivncia. interessante
recordar o jargo que os intelectuais bizantinos em especial Demtrio Cidones repetiam
sobre nossa civilizao. Cidones foi um tradutor grego das obras de Toms de Aquino e
incentivador da aproximao entre os povos, dizendo que antes, ningum conseguiu
convencer o nosso povo de que existe alguma inteligncia nos latinos, ou de que so
capazes de elevar sua mente para outros temas que no o comrcio, a navegao e a
guerra (CHADWICK e EVANS, 1987). Fico aqui tentando tirar-lhes a razo, mas com
dificuldade.
O fato que as trs matrias acima so historicamente especialidades dos latinos, o
que nos induz a aferir qual seria a dimenso logstica e a esfera de influncia dessas
questes em nosso modo de pensar. Durante sculos houve um importante
desenvolvimento e mesmo uma escola tcnica latina fundamentada na armazenagem e no
transporte de mercadorias por via martima. Os romanos foram exmios empreiteiros, tendo
construdo estradas por todos os seus domnios, desenvolvido a metalurgia em larga escala
e a construo monumental. Alm disso, foram conquistadores que de certa forma
absorviam as culturas dominadas sem maiores problemas. No mesmo passo, os

$"!

portugueses fizeram histria e fundaram o Brasil com a mesma doutrina de navegao,

comrcio e guerra.
Na civilizao grega clssica aparecem duas novas formas de saber: a teoria
(theoreo) e a tcnica (techn). A teoria busca uma forma constante nas coisas, com a
qual possvel pensar logicamente e estabelecer um critrio de verdade. J a tcnica um
saber-fazer transmitido de gerao em gerao ou registrado em tratados. necessrio
saber que nem as tcnicas nem a arte participavam dos critrios de verdade estabelecidos
pela teoria, uma vez que elas no implicam temas verdadeiros ou falsos; mas, seus
resultados tm que ser eficientemente vlidos. Elas tm como motivo realizar efetivamente
aquilo a que se propem. (VARGAS, 1994, p.178). Essa mentalidade somente se
modificou no perodo renascentista com a confluncia entre tcnica, arte e cincia, uma
crena de que qualquer disciplina poderia ser aferida por conhecimentos cientficos.

$#!

CAPTULO 3
Detalhes de implementao
A programao grfica utilizada para leitura, manipulao e gravao de
imagens ou sequncia de imagens a partir de um script. A principal diferena
entre a tcnica de programao grfica e um aplicativo para desenhar que o
programador precisa especificar textualmente o desenho ao invs de manipular
fisicamente outras interfaces (VERBRUGGEN, 2002). Desenhar via texto ,
ento, essencialmente uma atividade lgica. Trata-se de escrever o desenho.
(SABOIA, 2001).
De acordo com Martien Verbruggen (2002), no livro Graphic Programming with
Perl, a programao grfica consiste em trabalhar com um limitado conjunto de
objetos denominados primitivas de desenho, sendo elas: 1 Suporte, 2
Coordenadas, 3 Objetos e 4 Ferramentas.
1 Suporte o instrumento que fornece as variveis de ambiente,
permitindo a plotagem do desenho na tela. H grande multiplicidade de suportes,
sendo prezados mdulos simples e independentes. positivo trabalhar o suporte
com eficincia e sem cair nas restries impostas pelo equipamento. Essa
capacidade de adaptao s circunstncias chamado desenho responsivo.
2 Coordenadas so todas as medidas e mtricas utilizadas pelo desenho.
Seja para um algoritmo ou para dados de interface, a converso de valores o
que possibilita maior versatilidade dos objetos sobre o ambiente.
3 Objeto qualquer elemento que possa ser manipulado. Independe de
natureza. Um objeto pode, em relao a outro objeto, ter acoplagem forte ou
fraca. Ou seja, pode depender totalmente de outros objetos, de modo a se tornar
inseparvel e depender do funcionamento desse objeto acoplagem forte ou
funcionar e retornar um resultado independente de outro objeto acoplagem
fraca. Alm disso, pode apresentar outras propriedades. Exemplos de objetos
para desenho: linha, reta, curva, gps ou glonass, tela, navegador, objetos criados
por programao, pixel, array, etc.

$$!

4 Ferramentas so os arsenais de trabalho disponveis para desenho.

Exemplos de ferramentas: estruturas de repetio, diferentes qualidades de
desenho, funcionalidades do cliente e do servidor, espaos de cor como na
Figura 19, formatos de imagem, linguagens de programao, mtodos de
comunicao ou mesmo interfaces ou aplicativos prontos. Apesar de ser prtica
comum a escolha de ferramentas prontas (programas e aplicativos),
recomendvel, principalmente no desenho scriptivo, criar novos mdulos a partir
do arsenal bsico disponvel.

Figura 19 Cubos de cor em unidades RGB e CMYK

Um exemplo de ferramenta o espao de cor. Pode-se dizer que um

espao de cor o conjunto de todas as combinaes possveis feitas a partir de 3
cores primrias. Todas as cores que vemos podem ser representadas por uma
composio de trs outras cores, que so correlatos dos trs tipos de sensores
retinianos que utilizamos para perceber o espectro visual (VERBRUGGEN,
2002, p.7). O espao de cor mais conhecido talvez seja a mistura de tintas com
vermelho, amarelo e azul. No entanto, possvel chegar a outros espaos de cor
igualmente teis, como o RGB, CMYK, HLS, YCbCr ou Grayscale.
Outra ferramenta importante para o desenho o formato de arquivo para
grficos (Tabela 5) e o diagrama de formatos de arquivos (Figura 20), que
apresenta um breve exemplo da versatilidade de converso dos formatos e a
maneira como so representados os dados da imagem. Por fim, importante
!

$%!

salientar que cada tarefa e cenrio projetivo exige um formato apropriado de

arquivo, sendo os formatos PNG, JPEG e SVG mais utilizados para a internet.

Formato

Tipo

Mxima
profundidade
de cor

Canal Alfa

Mximo
tamanho
de
imagem
2Gig x
2Gig

Mltiplas
imagens

Ferramentas

PNG

Bitmap

16 bit

JPEG

Bitmap

GIF

Bitmap

8-bit indexed
16-bit
grayscale
48-bit RGB
+16-bit w/alfa
12-bit
grayscale
36-bit RGB
32-bit CMYK
8-bit indexado

No

No

64k
64k

No

1-bit
transparncia
Limitado pelo
usurio

64k
x
64k
Limitado
pelo
usurio
1Gig x
1Gig
Limitado
pelo
dispositi
vo
de
visualiza
o
Limitado
pelo
usurio
4Gig

Sim

GD,
GD::Graph,
ImageMagick,
Gimp, pode ser
incorporado
em
SWF, SVG, canvas.
ImagMagick, GD,
Gimp, pode ser
incorporado
em
SWF, SVG, canvas.
ImageMagick,
Gimp
ImageMagick,
Gimp

SVG

Vetor

24-bit

SWF

Vetor

24-bit

8-bit

PostScript

Documento

Limitado pelo
dispositivo de
visualizao

No

PDF

Documento

Limitado pelo
usurio

Limitado pelo
usurio

TIFF

Bitmap

32-bit, 48-bit

Limitado pelo
usurio

Sim
Sim

Biblioteca Ming

Sim

Mdulo PostScript,
ImageMagick,
Gimp

Sim

PDF::API2,
ImageMagick

Sim

ImageMagick,
GraphicsMagick,Ne
tPBM, Gimp

Tabela 5 Formatos de imagem e suas caractersticas. Formatos de arquivo baseado no original

disponvel em http://helpx.adobe.com/br/photoshop/using/file-formats.html.

$&!

Figura 20 Diagrama de formato de imagens. Fonte: http://www.graphviz.org/doc/info/output.html!

$'!

3.1 Arquitetura cliente/servidor

Na internet, uma troca normal de informaes entre aplicaes feita por duas
partes: o cliente, que est operando o programa; e o servidor, que processa as requisies
do cliente e retorna com as informaes adequadas (VINEGAR & KOVALYOV, 2013) e
(WALLACE, 2003).
A internet surgiu nos Estados Unidos, a partir da ARPAnet, um projeto
desenvolvido na dcada de 1960 pela Advanced Research Projects Agency
Department of Defense - ARPA, cujo objetivo era a troca de informaes entre
diversas pessoas, a partir das mesmas vias de comunicao. Projetada para
operar sem um controle centralizado, inicialmente seu uso estava restrito s
universidades e aos institutos de pesquisa. Em seguida utilizada pelas foras
armadas e, posteriormente, para fins comerciais (DEITEL, 2002).
Paralelamente ao desenvolvimento da internet, organizaes de todo
mundo criaram redes para comunicaes internas e entre organizaes,
diversificando a oferta de softwares e hardwares e dificultando a padronizao
da comunicao. Para resolver esse problema foram criados protocolos
especficos de conexo entre redes, hoje conhecidos como Transmission Control
Protocol (TCP) e Internet Protocol (IP) TCP/IP.
A world wide web (www) um sistema global de hipertexto que utiliza a
internet como sistema de transporte de dados, uma mistura entre tecnologias de
computao e comunicao que possibilita a localizao e a visualizao de
documentos baseados em multimdia, como vdeos, textos, udios e grficos. A
web atual, criada em 1989, na Organizao Europia de Pesquisa Nuclear
(CERN), fruto de uma tradio que, desde a dcada de 1940, buscava associar
diferentes fontes de informao, por meio da computao interativa. Logo se
tornou veculo eficiente e dinmico para troca de informaes instantneas,
interligando por hiperlinks diferentes computadores pelo mundo. Isso permitiu
internet alcanar a escala global com que conhecida atualmente, indispensvel
indstria, sade, cultura, transporte, logstica, engenharia, arte, poltica,
organizaes e sociedade em geral (DEITEL, 2002).

$(!

Na web, a interao feita por meio de um conjunto de mtodos e cabealhos que

permite a clientes e servidores trocarem informaes de uma maneira uniforme e
padronizada. A interao dividida em 2 partes (VINEGAR & KOVALYOV, 2013). A
primeira parte o usurio que opera o navegador e a segunda o servidor de contedo
(Figura 21).
Quando o usurio clica em um boto, movimenta o ponteiro ou visita uma pgina, o
navegador processa a informao e faz uma requisio ao servidor. Essa requisio pode
ser trabalhada dinamicamente com aplicaes do lado do servidor, que interpreta dados
especficos de cada usurio, reconhecendo que alguns recursos devem ser manipulados de
forma diferente.

Figura 21 Arquitetura cliente/servidor

H diversos mtodos, tcnicas e restries neste processo de comunicao.

possvel obter desde informaes sobre geolocalizao, navegador web utilizado e conexo
HTTP at informaes sobre o ambiente, as circunstncias e o entorno do cliente e do
servidor. Ajustar esse entremeio comunicativo permite que as aplicaes gerem contedo
web dinmico, tendo como base as informaes fornecidas pelo prprio usurio.
(VERBRUGGEN, 2002)
Para o escopo desse trabalho o que interessa so os mtodos e as tcnicas
apropriadas para o trabalho de programao grfica e desenho scriptivo na web. Cumpre

%*!

lembrar que h diversas linguagens e tcnicas possveis para se desenhar tanto no lado do
cliente quanto no lado do servidor, passando por linguagens caractersticas para o
transporte de dados, com desenho vetorial, misto ou mesmo o trabalho com um desenho
distribudo e construdo por vrios usurios ao mesmo tempo. De forma geral, quase todas
as linguagens de programao possuem um mdulo grfico, cabendo ao desenhista
escolher a tcnica mais adequada para cada projeto.
Escolheu-se 3 formas de desenhar com scripts no ambiente web, consideradas aqui
como 3 qualidades de desenho scriptivo que sero detalhadas nas sees seguintes. Para
desenho no lado do cliente, utilizou-se o JavaScript, juntamente com o elemento canvas do
HTML5. Para o desenho de grficos vetoriais foi utilizado o Scalable Vector Graphics
(SVG), que baseado em eXtensible Markup Language (XML). J para desenhar do lado
do servidor, foi utilizado o mdulo Drawn Graphics (GD) da linguagem de programao
Perl, que renderiza o desenho em um formato bitmap, como .jpeg, .png ou outro.
Aps a anlise e exemplificao destas trs qualidades de desenho, veremos que a
principal diferena entre eles no reside no resultado visual (como percebido na criao de
um quadrado simples em cada linguagem) e sim no mtodo e forma de comunicao de
cada um dos grficos com o ambiente cliente/servidor (Figura 22).

Figura 22 Arquitetura cliente/servidor

%)!

3.2 Desenhando no lado cliente

O dispositivo de interao grfica no lado cliente ideal para a transmisso de
sensaes sensoriais e motoras para os usurios, pois possui um tempo de resposta
prximo ao real. De forma geral, a construo de uma interface grfica com interao
multidimensional feita no lado cliente da aplicao. A comunicao com o servidor
obtida com requisies assncronas via texto e totalmente transparente para o usurio.
Em nosso exemplo, o desenho feito no lado cliente um grfico escrito em
JavaScript e renderizado no elemento canvas do HyperText Markup Language (HTML5).
O canvas uma tela de bitmap utilizada para renderizao rpida de grficos e outras
imagens visuais. dependente de resoluo e pode ser utilizado para gerar grficos
dinmicos em duas ou trs dimenses2. A tela basicamente uma imagem baseada em
pixel com uma Application Programming Interface (API) de desenho.
O elemento canvas destina-se a delimitar uma rea
para criao dinmica de imagem, como grficos
estticos, jogos e grficos dinmicos e imagens em
geral criadas com linguagem de programao
dinmica. Todo trabalho de criao e animao
feito com JavaScript. (SILVA, Maurcio Samy.
HTML 5 / Maurcio Samy Silva. -- So Paulo :
Novatec Editora, 2011).

A Figura 23 representa a dinmica de criao de um desenho com a linguagem. A

pgina do cliente faz a requisio do contedo para o servidor e este retorna com o arquivo
JavaScript. A renderizao acontece do lado do cliente dentro do elemento canvas do
HTML5. A vantagem de trabalhar com essa tcnica de desenho a rapidez e flexibilidade
para comportamentos dinmicos, isso porque o desenho construdo no prprio
dispositivo do usurio.
Um desenho dinmico se a sua forma muda sem ser alterado manualmente por
um indivduo ou se acompanha as interaes e movimentos do usurio. "Escrever" o
desenho no lado do cliente com o JavaScript permite a adio desse tipo de

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+!,--./00123451678929:-57910!

http://msdn.microsoft.com/pt-br/library/dn151487.aspx!

%+!

comportamento para formas, textos e cores, de tal forma que torna possvel a criao de
jogos e animaes complexas e leves.

Figura 23 Desenho do lado cliente com o elemento canvas HTML 5 e JavaScript.

A primeira verso de JavaScript foi lanada em 1995 pela Netscape e a Sun

Microsystems (SILVA, 2011). As funcionalidades gerais da linguagem incluem a
manipulao do navegador, do contedo e da apresentao de uma pgina web. Interagir
com formulrios, com outras linguagens dinmicas e requisitar, receber e tratar dados de
um servidor de contedo.
As coordenadas de canvas so definidas seguindo o sistema de eixos cartesianos x e
y, cuja origem o canto superior esquerdo da tela. As coordenadas x crescem da esquerda
para a direita e y do topo para baixo (Figura 24). J a Tabela 6 fornece uma gama de
primitivas, mtodos auxiliares, atributos, alocao de cores e textos contidos na API de
canvas.

Figura 24 Coordenadas do contexto 2D de canvas (SAMY, p.143).

%"!

strokeRect(x,y,l,h)

Contorno de um retngulo. x e y definem o canto

superior esquerdo, enquanto l e h definem a lagura e
altura em pixel.

strokeStyle

Define a cor das linhas do elemento grfico. Aceita

espaos de cor HSL, HSLA, RGB, RGBA e keywords.

lineWidth

Espessura da linha em pixel.

fillRect(x,y,l,h)

Desenho de retngulo em cor slida.

fillStyle

Define a cor de preenchimento do elemento grfico.

clearRect(x,y,l,h)

Apaga uma reas retangular em canvas.

shadow

Atributos

para

sombreamento:

shadowColor,

shadowOffSetX, shadowOffSetY, shadowBlur.

beginPath()

Resetar o path corrente e iniciar a construo de um

novo path.

moveTo(x,y)

Posiciona a pena de desenho nas coordenadas x e y.

lineTo(x,y)

Desenha uma linha da posio que se encontra a pena

at as coordenadas x e y.

stroke()

Aplica os estilos definidos pelos atributos de criao

stroke.

arcTo(x1,y1,x2,y2,r)

Desenha um arco com incio em x1 e y1, trmino nas

coordenadas x2 e y2 e raio.

arc(x,y,r,anguloInicial,anguloFinal,sentido)

Desenha um arco com centro nas coordenadas x e y,

raio em r, ngulos em radianos inicial e final e sentido
horrio ou anti-horrio do ngulo.

fill()

Preenche com cor slida os caminhos definidos pelos

atributos de criao fill.

rect(x,y,l,h)

Desenha um retngulo.

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

Desenha curvas bezier a partir da insero de pontos de

controle.

closePath()

Fecha um caminho desenhado.

globalAlpha

Define uma transparncia.

%#!

lineJoin

Define a forma como as linhas se unem: miter, bevel e

round.

lineCap

Define o acabamento das extremidades das linhas.

createLinearGradient(x,y,x1,y1)

Cria um gradiente linear.

createRadialGradient(x,y,r,x1,y1,r1)

Cria um gradiente radial.

addColorStop(offset,cor)

Define a distribuio das cores do gradiente.

creatPattern(imagem,Repetio)

Insere uma imagem como preenchimento de um

contorno.

GlobalCompositeOperation

Define 11 tipos de composio entre duas imagens:

source-atop,

source-in,

destination-atop,

source-over,

destination-in,

source-out,

destination-over,

destination-out, lighter, copy, xor.

scale(x,y)

Escalonamento x e y de todos os elementos inseridos

em canvas.

translate(x,y)

Deslocamento x e y de todos os elementos inseridos

em canvas.

rotate(ngulo)

Rotaciona todos os elementos contidos em canvas.

drawImage(imagem,dx,dy)

Insere uma imagem nas coordenadas especificadas.

drawImage(imagem,dx,dy,dl,dh)

Insere uma imagem nas coordenadas e redimensiona

em pixel.

drawImage(imagem,sx,sy,sl,sh,dx,dy,dl,dh)

Recorta uma imagem a partir das coordenadas

especificadas, insere e redimensiona.

font

Caractersticas usadas nos textos.

fillText(texto,x,y[,cMax])

Define o preenchimento do texto a ser inserido.

strokeText(texto,x,y,[,cMax])

Define o contorno do texto a ser inserido.

textAlign

Define o alinhamento do texto a partir do ponto de

insero: start, end, left, right, center.

textBaseline

Define o alinhamento do texto a partir da base: top,

hanging, alphabetic, middle, ideographic e bottom.

Tabela 6 Mtodos e atributos da API de canvas

%$!

Exemplos de desenho com canvas/javaScript

strokeRect(120,70,200,200);

Figura 25 Um quadrado escrito em JavaScript e plotado em canvas HTML5.

O exemplo a seguir apresenta um mecanismo de transformao retirado da obra

"Mecanismos en la tecnica moderna" do professor e cientista Ivan Ivanovich Artobolevski,
impressa na URSS em 1976. A traduo para o portugus, o tratamento da imagem e a
montagem da frmula correspondente foi realizadas pelo autor da dissertao. O item aqui
apresentado foi selecionados dentre um conjunto de 2288 mecanismos contidos na obra de
Artobolevski, que por sua vez esto subdivididos em 12 grupos bsicos classificados
segundo critrios estruturais e construtivos.

%%!

Mecanismo de alavanca e conexes de Artobolevski para transformar a

circunferncia na curva de Sluse.

Figura 26 Mecanismo. Imagem original de Artobolevski, 1977, pg.274.

[1219] - Os comprimentos dos elementos do mecanismo satisfazem a

condio OD = r, onde r o raio da circunferncia p p, que se
transforma na curva de Sluse. O elemento 1, que gira ao redor do eixo
fixo O, forma o par de rotao D com a corredia cruceiforme 2, que
possui o eixos perpendiculares. O elemento 3, que gira ao redor do eixo
fixo O, formando pares de translao com a corredia 4 e 5. A corredia 5
forma o par de rotao B com a corredia 6, que se desliza ao longo das
guias t t que, por sua vez, possui o eixo paralelo a Oy. A corredia 6,
com a sua transversal Bf, cujo eixo paralelo ao eixo Ox, forma um par
de translao com a corredia 2. O elemento 7 forma o par de rotao C
com a corredia 4 e um par de translao com a corredia 2. Ao girar o
elemento 1 ao redor do eixo O, o ponto D descreve a circunferncia p
p, e o ponto C descreve a curva q q de Sluse, cuja equao

onde ! a dimenso constante do mecanismo. (ARTOBOLEVSKI, 1976).

%&!

1.

/*Jesus Cristo_O Caminho, A Verdade e A Vida*/

2.

var desenho, x, y, tempo = 0.0030, a = 0, repetio=320;

3.

canvas = document.getElementById('telaDeSada');

4.

desenho = canvas.getContext('2d');

5.

desenho.translate(canvas.width / 2, canvas.height / 2);

6.
7.

function curvaDeSluse() {

8.

for(i = 0; i <repetio; i++){

9.

x = Math.cos((a * (Math.PI)));

10.

y = Math.sin((a * (Math.PI) / 180) + 30);

11.

a = a + tempo;

12.

desenho.beginPath();

13.

desenho.fillStyle = '#000000;

14.

desenho.arc(250*Math.cos((x)*Math.PI/(y)),

15.

180*Math.sin((x)*Math.PI/(y))*(Math.cos((x)*Math.PI/(y))), 7, 2*Math.PI, 0, true);

16.

desenho.fill();

17.

};};

18.

curvaDeSluse();

Cdigo 1 Curva de Sluse escrita em JavaScript.

Figura 27 Curva de Sluse escrita em JavaScript e plotado em canvas HTML5. Fernando Aquino, 2014.
Acesso: http://www.programaogrfica.com.br

%'!

Figura 28 Alavancas baseadas nas condies do mecanismo. A. Aquino, 2014.

Pseudocdigo: desenha a Curva de Sluse.

Linha 1 Comentrio;

Linha 2 Declarao das variveis do desenho: tempo, repetio, xy, a;

Linhas 3 e 4 Chamada do suporte canvas, contexto 2D, telaDeSada

HTML5;

Linha 5 Diviso da tela por 2 e centralizao do eixo coordenado;

Linha 7 a 18 Funo curvaDeSluse();

Linha 8 a 18 Lao de repetio;

Linha 9 Varivel trigonomtrica x;

Linha 10 Varivel trigonomtrica y;

Linha 11 Varivel de sequncia temporal;

Linha 12 a 17 Construo do desenho;

Linha 13 Cor de preenchimento do desenho;

Linha 14 e 15 Traado do arco. Corao do desenho. Cada uma das

320 repeties do lao desenha uma parte da curva de Sluse a partir da

%(!

estrutura do arco, que arc(x,y,raio,incioDoArco,finalDoArco,sentido).

Somente as posies x e y sofrem variaes ao longo da repetio, sendo
os outros mtodos apenas para definir o formato e o raio do arco.

Linha 16 Traar desenho.

Linha 18 Executar funo curvaDeSluse().

3.3 Desenho vetorial para web

Dentre as trs qualidades de desenho apresentadas, o desenho vetorial a que
menos apresenta perda da qualidade da imagem. Isso acontece porque o desenho vetorial
no representado por uma matriz de pixel fixa, mas por um conjunto de pontos e
instrues para conectar esses pontos. Por esse motivo, os grficos vetoriais so um
recurso de imagem especial para o desenho scriptivo, visto que todas as instrues podem
ser dinamizadas por linguagens de programao, inclusive via JavaScript.
A criao de grficos vetoriais feita no formato SVG, sigla em ingls que significa
Scalable Vector Graphics. De incio, pode-se diferenciar os tipos de grficos baseados em
vetor dos tipos baseados em bitmap. Quando redimensionados, os grficos que adotam o
formato bitmap perdem qualidade de imagem enquanto os grficos vetoriais permanecem
inalterados. Isso porque, como dito acima, as informaes nos grficos vetoriais esto
contidas em vetores, isto , linhas unindo pontos.
Grficos SVG so descritos por vetores. Vetores so
linhas (retas ou curvas) que unem dois pontos. Assim,
para criar um grfico vetorial, devemos descrever uma
sequncia de pontos formando um contorno aberto ou
fechado e definir espessura e cor dos vetores, bem como
cor e efeitos do preenchimento. (SILVA, Maurcio
Samy. Fundamentos da SVG / Maurcio Samy Silva. -So Paulo : Novatec Editora, 2012).

A forma encontrada para descrever esse tipo de grfico foi com a utilizao da
linguagem de marcao XML, que um protocolo para transporte e gerenciamento de
informaes. Uma linguagem de marcao trabalha com a informao includa em um
documento de forma a otimizar a sua utilizao via identificao e relao entre as partes
que a compem. A XML foi desenvolvida em 1996 dentro da World Wide Web
!

&*!

Consortium (W3C) e amplamente suportada para o intercmbio de dados entre

aplicaes.
A fora dessa tcnica est em sua integrao natural em pginas web. Suponha que
um grfico SVG se encontra no meio, entre o cliente e o servidor. Inicialmente, o cliente
carrega o grfico com todas as funcionalidades nele contidas (Figura 27). Qualquer
alterao de estado nessas funcionalidades dever ser requisitada ao servidor e o arquivo
recarregado. Naturalmente essa caracterstica pode ser utilizada positivamente,
aproveitando a chamada ao servidor para acoplar funcionalidades ligadas ao novo contexto
do usurio. A menos que seja realmente necessrio, no se renderiza persistentemente um
grfico provindo do lado servidor.

Figura 29 Estrutura de desenho vetorial com SVG/XML.

A Tabela 7 contm uma lista de elementos e atributos da SVG, bem como a forma
de escrev-los.

<rect x="10" y ="10" width="100" height="200"/>

O elemento rect cria um retngulo nas

posies x e y com as dimenses width x
heigth.

<rect ... fill="#ffd700"/>

Adicionar o atributo fill define uma cor

de preenchimento para o retngulo.

<rect ... rx="70" ry="50"/>

Os atributos rx e ry so utilizados para

&)!

arredondar as bordas de um retngulo.

<rect ... stroke="#000000" stroke-width="5"/>

Definem a cor e a espessura de uma

borda, respectivamente.

<rect ... fill-opacity="0.7" stroke-opacity="0.3"/>

Definem a opacidade de preenchimento

e de borda. Os valores variam de 0
(transparncia total) a 1 (cor totalmente
opaca).

<line

x1="7"

y1="7"

x2="40"

y2="210"

stroke="#ffd700" stroke-width="5"/>

O elemento line cria uma linha reta com

incio nas coordenadas x1 y1 e termina
nas coordenadas x2 y2. Os atributos
stroke e stroke-width definem a cor e a
espessura da linha.

<line ... stroke-linecap="square"/>

Esse atibuto define o formato das

extremidades de uma linha em butt,
square e round.

<line ... stroke-dasharray="7,13,2,5,12,8"/>

Define linhas tracejadas a partir de uma

sequncia de nmeros inteiros.

<circle cx="235" cy="123" r="77"/>

O elemento circle cria crculos e

circunferncias

com

centro

nas

coordenadas cx cy e raio r.
<ellipse cx="132" cy="55" rx="95" ry="33"/>

O elemento ellipse cria ellipses com

centro nas coordenadas cx cy e raio
horizontal rx e raio vertical ry.

<polygon points="70,30 120,30 290,75 120,315 120,315,

O elemento polygon cria polgonos

70,30"/>

fechados em qualquer formato com as

coordenadas de cada um dos vrtices
definidas pelo atributo point.

<polyline

stroke-width="#ffd700"

stroke="#000000"

points="30,30 60,120 60,30 150,150 270,70"/>

O elemento polyline cria uma forma

aberta por linhas retas conectadas. Os
vrtices so definidos pelos pares de
coordenadas x e y.

Tabela 7 Elementos e atributos SVG/XML.

&+!

<rect x="120" y="70" width="100" heigth="100" stroke="#000000"/>

Figura 30 Um quadrado vetorial escrito com SVG/XML.

/* Jesus Cristo_O Caminho, A Verdade e A Vida*/

<?php
//
$points_count = 20;
$points = array();
for( $p=0; $p<$points_count; $p++ )
{
$d = ( 60 / $points_count ) * $p;
$x = -15 + ( cos( deg2rad( $d ) ) * 25 );
$y = 25 + ( sin( deg2rad( $d ) ) * 5 );
$points [] = array( 'x' => $x, 'y' =>$y );
}
echo ("<?xml version=\"1.0\" standalone=\"no\"?>\n");
?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/SVG/DTD/svg10.dtd">

<svg style="shape-rendering:geometricPrecision;" viewBox="0 0 100 100"

xmlspace="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
<?php
foreach( $points as $start ) {
$sx = $start['x'];
$sy = $start['y'];
foreach ( $points as $end ) {
$ex = $end['x'];
$ey = $end['y'];
?>
<g id="r">

&"!

<!--path fill-rule="nonzero" style="fill:#000000;stroke:#FF0000;stroke-width:0.2"

d="M<?php echo( $sx." ".$sy); ?> L<?php echo( $ex." ".$ey ); ?> Z"/-->
<circle fill-rule="nonzero" style="fill:none;stroke:#000000;stroke-width:0.02"
cx="<?php echo( $sx )?>" cy="<?php echo( $ey )?>" r="20"/>
<!--animate atributeName="width" values="<?php echo( $sx )?>,50,200"
dur="6s" repeatCount="indefinite"/-->
</g>
<?php
}}?>
</svg>

Cdigo 2 Desenho recursivo escrito em SVG/XML.

Figura 31 Um desenho recursivo vetorial escrito com SVG/XML.

3.4 Comparao entre SVG e canvas

A comparao entre o elemento canvas e o SVG no est destinada para que se
escolha uma tecnologia em detrimento da outra. No h qualquer concluso sobre qual a
melhor, pois o ideal trabalhar com as duas em conjunto, obtendo uma interao dinmica
e verstil. O que se pretende aqui ressaltar as potencialidades de ambas e incentivar um

&#!

desenvolvimento baseado em cenrios, podendo mesmo incluir um terceiro elemento, que

o desenho em Perl, que roda no lado servidor e ser estudado na Seo 3.6. A Figura 30
ilustra uma anlise de cenrios entre as tecnologias.

Figura 32 Anlise de cenrios para escolha entre canvas e SVG (imagem de blogs.msdn.com)

O elemento canvas uma imagem rastreada, baseada em pixel, sendo indicado para
desenhar elementos grficos complexos que exigem uma rpida renderizao de imagem.
Indicado para o trabalho de desenho interativo contido em uma frmula e aplicaes com
grandes quantidades de dados, pois utiliza javaScript para a construo. JavaScript
linguagem que roda no lado cliente e atualmente a principal linguagem cliente-servidor
para navegadores web. recomendada para modulao de voz em displays, movimentos
baseados na interao do usurio e apresentaes em tempo real.
J o desenho em SVG vetorial, podendo ser redimensionado sem que se perca a
qualidade. indicado para grficos, imagens estticas para impresso e animaes prdefinidas. ideal para visualizao de grficos gerados a partir de dados existentes, pois
transforma XML em SVG. recomendado para organogramas interativos, fluxogramas,
plantas de edifcio, esquemas de engenharia, mapas e grficos financeiros. tambm
utilizado em desenhos distribudos por provedores de terceiros e podem ser gerados por
inmeros programas vetoriais e CAD presentes no mercado. A Tabela 8 faz uma anlise
entre as duas tecnologias.

&$!

Anlise entre desenhos feitos com SVG e com canvas

SVG

Canvas

Baseados em modelos de objetos, seus elementos

so semelhantes aos elementos HTML.

Baseada em pixel, onde a tela um elemento de

imagem com uma API de desenho.

Vrios elementos grficos se tornam parte do

Document Object Model (DOM).

Elemento HTML simples semelhante ao <img> em

comportamento.

Apresentao visual criada com marcao e

modificada tanto por CSS quanto por programao
de script.

Apresentao visual criada

programao de script.

Modelo de interao evento/usurio baseada em

objeto no nvel de elementos grficos primitivos:
linhas, retngulos, polgonos.

Modelo de interao evento/usurio dinmico

programados manualmente a partir de coordenadas e
construo em tempo real.

Marcao SVG e modelo de interao baseado no

objeto que suporta acessibilidade aos seus
elementos.

API no suporta acessibilidade. Tcnicas de

marcao devem ser utilizadas juntamente com
canvas.

modificada

por

Tabela 8 Comparao entre desenhos feitos em SVG e canvas (baseado em

http://blogs.msdn.com/b/ie/ archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx)

3.5 Desenho no lado servidor

O desenho do lado do servidor aqui apresentado feito com a biblioteca grfica GD
da linguagem de programao Perl. Perl uma linguagem que roda do lado do servidor,
isto , dependente de uma mquina remota onde ficam hospedadas as funcionalidades
necessrias para o funcionamento do programa (Figura 31). GD.pm uma interface para
biblioteca grfica criada por Thomas Boutell's e possui diversos mtodos de trabalho para
manipulao de imagens, como controle de cor, comandos de desenho, mtodos de sada
de dados, comandos de transformao, canais alfa e mtodos diversos.
Perl uma das linguagens de programao web mais populares, isso devido a suas
capacidades nicas e tcnicas poderosas na manipulao de textos. utilizada em
aplicaes de misso crtica em diversos setores, sendo estvel e multiplataforma
(perl.org.br). Est disponvel sob a Licena Artstica ou a GNU General Public Licence
(GPL).

&%!

Tal como as bibliotecas apresentadas nos itens anteriores, o mdulo GD oferece um

conjunto de primitivas de desenho e outros mtodos auxiliares destinados criao
dinmica de grficos. Embora a sada do programa seja uma imagem bitmap (PNG, JPEG,
etc.), o desenho feito no lado servidor tem como benefcio o acesso irrestrito a todo tipo de
aplicaes e bancos de dados. Um recurso excelente para o desenho scriptivo.

Figura 33 Desenho no lado do servidor plotado como bitmap com GD/Perl

Uma ressalva importante que, de acordo com Martien Verbruggen, Perl no

uma linguagem totalmente adequada para o processamento e manipulao de grandes
volumes de imagens, trabalho que exige um grande processamento de nmeros. No
entanto, Perl conhecida como "a fita adesiva da internet", ou seja, utilizada para juntar
algoritmos, pedaos de dados, ferramentas de texto, bibliotecas, APIs e outros recursos
provindos das mais diversas fontes e linguagens de programao. isso que torna Perl
uma linguagem til para a programao grfica na web.
Por causa da capacidade de colagem do Perl,
existem diversas interfaces para manipulao de
bibliotecas grficas e programas disponveis em
forma de mdulos. Outros pacotes tm sido escritos
para fazer o uso desses mdulos e criar grficos em
um nvel superior, como por exemplo para criar
grficos em pizza ou barras. (VERBRUGGEN,
2002).

&&!

A Tabela 9 fornece um conjunto de primitivas e mtodos auxiliares para desenhar

com o mdulo GD. Esto disponveis alocao de cor, preenchimento, pincis, caracteres,
fontes com tamanho definido em pixels etc. Todos os mtodos devem ser chamados com
um objeto GD::image ou GD::font. Aps a apresentao dessa tabela, ser aprofundado o
estudo da primitiva polygon e da criao de curvas com polyline. As informaes aqui
apresentadas foram colhidas no site do Comprehensive Perl Archive Network (CPAN)
http://search.cpan.org/~lds/GD-2.52/GD.pm e no livro Graphic Programming with
Perl, de Martien Verbruggen.

setPixel(x,y,color)

Define a cor do pixel especificado nas coordenadas.

line(x1,y1,x2,y2,color)

Desenha uma linha slida entre os pontos especificados.

dashedLine(x1,y1,x2,y2,color)

Desenha uma linha tracejada entre os pontos especificados.

rectangle(x1,y1,x2,y2,color)

Desenha um retngulo a partir dos cantos especificados.

filledRectangle(x1,y1,x2,y2,color)

Desenha

um

retngulo

preenchido

partir

dos

cantos

especificados.
polygon(poly,color)

Desenha um polgono especificado em poly. Esse polgono

criado com a ferramenta GD::Polygon::new().

polyline

Desenha uma polilinha, que um polgono aberto.

filledPolygon(poly,color)

Desenha um polgono preenchido especificado em poly.

ellipse(cx,cy,width,height,color)

Desenha elipses com centro do arco em cx e cy, largura, altura e

cor.

filledEllipse(cx,cy,width,height,color)

Desenha

elipses

preenchidas

partir

das

coordenadas

especificadas.
arc(cx,cy,width,height,start,end,color)

Desenha arcos com centro especificado em x e y, largura, altura,

comeo e fim do ngulo.

filledArc(cx,cy,width,height,start,end,

Desenha

arcos

preenchidos

com

as

especificaes

color [,arc_style])

correspondentes.

fill(x,y,color)

Inundao de cores. Preenche os pixels especificados com a

mesma cor.

fillToBorder(x,y,bcolor,color)

Inundao de cores. Preenche os pixels especificados com a

mesma cor at encontrar um pixel de outra cor especificada.

&'!

setBrush(brush)

Definir o pincel a ser utilizado a partir de GD::Image object.

setStyle(color-list)

Definir um estilo de linha para a lista de cor especificada.

Tabela 9 Primitivas e mtodos auxiliares de GD Perl.

rectangle(120,70,220,170,$preto);

Figura 34 Um quadrado escrito em Perl.

3.5.1 Construo de Polgonos

Podemos destacar o mtodo auxiliar polygon(a,b) destinado construo e
manipulao de polgonos. Um polgono (poli = muitos, gono = ngulos) uma figura
geomtrica fechada e formada apenas por segmentos de reta. Os elementos de um polgono
so: vrtices, lados, ngulos internos, ngulos externos e diagonais. Os polgonos so
classificados em funo do nmero de lados que apresentam: tringulo (3); Quadriltero
(4); Pentgono (5); Hexgono (6); Heptgono (7); Octgono (8); engono (9); decgono
(10); pentadecgono (15); icosgono (20 ngulos).
Em GD Perl, os mtodos de trabalho com polgonos so: criar, adicionar e recuperar
pontos, alterar e deletar vrtices, traar linhas, aferir o comprimento e os vrtices, definir
limites, mapear, transformar, escalar, rotacionar e deslocar vrtices ou todo o polgono.

&(!

Abaixo, a descrio detalhada para alguns mtodos de criao e manipulao da primitiva

polygon de Perl3.
Novo Polgono: cria um polgono vazio sem vrtices.

$polgono = new GD::Polygon;

Adicionar: adiciona um ponto ( x, y ) ao polgono.

$polgono->addPt($x,$y);

Recuperar: recupera o ponto do vrtice especificado.

($x,$y) = $polgono->getPt($index);

Alterar: altera o valor de um vrtice existente.

$polgono->setPt($index,$x,$y);

Deletar: exclui o vrtice especificado e retorna seu valor.

($x,$y) = $polgono->deletePt($index);

Excluir: exclui todos os vrtices e restaura o polgono ao seu estado inicial.

$polgono->clear();

Traar: desenhar a partir do vrtice atual para um novo vrtice.

$polgono->addPt($x,$y);
$polgono->toPt($dx,$dy);

Comprimento: retorna o nmero de vrtices do polgono.

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
"!http://www.cpan.org/.!
!

'*!

$points = $polgono->length;

Vrtices: retorna uma lista de todos os vrtices do objeto polgono. Cada elemento da lista
traz uma referncia matricial de (x,y).

@vertices = $polgono->vertices;
foreach $v (@vertices)
print join(",",@$v),"\n"}

Limites: retorna o menor retngulo que circunscreve o polgono. O valor retorna um array
contendo os lados esquerdo, superior, direito e inferior do retngulo.

($esquerda,$superior,$direita,$inferior) = $polgono->bounds;

Deslocamento: desloca todos os vrtices do polgono no valor horizontal ($dx) ou vertical

($dy) especificados. Nmeros positivos movem o polgono para baixo e para a direita.

$polgono->offset($dx,$dy);

Mapear: mapeia o polgono a partir de um retngulo de origem, move e redimensiona o

polgono para uma posio equivalente em um retngulo de destino. Tanto os retngulos
de origem quanto os de destino possuem os lados esquerdo, superior, direito e inferior.

$polgono->map($srcL,$srcT,$srcR,$srcB,$destL,$destT,$dstR,$destB);

Escalar: escala cada vrtice do polgono pelos fatores (x,y).

$polgono->scale($sx,$sy);

Transformar: executa cada vrtice do polgono por meio de uma matriz de

transformao: $sx e $sy so fatores (x,y) de escala; $rx e $ry so fatores (x,y) de rotao;
$tx e $ty so fatores (x,y) de deslocamento.

$polgono->transform($sx,$rx,$sy,$ry,$tx,$ty);

')!

#!/usr/bin/perl
use cPanelUserConfig;
use GD;
my $im = new GD::Image(1500,1000);
my $branco = $im->colorAllocate(255,255,255);
my $preto = $im->colorAllocate(0,0,0);
my $x; my $y;
$im->transparent($white);
$im->interlaced('true');
$poly = new GD::Polygon;
$poly->addPt(500,200);
$poly->addPt(500,300);
$poly->addPt(400,300);
$poly->addPt(400,400);
$poly->addPt(500,400);
$poly->addPt(500,500);
$poly->addPt(600,500);
$poly->addPt(600,400);
$poly->addPt(700,400);
$poly->addPt(700,300);
$poly->addPt(600,300);
$poly->addPt(600,200);
for( $a = 0; $a < 12; ++$a){
$g = $a;
($x,$y) = $poly->getPt($g);
$im->string(gdGiantFont,61*$a,95,$x,$preto);
$im->string(gdGiantFont,61*$a,145,$y,$preto); };
$im->polygon($poly,$preto);
binmode STDOUT;
print "Content-type:image/png\n\n";
print $im->png;

Cdigo 3 Polgono escrito em Perl.

'+!

Figura 35 Sada .PNG do programa do Cdigo 3. Curva W de 1 Ordem (WIRTH, 1999).

Matriz de pontos sobre o plano.

3.6 Desenho distribudo

A ideia de um desenho distribudo nada mais do que scripts remotos servidos a
partir de servidores de terceiros, que possam constituir uma imagem na web sem que esteja
sob o controle de um nico servidor de contedo. A questo resvala no assunto da
computao distribuda e tambm sobre ambientes virtuais distribudos, mas o interesse
aqui somente a construo de uma imagem que seja virtualmente constituda de diversas
fontes. Como se fosse uma parede de azulejos, onde cada um procedesse de uma origem
diferente, a imagem final obtida pela constituio desse todo. Sobre a tcnica javaScript
remoto, que utilizada para o trabalho com o desenho distribudo, Ben Vinegar e Anton
Kovalyov escrevem:

JavaScript remoto cdigo cliente independente,

executado no website do provedor de contedo, mas
servido a partir de um endereo web remoto.
usado na criao de aplicativos altamente

'"!

distribudos, desde widgets sociais e rastreadores de

anlise de trfego at aplicativos incorporados.
(VINEGAR & KOVALYOV, 2013, pg.17).

Assim, os mecanismos estudados no Captulo 4 tornam-se aplicaes de desenho

que so executados em diferentes servidores e interligados pela internet. O procedimento
tende a tornar esses mecanismos mais robustos, pois a possibilidade de se tornar remoto
pressupe um maior apuro nas interconexes das suas partes, resultando em sadas e
entradas explcitas para dados e objetos, visto que empregar recursos de terceiros.
A aparente simplicidade da ideia acaba na primeira tentativa de implementao. De
acordo com Ben Vinegar e Anton Kovalyov, no livro JavaScript Remoto (2013), h muito
trabalho por traz de um aplicativo remoto. necessrio distribuir o cdigo para os
provedores de contedo, carregar bibliotecas e arquivos necessrios para o funcionamento
e por fim, passar informaes de ambiente da pgina hospedeira, de modo a tornar possvel
a busca e o envio de dados para o destino correto.

[...] se considerarmos o desenvolvimento normal de

aplicativos locais, os scripts remotos enfrentam
desafios adicionais. Eles exigem que voc execute
seu
cdigo
em
ambientes
de
navegador
desconhecidos, compartilhados e possivelmente
hostis. (VINEGAR & KOVALYOV, 2013, pg.51).

A Tabela 10 demonstra os resultados obtidos no compartilhamento de recursos

entre origens. Nota-se que h trs elementos para averiguao: protocolo, domnio e porta.
Protocolos so conjuntos de instrues e diretrizes responsveis pela comunicao entre
cliente e servidor. Neste caso, os protocolos HTTP e HTTPS (segurana) so utilizados
para padronizar a comunicao. As portas de conexo so recursos criados para facilitar a
conexo entre dois computadores e geralmente possuem tarefas padro. A porta 80
responsvel pela conexo HTTP. Acessar uma porta diferente requer a sua descrio no
esdereo. J o domnio o endereo na internet que so transformados para endereos de
IP por meio do Sistema de Nomes de Domnio (Domain Name System - DNS).

'#!

URL de origem

Resultado

Motivo

http://desenhoscriptivo.com.br/desenho/cg.pl

Sucesso

Mesmo protocolo, domnio e porta (80)

http://desenhoscriptivo.com.br

Sucesso

Mesmo protocolo, domnio e porta (80)

http://desenhoscriptivo.com.br:8080

Erro

Porta diferente

https://desenhoscriptivo.com.br

Erro

Protocolo diferente (https)

http://cg.desenhoscriptivo.com.br

Erro

Domnio diferente

Tabela 10 Verificao da poltica de mesma origem contra http://desenhoscriptivo.com.br

H diversas tcnicas disponveis para realizar a comunicao entre domnios e a

coleta de dados de ambiente, como AJAX, CORS, JSONP, mensagens em iframes,
window.postMessage, web messaging, web socket e web workers, object, CGI, etc. O
estudo dessas tcnicas foge ao escopo dessa dissertao e no sero aprofundadas. Apenas
sero exemplificadas as tcnicas AJAX Asynchronous JavaScript and XML para
comunicao assncrona cliente/servidor; e a CGI Common Gateway Interface
que descreve um conjunto de protocolos para interao com o servidor. O
esquema abaixo traa um paralelo entre estes dois mtodos de comunicao de dados e as
tecnologias de programao grfica estudadas.
Cliente ! Transporte ! Servidor
AJAX ! XML ! CGI
JavaScript ! SVG ! Perl
O esquema aqui apresentado trabalha com uma lgica de desenho entre as
instncias do cliente e do servidor. A transferncia de informaes grficas (coordenadas,
traados, cores, etc.) pode ser flexibilizada de acordo com o projeto em curso e
armazenada textualmente. H trasferncias de ambas as partes. Ressalta-se, por exemplo,
que o desenho ou imagem processado no servidor pode obter um ganho de eficincia de at
50% de imagem original, ou seja, o desenho plotado na tela fica mais leve (Figura 34).

'$!

Figura 36 Lgica distributiva presente em uma Curva W de 2 Ordem.

3.6.1 AJAX
AJAX uma tcnica de carregamento assncrono de dados (Figura 35 e 36). No
uma tecnologia em si, mas um mtodo de carregamento de dados em javaScript que pode
ser utilizado com diversas tecnologias, entre elas XHTML, CSS, DOM, XML, XSLT, etc.
A tcnica permite o trfego eficiente de dados, com diminuio sensvel no uso de banda,
respostas mais rpidas e maior interatividade nas pginas, alm de ser open source.
AJAX a sigla em ingls para Asynchronous
JavaScript and XML e trata-se de uma tcnica de
carregamento de contedos em uma pgina web com
uso de JavaScript e XML, HTML, TXT, PHP, ASP,
JSON ou qualquer linguagem de marcao ou
programao capaz de ser recuperada de um
servidor. (SILVA, Maurcio Samy. JavaScript: guia
do programador / Maurcio Samy Silva. -- So
Paulo : Novatec Editora, 2010).

'%!

Figura 37 Diagrama de uma requisio sncrona tradicional

Figura 38 Diagrama de uma requisio assncrona com AJAX

XMLHttpRequest o objeto responsvel pelo funcionamento de AJAX e que utiliza

o protocolo HTTP para transferir arquivos. HTTP so metadados descritivos sobre as
requisies feitas pelo cliente ao servidor. A Tabela 11 apresenta os mtodos do objeto.
Mtodos
Open

Descrio
(mtodo,

URL,

assinc, usurio, senha)

Destina-se a informar ao servidor o endereo do arquivo que est sendo

requisitado pelo navegador. O argumento mtodo pode ser GET, POST,
CONNECT, DELETE, HEAD, OPTIONS POST, PUT, TRACE e TRACK.
O endereo URL pode ser relativo ou absoluto. Os demais parmetros so
opcionais.

Send

Destina-se a iniciar uma requisio que j tenha sido definida pelo mtodo
open. Este mtodo admite um parmetro constitudo do conjunto de dados a
ser enviado ao servidor. Os dados a serem enviados podem ser codificados
em diversos formatos, como query string, DOM string, etc.

setRequestHeader

Destina-se a enviar cabealhos HTTP para uma requisio AJAX.

getAllResponseHeaders

Destina-se a retornar um conjunto de cabealhos HTTP de uma requisio em

forma de string.

setResponseHeader

Destina-se a retornar um determinado cabealho HTTP de uma requisio em

forma de string.

abort

Cancela uma requisio em andamento.

Tabela 11 Mtodos do objeto XMLHttpRequest (baseado em SAMY, 2010).

'&!

3.6.2 CGI
A CGI, abreviao de Common Gateway Interface, uma interface entre um
servidor de internet e outro programa, geralmente um navegador web (Figura 37). Pode ser
escrito em qualquer linguagem de programao e descrever um conjunto de protocolos
que iro interagir com o servidor e retornar uma sada, como documentos HTML ou
imagens (ver Tabela 12). A principal vantagem desse mtodo a sua capacidade de criar
pginas dinmicas, tendo como base as informaes de entrada do usurio diversas, como
geolocalizao, verso do sistema, dados inseridos via formulrios, interao e escolhas
particulares.
A Common Gateway Interface (CGI) descreve um
conjunto de protocolos atravs dos quais as
aplicaes (scripts CGI) interagem com servidores
web e (indiretamente) com clientes (ex. navegadores
da web). Estes protocolos frequentemente so
usados para gerar contedo da web dinmico com
base nos dados oferecidos pelo cliente. Uma pgina
web dinmica se seu contedo muda sem ser
alterado manualmente por uma pessoa... (DEITEL,
2002, p.224).

Varivel de ambiente

Descrio

AUTH_TYPE

Mtodo de autenticao usado para validar um usurio.

CONTENT_LENGTH

O comprimento dos dados (em bytes ou nmero de caracteres) passados ao

programa CGI atravs da sada padro.

CONTENT_TYPE

O tipo MIME dos dados enviados.

GATEWAY_INTERFACE

Verso CGI utilizada pelo servidor.

HTTP_ACCEPT

Lista dos tipos MIME que o cliente pode aceitar.

HTTP_USER_AGENT

Nome e verso do navegador utilizado pelo cliente.

QUERY_STRING

No caso de um FORM com o mtodo GET, o contedo dos campos

atribudo aos pares do tipo nome=valor e ento passado ao script.

REMOTE_ADDR

O endereo de IP do cliente.

REMOTE_HOST

Mquina que solicita a execuo do script.

''!

REMOTE_IDENT

O usurio fazendo a solicitao, a varivel ir conter o nome do utilizador

que est fazendo a requisio.

REMOTE_USER

Login do usurio, autenticado pelo servidor.

SCRIPT_NAME

Caminho e nome do script que est sendo executado (ex: /cgi/programa.cgi).

SERVER_NAME

Endereo IP ou nome da mquina do servidor.

SERVER_PORT

O nmero da porta pela qual o servidor atende s requisies.

SERVER_PROTOCOL

Verso do protocolo utilizado pelo servidor.

SERVER_SOFTWARE

Nome e verso do software do servidor que est respondendo os pedidos do

cliente.

Tabela 12 Variveis de ambiente CGI (baseado em GUELICH, 2001 e http://paginas.fe.up.pt/).

A importncia desse protocolo de comunicao para o desenho scriptivo pode ser

visto de diferentes perspectivas, uma vez que possvel recolher informaes passadas via
entrada de usurio ou variveis de ambiente, integrando os dados aos bancos de dados ou
aplicaes no lado servidor.

Figura 39 Diagrama de uma seo CGI

Controlar as modificaes de uma imagem distribuda exige o estabelecimento de

regras explcitas, sendo o constrangimento geomtrico um exemplo caracterstico, mas
importado de outras disciplinas. Essa tcnica prev o estabelecimento de regras e
limitaes aplicadas ao desenho que assegura a verificao das relaes geomtricas, de
forma que a modificao de determinada parte do desenho conduza automativamente a
modificao de outros elementos. um recurso timo para desenho scriptivo.

'(!

A Figura 38 representa uma curva W de 2 ordem, baseada em outro exemplo de

Wirth. Pode ser lida em paralelo com a Figura 34. O movimento paramtrico definiu a
fuso das 4 curvas W de 1 ordem em um nico polgono de 44 lados. Houve a
transformao geomtrica por aproximao. Essa forma tambm possibilita o trabalho de
tratamento de imagens a partir da relao entre pixels. Para tanto, necessrio a criao de
algoritmos que parametrizam as posies relativas das curvas W e depois trabalhar
tratamentos diferenciados e especificados para cada uma dessas posies.

Figura 40 Curva W de 2 Ordem (WIRTH, 1999, p. 139). Mtodo de trabalho com Pixel e reunio
poligonal dos elementos da Figura 34.

3.6.3 Ambiente de hospedagem

As partes que compem um desenho construdo de forma distribuda devem
trabalhar em cooperao, exigindo a troca de dados, adoo de protocolos de comunicao,
variveis e constantes de desenho. Em certo nvel, no h nada de novo aqui. A relao
cliente/servidor pode ser considerada uma ilustrao de sistemas distribudos, pois o

(*!

computador do cliente especializado em obter e apresentar as pginas enquanto o

computador do servidor especializado em montar e disponibilizar as pginas na rede4.
A Figura 39 mostra um ambiente de trabalho dentro de um servidor de
hospedagem. A estrutura de pastas e arquivos semelhante ao que encontramos em nossos
computadores pessoais. J o Cdigo 4 uma marcao HTML que requisita 3 desenhos
remotos, juntando todos na mesma pgina http://www.desenhoscriptivo.com.br. Os
desenhos requisitados so os mesmos estudados neste captulo: JavaScript, SVG e Perl. Os
desenhos so requisitados das pginas http://www.minaspadrodesojos.com.br e
http://www.programaogrfica.com.br. um desenho construdo a partir de diversas
fontes, possibilitando a interao e troca de dados entre seus algoritmos.

<!-- Jesus Cristo_O Caminho, A Verdade e A Vida -->

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Desenho Distribudo Web</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<?php // So Jos ns vos agradecemos.?>
<object id="perl" type="text/perl" data="http://xn--minaspadrodesojosgqbe8j.com.br/desenho5.pl">
<p>Contedo alternativo para navegadores que no suportam object</p>
</object>
<embed type="image/svg+xml" src="http://http://www.xn--programaogrficaxjb4a5e.com.br/bissetriz.svg"/>
<svg width="1600" height="1600">
<rect id="E" x="110" y="60" width="100" height="100" stroke="#000000" stroke-width="3"
fill="transparent"/>
</svg>

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
#!(http://www.ime.usp.br/).!
!

()!

<canvas id='ttt' onclick = "move(200 + a++); mud(200 + a++);" width='1600px'

height='1600px'>Seu navegador no suporta canvas HTML5</canvas>
<script defer src="http://desenhoscriptivo.com.br/formula2.js"></script>
<div><button type="button" id="botao-disparador">Inspecionar objeto Ajax</button></div>
<script type="text/javascript" src="ajaxtext.js"></script>
</body>
</html>

Cdigo 4 Cdigo de um desenho distribudo hospedado em http://www.desenhoscriptivo.com.br.

Figura 41 Ambiente de trabalho em um servidor de hospedagem.

(+!

CAPTULO 4
Processo de Trabalho
Depois de apresentar os esquemas conceituais para o desenho scriptivo, juntamente
com os detalhes tcnicos de implementao em linguagem de programao script, passo a
demonstrar alguns trabalhos construdos a partir da concatenao entre texto e imagem. Os
desenhos a seguir foram feitos utilizando os mais diversos recursos de linguagem,
perfazendo um conjunto especfico entre o desenho real e o desenho virtual, com
elementos de geometria, texto, algoritmos, ambiente cliente/servidor, lpis, papel,
digitalizao, protocolos de comunicao, aplicaes de imagem, vetorizao, mapas de
bits, rguas, compasso, transferidor, pantgrafo, astrolbio, iteratividade, laos de
repetio, regras, interao humano-mquina, frmulas, etc. Trata-se de um conjunto
dinmico de desenho que dialoga com antigos tratados de desenho e outros cdices.
Os resultados aqui apresentados so aplicaes de texto e imagem trabalhadas a
partir do estudo filosfico-geomtrico do captulo 2, bem como da pesquisa tcnica
realizada no captulo 3. Podem ser lidos como uma srie de desenho scriptivo, convergindo
com a produo serializada dentro do campo das artes visuais. Os 10 desenhos scriptivos
foram implementados e funcionam como padro e base para trabalhos futuros.
A escolha desse material justificada por sua sntese conjuntiva. Os mecanismos
utilizam elementos como nmero, ttulo, desenho, descrio e frmula que, concatenados,
servem como prova e exemplo de transformao dinmica entre texto e imagem. Adaptar
esses mecanismos para web foi um primeiro passo para o desenvolvimento de outras
formas de ao da arte dentro do espao virtual. A seleo dos esquemas privilegiou os
mecanismos que podem ser expandidos para outros trabalhos futuros, visto ser o ponto que
melhor ressalta o desenho scriptivo aqui conceituado.

("!

(#!

($!

(%!

(&!

('!

((!

)**!

)*)!

)*+!

)*"!

Tal como a construo com gravetos, que so depurados no plano e retornam para o
espao fsico como ferramentas, esses exemplos podero tambm retornar para o plano
como objetos fsicos ou mesmo outras ferramentas. A evoluo do desenho scriptivo e
dessas novas ferramentas so aspectos a serem tratados em outras ocasies, em um
contnuo esforo de compreender e quantificar o espao pelo plano. De fato, consideramos
o desenho como base para estas destinaes.
Assim, o processo de trabalho observou a orientao feita pelo professor Slvio
Zamboni (2001), na obra A pesquisa em Arte, um paralelo entre arte e cincia, em que
processo de trabalho uma fase da pesquisa na qual, por meio de aes sistemticas,
procura-se chegar materializao de uma obra embasada pelas ideias e interpretaes da
observao.
Texto e imagem, so como castelos de areia construdos pela linguagem. Assim
colocados, em essncia ou simplicidade, fazem pouco movimento e quase nada podem
dizer. Relacion-los ento, traz-los para o papel, soa como mero exerccio acadmico e
puro malabarismo terico. O texto transforma-se na imagem, a imagem transmuta-se para
o texto. A imagem, seja ela proposio ou visualidade, torna-se recurso para a memria,
algo que fixa um significado, um significante e resvala na realidade. Quando distinguimos
algo deste emaranhado natural, no pensamento ou no exterior, imediatamente operamos a
plstica, do grego plastik, arte de plasmar.
A imagem pode ser operacionalizada. Obviedade que, estranhamente est sendo
mantido fora do entendimento comum. A imagem digital, juntamente com os meios de
comunicao atuais, so mitificados e apresentados como mgica. No h interesse em
operar uma pedagogia da imagem ou para a imagem, preferindo-se desenvolver e manter a
massa de manobra em detrimento de construtores e de povo livre. Entretanto, no h
qualquer novidade nesse tipo de discurso.
O desenho uma ferramenta de trabalho e planejamento capaz de expanso
ilimitada. Com as tecnologias digitais e os ambientes remotos, essa forma de estruturar o
pensamento ganhou flego e condio privilegiada. Porm fato o processo de omisso
nas redes atuais, no somente com o desenho, mas em toda a estrutura de comunicao. O
desenho est presente nessas interfaces, o cdigo foi escrito e est sendo executado, mas a
interao com o sistema est focada no instantneo e ainda h pouco espao para operar a
plstica.

)*#!

O que acontece com um suporte de alto nvel como o caso do ecr quando
utilizado repetidamente e em larga escala? Ele se desenvolve. O
entretenimento no desaparecer da internet, mas espera-se cada vez mais uma
operao metalingustica nesse suporte. Com esse sentido, um desenho voltado
para o cdigo e sua escritura so aqui vistos como uma boa prtica para o
desenvolvimento da disciplina nos meios tecnolgicos. Assim como a geometria,
o desenho deve passar para as coisas reais, operar no mundo fsico e ser aplicado
em ferramentas prticas para o dia-a-dia, concordar ou no com a realidade:
riscar o suporte.
Em pouco mais de 20 anos de acesso massivo internet, o brasileiro
presenciou o surgimento e o desaparecimento de dezenas de aplicativos e
plataformas de larga escala. Os processos de transformao operados por essas
experincias so difceis de medir, mas restou algum aprendizado? Houve
avanos na estrutura do fenmeno? Retrocedemos? A prtica poltica, o nvel
tcnico, as relaes sociais, a geografia, os objetos so melhor compreendidos?
H espao para uma outra internet que no esteja pautada na guerra dos
discursos? necessrio uma ferramenta ou uma mdia?
A teoria permite a ampliao do campo de investigao, inclusive com a
retomada de elementos fundamentais para o risco sobre o suporte digital, como
o caso das compreenses sobre mecnica, trigonometria, ponto, linha, pixel e
curvas. Aliado a esses fundamentos, considera-se um avano a insero de
objetos que no fazem parte do escopo da arte e nem do desenho, como o caso
das curvas de Hilbert, curvas W, mecanismos de alavancas, geometria sem
distncia e comunicaes entre origens. A consolidao desse modelo s foi
possvel devido s intervenes contundentes da banca de qualificao.
Em um nvel educacional, as bases da tecnologia esto muito prximas das
bases da arte. Entre a Matemtica e a Programao Grfica podemos
exemplificar a inverso dos quadrantes do plano coordenado. Esses objetos
foram aplicados com sucesso em sala de aula, com alunos de 9 ano do Ensino
Fundamental s sries dos Ensino Mdio, no ano de 2014. notvel o interesse
dessa faixa etria por questes de ordem tecnolgica, sendo a arte a disciplina
mais apta a inserir a tecnologia na escola, retomando seu papel de vanguarda,
atuando frente atual necessidade de desmistificao da imagem.

)*$!

CONCLUSO
Este trabalho oferece trs contribuies principais para o desenvolvimento
e para a construo do Desenho na sociedade atual, bem como para a
implementao de aplicaes livres de desenho em ambientes cliente/servidor:
(i) A utilizao de base filosfica e geomtrica para pensar o risco sobre o
plano, com o objetivo de transformar a ideia em um objeto comunicativo que
possa ser compartilhado. A formulao de algoritmos autnomos presentes em 7
padres inicias de desenho, sendo mesmo uma forma de pensar as predefinies
de uma arte tecnolgica fundamentada no desenho.
(ii) Um desenho distribudo escrito em linguagem de programao script e
em software livre, trabalhado em um ambiente de rede que pode ser acessado de
qualquer terminal com acesso internet. Trata-se de um simples texto que,
quando codificado e inserido em um ambiente adequado, se transforma em um
desenho dinmico provindo de fontes diversas.
(iii) 10 exemplos de trabalhos que concatenam escrita e geometria. Visa as
possibilidades de transformaes entre o desenho analgico e o desenho digital,
ou mesmo o objeto fsico em concatenao com o objeto virtual.
A abordagem enuncia o desenho como uma tcnica importante para o
pensamento humano, uma ferramenta que compreende a transformao do espao
pelo plano, conforme SANTOS (2007) e DHOMBRES (1996). Na realidade
como j foi dito, a arte e a tecnologia compartilham de um mesmo pressuposto,
que a conciliao entre a teoria e a prtica. A implementao de um aplicativo
pressupe a complementao entre essas duas realidades, para comunicar
humano e mquina de forma estruturada e eficiente. Esses elementos, quando
sistematizados, produzem a materializao de um objeto ou mesmo um mtodo, e
estes acabam por atender aos mais diversos escopos de produtos e tecnologias.
Podem mesmo serem trabalhados em uma educao tecnolgica eficiente.
Tanto a arte como a tecnologia, enquanto processos de implementao e
ferramentas do conhecimento humano, guardam semelhanas estreitas. Tanto o

)*%!

desenvolvimento de uma quanto da outra necessita de um estudo tcnico preciso

e incontestvel. No h a possibilidade de se fazer arte nem tecnologia sem uma
implementao precisa da teoria. Claro, aqui mencionamos uma implementao
tima. Os estudos realizados ao longo dessa dissertao trouxeram diversos
problemas quanto ao real impacto dos problemas ligados concatenao do texto
imagem. Sem dvida, nesse entremeio, podemos encontrar diversas situaes
de complexidade elevada. um trabalho que exige engenho e arte.
Um dos aspectos que merecem estudos futuros a correlao da geometria
sem distncia de WITTGENSTEIN (1968) e sua implementao em dispositivos
da chamada internet das coisas. Trata-se de uma viso particular que transforma
os objetos colocando-os em contato direto com a estrutura lgica da imagem. A
distino interior/exterior especfica para um pensamento sobre a internet,
particularmente na tendncia de acesso remoto aos objetos existentes e queles
que esto sendo criados.
A principal tarefa empreendida por esse estudo foi, ento, a utilizao de
ferramentas de desenho a partir de um texto. Considera-se essas ferramentas
como materiais em arte, pois houve a necessidade de montar o quebra-cabeas
e torn-las realmente algo utilizvel. Depois de pesquisar diversas ferramentas
disponveis, optou-se pelas ferramentas livres e destinadas ao texto. O guia foi o
pressuposto bsico de qualquer desenho: o papel em branco. A partir dessa
filosofia foi feita uma seleo que contemplou os ambientes de cliente e
servidor, bem como as ferramentas que poderiam fazer o intercmbio de dados
entre as suas diversas aplicaes. O objetivo foi alcanado e est detalhado no
captulo 3.
Outro ponto relevante o aspecto transversal e didtico do texto, pois
sendo um assunto de relativa complexidade, foi necessrio trabalhar com o
conceito de objeto e a flexibilidade entre seus procedimentos. necessrio
observar que esse estudo foi uma tentativa de concatenar o desenho, a tecnologia
e o texto, portanto houve um elevado esforo para torn-los perceptves dentro
do campo da arte em paralelo com o campo da tcnica. Nesse sentido, observa-se
que a tcnica foi sim questionada pela teoria, resultando na tecnologia, ou no saber
sobre a tcnica. Particularmente, foi estabelecido que, ao final desse trabalho, os resultados
!

)*&!

poderiam oferecer tanto um conhecimento terico quanto um conhecimento tcnico sobre

o assunto, fato que aconteceu naturalmente e com objetividade. A prova disso a
possibilidade de se desenhar em qualquer terminal que possua acesso internet, uma
ddiva alcanada nestes nossos dias de mobilidade e flexibilidade espacial.
Por fim, a perspectiva agora o desenvolvimento de aplicaes mais
robustas para Desenho scriptivo, bem como trabalhar para a divulgao dos
elementos e processos ora desenvolvidos. O corpo do presente trabalho j
oferece uma coletnea variada de conceitos e ferramentas que podero ser
utilizados por praticantes da linguagem desenho que estejam preocupados com as
potencialidades dessa linguagem para o uso livre em nossa sociedade. Trata-se
de uma arte livre, algo que historicamente pertence ao Desenho e acompanha
todos os seus representantes, desde o tempo em que o ser humano resolveu
colocar suas idias no papel.
Algo que meu pai indagou-me um dia: melhor ser o mais pobre dos
ricos ou o mais rico dos pobres?. mesmo uma honra empregar e desenvolver,
pelo trabalho, os dons recebidos de Deus; sendo necessrio trabalhar com ordem,
paz, moderao e pacincia, sem nunca recuar perante o cansao e as
dificuldades; de trabalhar sobretudo com pureza de inteno e com desapego,
tendo sempre diante dos olhos a morte e a conta devida do tempo perdido, dos
talentos inutilizados, do bem omitido e da v complacncia nos sucessos, to
funesta obra de Deus. Valei-me So Jos.

)*'!

BIBLIOGRAFIA
ANTON, Howard. Clculo, um novo horizonte. Cyro de Carvalho Patarra e Mrcia Tamanaha
(trad.). 6 ed. Porto Alegre: Bookman, 2000.
AQUINO, Santo Toms de. Tratado de Arte de Alquimia. Itlia, 1268.
ARTOBOLEVSKI, I.I. Mecanismos de Palancas vol.1. Traducido del ruso por F. Petrov. Moscou.
URSS: Editorial MIR, 1976.
__________________. Mecanismos de Palancas vol.2. Traducido del ruso por F. Petrov. Moscou.
URSS: Editorial MIR, 1977.
BORGES, Jos Antnio; JENSEN, Leo Roberto. Cegos e Computador: Uma Interao que Explora
o Potencial do Desenho. Ncleo de Computao Eletrnica da Universidade Fedral do Rio de Janeiro NCE/UFRJ. Disponvel em intervox.nce.ufrj.br, acesso em 09/08/2014.
BABENKO, Dmitry; MARMANIS, Haralambos. Algorithms of the Intelligent Web. EUA: Manning
Publications, 2009.
BARBOSA dos, Marcelo Luis. Design hipermdia na internet: uma anlise semitica dos padres
de comunicao on-line. So Paulo: Tese de Mestrado, Comunicao e Semitica, PUC/SP, 2005.
BERNERS-LEE, Tim; HENDLER, James; LASSILA, Ora. The semantic web: a new form of web
content that is meaningful to computers will unleash a revolution of new possibilities. Scienti!c American,
2001.
BRAGA, Theodoro. Desenho Linear geomtrico: problemas de desenho linear geomtrico. 14 ed.
So Paulo: cone, 1997.
BRITO, Jorge Lus Nunes e Silva; COELHO, Luiz Carlos Teixeira.

Fotogrametria digital.

EdUERJ, Rio de Janeiro, 2007.

CARVALHO, P.C.P. Introduo Geometria Espacial. Rio de Janeiro, 1993.
CASTELLS, Manuel. A sociedade em rede. So Paulo: Paz e Terra, 2001.
CHADWICK, Henry; EVANS, Gillian Rosemary. Atlas of the Christian church. Editora Phaidon,
1987.

)*(!

CRESPO, Nuno. Imagem, percepo e expresso. A esttica em Wittgenstein. Lisboa, 2008.

CHRISTIANSEN, Tom; WALL, Larry; ORWANT, Jon. Programming Perl, Fourth Edition. .
Sebastopol: OReilly Media, 2012.
COSTA, Luciano Bedin. O ritornelo em Deleuze-Guattari e as trs ticas possveis. UFRGS, 2014.
DA VINCI, Leonardo. Cdice Atlntico. Itlia, 1478-1519.
DEITEL, H.M. H.M. Deitel, P.J. Deitel, T.R Nieto e D.C. McPhie. Perl: como programar. Carlos
Arthur Lang Lisba (trad.). Porto Alegre: Bookman, 2002.
DELEUZE, Gilles & GUATTARI, Flix. Mil Plats vol.4. 1837 Acerca do
Ritornelo, Suely Rolnik (trad.), So Paulo: Editora 34, 1997.
DERRIDA, Jacques. Gramatologia. So Paulo: Perspectiva, Ed.Universidade de So
Paulo, 1973.
DHOMBRES, Jean. O que uma forma? (entrevista). In: As cincias da forma hoje. mile Nol
(org.). Campinas, SP: Papirus, 1996.
DOMINGUES, Diana (Ed.). A arte no sculo XXI: a humanizao das tecnologias. So Paulo:
UNESP, 1997.
DRER. Instruo para medir com rgua e compasso. Alemanha, 1525.
EGOROVA, O. & CECCARELLI, M. Ivan Ivanovich Artobolevski as one of the Founders of
IFToMM. 13th World Congress in Mechanism and Machine Science, Guanajuato, Mxico, 19-25 June, 2011.
ELAM, Kimberly. Geometria do design: estudos sobre proporo e composio. Claudio
Marcondes (trad.). So Paulo: Cosac Naify, 2010.
FERRETTO, Daniel. Curvas: estudo e visualizao com o software cabri-gtomtre II.
Florianpolis: UFSC, 2003.
FLEET, David; HERTZMANN, Aaron. Computer Graphics Lecture Notes. Canad: Computer
Science Department, University of Toronto, 2006.
FRAGOSO, Suely. MALDONADO, Alberto Efendy (ORGs). Internet na Amrica Latina. So
Leopoldo: Ed. Unisinos. Porto Alegre: Sulina, 2009.
FRANZON, Carmen Pinto; BRITO, Arlete Jesus. Um estudo sobre Leibniz e a criao de um

))*!

alfabeto do pensamento humano. Disponvel em: <www.portalrealize.com.br>. Acesso em: 16 jul. 2012.
GIANNETTI, Claudia. Esttica Digital: sintopia da arte, a cincia e a tecnologia. Maria Anglica
Melendi (trad.). Belo Horizonte: C/Arte, 2006.
GUELICH, Scott; GUNDAVARAM, Shishir; BIRZNIEKS, Gunther. Programao CGI com Perl.
Rio de Janeiro: Editora Cincia Moderna Ltda., 2001.
HERRINGTON, Jack D. PHP Hacks: dicas e ferramentas para a criao de web sites dinmicos.
Joo Tortello (trad.). Porto Alegre: Bookman, 2008.
HERTLEIN, Grace C. (Editor). Computer Graphics and Art. Universidade da Califrnia, 1976.
JACOMETTI, Welson Rgis. Geolab - Um Ambiente para Desenvolvimento de Algoritmos em
Geometria Computacional. Campinas, 1992.
LAS-CASAS, Luiz Fernando. Interferncias grficas no cinema. In: VENTURELLI, Suzete (org.)
Arte e Tecnologia: para compreender o momento atual e pensar o contexto futuro da arte. PPG-Arte UnB:
Braslia, 2008.
LEIBNIZ,

Gottfried

Wilhelm.

De la numration binaire. Manuscrito

disponvel

em:

<http://www.bibnum.education.fr/calculinformatique/calcul/de-la-numration-binaire>. Acesso em: 16 jul.

2012.
LIMEIRA, Jos L.S. Utilizao de AJAX no desenvolvimento de sistemas web. Porto alegre:
UFRGS, 2006.
LOBATO, Lcia Maria Pinheiro. A construo de palavras e a arquitetura da faculdade da
linguagem. Braslia: Link comunicao e design, 2010.
LULL, Raymond. Ars Magna. The Ultimate General Art. 1305.
MCDANIEL, Adam. Perl and Apache, your visual blueprint for developing dynamic web content.
EUA: Wiley Publishing, Inc., 2010.
MEDEIROS. Maria Beatriz de. Aisthesis. Esttica, educao e comunidades. Chapec: Argos,
2005.
___________ (org.). Bernard Stiegler. Reflexes (no) contemporneas. Chapec: Argos, 2007.
MOURA, Reinaldo Aparecido. Sistemas e tcnicas de movimentao e armazenagem de materiais:
materiais handling. Reinaldo A. Moura. So Paulo, 1979.

)))!

NIXON, Robin. PHP, MySQL, JavaScript & CSS. EUA: OReilly and Associates, 2012.
NUNES, Joo Fernando Igansi. Esttica da Interface Computacional. In: VENTURELLI, Suzete (org.)
Arte e Tecnologia: para compreender o momento atual e pensar o contexto futuro da arte. PPG-Arte UnB:
Braslia, 2008.
ORLOV, P. Ingeniera de diseo. Jos Puig Torres (trad.). Moscou, URSS: Editorial MIR, 1974.
PRESSMAN, Roger S. LOWE, David. Engenharia Web. Daniel Vieira (trad.); Delano Medeiros
Beder, Marcos Lordello Chaim, Paulo Cesar Masiero (reviso tcnica). Rio de Janeiro: LTC, 2009.
RAY, Erik T. Aprendendo XML. Rio de Janeiro: Editora Campus, 2001.
ROONEY, Anne. A Histria da Matemtica: desde a criao das pirmides at a explorao do
infinito. So Paulo: M.Books do Brasil Editora Ltda, 2012.
ROSA, Joo Guimares. Tutamia (Terceiras estrias). 8. Ed. Rio de Janeiro: Nova Fronteira,
2001.
SABIA, Lygia Maria Maurity. Uma potica transdisciplinar arte, matemtica, simetria e
linguagem de programao Postscript. Fundamentos e instrumentos. Tese. UNICAMP, 2001.
SANTAELLA, Lcia. O homem e as mquinas. In: DOMINGUES, Diana (Ed.). A arte no sculo
XXI: a humanizao das tecnologias. So Paulo: UNESP, 1997.
SANTOS, Eduardo Toledo. Novas Tecnologias no Ensino de Desenho e Geometria. Anais do
Encontro Regional do Vale do Paraba de Profissionais do Ensino de rea de Expresso Grfica, 2000.
SANTOS, Milton. A Natureza do Espao: Tcnica e Tempo, Razo e Emoo. 4.ed. So Paulo:
Editora Universidade de So Paulo, 2009.
______________. Economia Espacial: Crticas e Alternativas. Maria Irene de Q. F. Szmrecsnyi
(trad.). 2 ed., 1 reimpr. So Paulo: Editora Universidade de So Paulo, 2007.
SILVESTRE, Ricardo Sousa. Um curso de lgica. Petrpolis, RJ: Vozes, 2011.
SILVA,A...[et al.]. Desenho Tcnico Moderno. Antnio Eustquio de Melo Pertence,
Ricardo Nicolau Nassar Koury (trad.). Rio de Janeiro: LTC, 2006.
SILVA, Maurcio Samy. Fundamentos da SVG. So Paulo : Novatec Editora, 2012.
___________________. HTML 5. So Paulo : Novatec Editora, 2011.

))+!

___________________. JavaScript: guia do programador. So Paulo: Novatec Editora,

2011.
SLOTERDIJK, Peter. Crtica da Razo Cnica. (1981). Manuel Resende (trad.). Lisboa: Relgio
D'gua Editores, 2011, 671 p.
SOUZA, Carlos Henrique Medeiros de; BOLSONI, Evandro Paulo; CARDOSO, Carla.
Computao Ubqua, Cloud Computing e PLC para Continuidade Comunicacional diante de Desastres.
ANAIS ELETRNICOS - ARTIGOS. V Seminrio Internacional de Defesa Civil - DEFENCIL, So Paulo,
2009. (Artigo_Anais_Eletronicos_Defencil_14.pdf, 627kb) Disponvel em: <www.defesacivil.uff.br>.
Acesso em: 16 jul. 2012.
STARK, Jonathan; JEPSON, Brian. Construindo aplicativos Android com HTML, CSS e JavaScript.
So Paulo: Novatec Editora; Sebastopol, CS: O'Relly, 2012.
STRATHERN, Paul. Pitgoras e seu teorema em 90 minutos; Marcus Penchel (trad.);
Carla Fonseca-Barbatti (consultoria). Rio de Janeiro: Jorge Zahar Ed,1998.
TISDALL, James D. Mastering Perl for Bioinformatics. EUA: OReilly and Associates,
2003.
VARGAS, Milton. Para uma filosofia da tecnologia. Editora Alfa Omega: So Paulo,
1994.
VENTURELLI, Suzete (org.) Arte e Tecnologia: para compreender o momento atual e pensar o
contexto futuro da arte. PPG-Arte UnB: Braslia, 2008.
VENTURI, Jacir J. Cnicas e quadrticas. 5 ed. Curitiba, 22003.
VERBRUGGEN,

Martien.

Graphic

Programming

with

Perl.

USA:

Manning

Publications Co, 2002.

VIANA, Juliana Alencar; MELO, Victor Andrade de. Arte, novas tecnologias e novas redes desafios
para pensar a Animao Cultural a partir do Software Livre. In: VENTURELLI, Suzete (org.) Arte e
Tecnologia: para compreender o momento atual e pensar o contexto futuro da arte. PPG-Arte UnB: Braslia,
2008.
VIGNOLA, Giacomo. Regras das cinco ordens da arquitetura (Regole delle cinque ordini
d'architettura). Roma, 1562.
VINEGAR, Ben. & KOVALYOV, Anton. JavaScript Remoto. So Paulo: NOVATEC
editora, 2013.

))"!

VITRVIO. Tratado de Arquitetura. Martins Fontes, 2007.

WALLACE, Shawn. Perl Graphics Programming. EUA: OReilly and Associates,
2003.
WIRTH, Niklaus. Algoritmos e Estruturas de Dados. Cheng Mei Lee (trad.). Joo Jos Neto
(reviso tcnica). Rio de Janeiro: LTC, 1999.
_________. Algorithms and Data Structures N. Wirth 1985. Oberon version: August 2004.
WIRTH, Uwe. As we may surf. The Relevance of Abductive Inference for surfing through the
Internet. in Semiotica, 141-1/4, 2002, S.159-168.
WITTGENSTEIN, Ludwig. Gramtica Filosfica. So Paulo: Edies Loyola, 2003.
______________________. Tratado Lgico-Filosfico. So Paulo: Companhia Editora Nacional,
1968.
ZAMBONI, Slvio. A pesquisa em arte: um paralelo entre arte e cincia. Campinas: Autores
Associados, 1998.

INTERNET
http://www.cpan.org/.
http://www.google.com
http://helpx.adobe.com/br/photoshop/using/file-formats.html.
http://www.ime.usp.br/~pf/algoritmos/aulas/bint.html
http://www.linhadefensiva.org/dicionario/
http://blogs.msdn.com/b/ie/ archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx
http://paginas.fe.up.pt/

))#!

FIM.

))$!