Visualização paramétrica

Este texto estabelece um contraponto - pela perspectiva das tecnologias criativas e do processo técnico-construtivo - a outro texto intitulado Pormenores do design de informação nos meios interativos, que discute originalmente um projeto de design de informação, ou mais especificamente, o projeto de um diagrama interativo com a visualização de um mapeamento de produtos narrativos digitais conhecidos como Point & Click Adventures.

Enquanto no primeiro texto a questão enfrentada é a dificuldade projetual de se configurar um artefato para uma mídia naturalmente metamórfica e comportamental atraves de conceitos e ferramentas pensadas para a mídia estática e para resultados definitivos (o material impresso), o olhar dado aqui ao mesmo artefato é do ponto de vista do esforço para a construção de uma visualização de dados, e sobretudo uma que possa ter seus dados atualizados de forma simples e constante.

Os diversos produtos apresentados nesta visualização, os Point & Click Adventures são softwares desenvolvidos desde 1979 - primórdios da computação pessoal - com o intuito de transformar o computador em um suporte narrativo para histórias contadas de forma interativa pela participação ativa e ação do usuário, ou, em outros termos: para fazer da computação uma mídia, e não apenas uma ferramenta. A linguagem e tipologia destes artefatos tem início em formatos textuais (em decorrência dos próprios limites da computação pessoal na década de 1970) que evoluem com o tempo para artefatos visuais com a expressão dos cartoons e desenhos animados (para estabelecer familiaridade com o público infantil para o qual eram destinados), e hoje pouco se diferenciam em sua expressão de outras tipologias como os jogos de ação (first person shooters/FPS, third person shooters/TPS, por exemplo).

Há dois pontos importantes de discussão à partir das tecnologias criativas. O primeiro é o aparato tecnológico que viabiliza a construção de uma visualização dos dados levantados de forma que seja possível sua manutenção e atualização permanente com simplicidade. A programação e os mecanismos computacionais que facilitam este processo estão em parte descritos e demonstrados em um texto técnico com programação em tempo-real disponível na plataforma Observable, intitulado Dataviz em Javascript utilizando dados em tempo real de uma planilha no Google Docs. O segundo ponto é esta relação intrínseca entre as expressões artistico-computacionais - a chamada arte generativa - e outras frentes da computação expressiva, como a infografia, visualização de dados ou dataviz. Quando entendemos o campo das tecnologias criativas exclusivamente pela perspectiva da arte generativa, estas outras expressões acabam se distanciando; mas quando abordamos a questão em um espectro mais amplo, seja como código criativo, computação expressiva, ou apenas como tecnologias criativas, elas se aproximam como se fizessem todas parte da mesma questão - o que particularmente faz sentido para mim, mas talvez não para todos.

No presente caso, tratamos de um artefato que poderíamos qualificar como um diagrama ou painel paramétrico, algo que pode ser enquadrado como uma visualização de dados, mas que também foge um pouco das expressões mais convencionais da área que buscam apresentar graficamente quantidades bem maiores de dados. Esta é uma das aplicações mais diretas das tecnologias criativas sobre o design de informação, área que há anos atrás costumávamos chamar apenas de design gráfico; este conjunção costuma ser referenciada como design paramétrico, justamente por aproveitar a expressão dinâmica do código computacional para prover modificações sobre o produtos do design (sejam os próprios artefatos de design da informação, ou as representações projetuais dos artefatos materiais).

De forma resumida, operamos no projeto em pauta uma visualização parametrizada, e não uma típica visualização de dados. Mas toda a discusão aqui se aplica igualmente à dataviz.

Os dados reunidos ao longo da pesquisa foram estruturados em um modelo que já adoto há alguns anos, chamado AMS, em que diversas características são marcadas em cada entrada de uma planilha, de forma que possam ser filtrados e localizados através destes descritores. Cada caracteristica recebe uma marcação binária (sim ou não), que possibilita criar uma infinidade de conjuntos e cruzamentos de títulos que compartilham das mesmas características.

Na base dos Point & Click Adventures estão presentes descritores sobre o gênero narrativo, a linguagem gráfica adotada na expressão, a forma como o produto foi publicado (por um publisher ou de forma independente), se ele adotou alguma engine específica para ser construído, o formato predominante da interação (textual, gráfica, linear, etc.), além do nome da produtora, o ano de lançamento, a existência de relançamentos especiais ou de comemoração, e um índice específico para associar multiplos produtos em uma mesma série.

Através destes registros feitos para cada nova entrada é possível parametrizar aquilo que será visualizado no painel em tempo-real. Da limitação de um período temporal à escolha do gênero narrativo e linguagem específicos, as marcações feitas neste modelo estrutural permitem identificar conjuntos reduzido de títulos em que as caracteristicas estão presentes. Também é um aspecto intencional desta metodologia não restringir um conjunto de características a uma única opção ou categoria; algo como restringir o registro, digamos de gênero narrativo, a uma única opção, já que um produto pode ao mesmo tempo estar bem caracterizado como sendo do gênero de "ficção científica", mas também estar bem enquadrado como uma narrativa "policial". Esta ambiguidade sobre a qualificação dos artefatos foi um dos grandes motivadores para a elaboração do modelo AMS, já que a grande maioria das ferramentas de mapeamento só possibilitavam a categorização dos objetos em um único registro.

Com estas marcações estruturadas na tabela de objetos, foi possível elaborar todo o conjunto de opções que parametrizam a visualização. Abaixo temos a parte do artefato onde todas as opções são oferecidas ao usuário para modificação dos resultados:

Os dados, por sua vez, são transparentes e podem ser acessados do próprio artefato na sua versão tabulada (abaixo), ou no formato JSON retirado diretamente da própria planilha neste link.

Há três formatos usuais para intercambio de dados entre os sistemas: o CSV, o XML e o JSON, sendo o primeiro o mais antigo e mais otimizado; o segundo com a maior possibilidade nas formas de descrição dos elementos; e o terceiro uma relação mais equilibrada entre os outros dois em termos de otimização e estruturação dos dados, sendo também o mais conveniente quando se usa a linguagem de programação Javascript, já que JSON é, na verdade, um objeto Javascript.

Os dados retirados diretamente da planilha (e que podem, portanto, serem alterados de fora simples em qualquer momento) alimentam o código que gera a visualização, transformando os registros audiovisuais dos produtos em imagens com links para seus vídeos online, e organizando um painel destas imagens em ordem cronológica, distribuídas pela tipologia da interação de cada produto, conforme é discutido no texto sobre a configuração (projeto) do artefato. Os filtros aplicados no quadro acima restringem os dados que alimentarão a construção do painel.

Muito da expressividade do artefato se dá em função da variação nos dados apresentados, e na conformação destes dados ao contexto e condições de uso da visualização (responsividade). Os dados são fixados em um campo do tipo Grid no código HTML/CSS. O Grid é uma estrutura muito flexível e que pode ter sua organização completamente remanejada em função do contexto (ou mais especificamente a diretriz Media do código CSS).

Esta flexibilidade do Grid permite que o conteúdo de duas colunas diferentes sejam fundidos em uma única quando o espaço de tela se reduz (casos dos aparelhos celulares ou tablets), fazendo com que campos (telas) maiores modifiquem a configuração do painel exibindo uma categorização mais detalhada dos dados.

No limite, quando o campo é realmente estreito, apenas duas das ramificações tipológicas mais importantes são exibidas, omitindo os demais artefatos cujo papel é mais complementar, no painel.

A quantidade de dados totais que compõe o painel pode não ser comparável ao que se vê normalmente em dataviz, mas também não é uma quantidade considerada pequena (que tende a crescer), como se vê pelos dados tabulados. A variabilidade desta quantidade também é alta: dependendo dos parâmetros selecionados no quadro, os resultados podem ser pouquíssimos produtos apresentados. O princípio da indeterminação é um dos fundamentos discutidos no contraponto feito em Pormenores do design de informação nos meios interativos.

A necessidade de se visualizar uma imagem de referência sobre cada produto com seu nome e produtora, dentro de uma genealogia, impede que a visualização seja constituída de forma concentrada, como um gráfico que apresente em um espaço reduzido toda uma síntese do que existe mapeado. Para sumarizar estas informações foi criada uma outra visualização apresentando os títulos em cada ano que se enquadrasse aos critérios escolhidos. Esta visualização, contudo, não supre as necessidades/demandas/requisitos estabelecidos pela pesquisa para um painel de visualização onde o usuário pudesse entender as origens e ramos dos Point & Click Adventures.

Abaixo apresentamos tanto a visualização sumarizada, quanto o painel final com as informações completas:

O painel de fato implementado como subproduto da pesquisa foi construído com uma ornamentação visual contendo imagens de fundo para criar um efeito de profundidade (conhecido como parallax). Ele também pode ser exibido em cores/temas diferentes, tendo uma versão preto e branco , uma versão azul, uma versão roxa, uma versão amarela, e uma versão ciano cujas cores remetem à paleta de 16 cores dos primeiros produtos da década de 1980.

Novamente, é importante entender que a ênfase ou requisito da visualização não estava centrada na quantidade de produtos lançados em cada ano (para qual, definitivamente, o sumário seria uma expressão mais adequada), e sim a genealogia da estrutura narrativa de cada um deles, para que suas origens e diferentes matrizes pudessem ser compreendidas. Selecionando características como pixel art no quadro, é possível ver todo o conjunto de Point & Click Adventures originais limitados a este tipo de linguagem, junto com produtos bem mais recentes que adotam a mesma linguagem como uma forma de reverência aos pioneiros do formato narrativo; selecionando a opção retrô, praticamente isolamos os produtos recentes, sem os originais que estruturaram o "gênero". Através destes recortes, é possível compreender que os títulos que homenageam as narrativas pioneiras também se mantém dentro da genealogia de Text Oriented Adventure e Graphic Adventure, reforçando sua reverência produtos que criaram este tipo narrativo.

Em 2022, um novo experimento para visualização destes mesmos registros foi criado. Desta vez, uma peça editorial apresentando a questão das narrativas em suporte computacional, e sua gênese nos artefatos de Point & Click Adventures. Além do texto, o editorial contava com um componente de visualização em forma de uma timeline horizontal, uma das propostas aventadas para configuração do artefato original, mas abandonada em função da inviabilidade de uso em dispositivos mobile.

De fato, este editorial não é amigável aos dispositivos móveis, e seu resultado é interessante, desde que experienciado em um desktop. O componente de visualização, apesar desta condição complicada de existência, conta com inúmeros recursos que a solução anterior não possui: os mecanismos de recorte e filtro na base de dados já são bem mais sofisticados que um formulário duro com checkboxes e barras de dimensionamento, fazendo a devida seleção do conjunto de dados a partir das informações escritas no campo de entrada. A inclusão, por exemplo, de dois anos diferentes já indica à ferramenta que há um recorte temporal a ser considerado na seleção; informações de gênero ou tipologia, em inglês ou português, escritas integral ou parcialmente, são identificados nesta entrada de informação e automaticamente incluem a categoria certa no recorte; indicar parte do nome de um artefato, de uma série de artefatos, ou do nome de uma produtora/estúdio, também produz um recorte na base de dados. Tudo isso é feito de forma muito rápida e imediata ao longo da escrita, contribuíndo para uma performance sensível no comportamento da visualização.

A identificação de padrões, como artefatos de uma mesma série, de uma mesma produtora, de uma mesma tipologia, gênero ou linguagem, abrem um painel lateral contendo explicações complementares que podem ser úteis, e, em alguns casos, vídeos ou documentários relativos a estas questões para enriquecer e oferecer maior contexto ao leitor-usuário.

A nova visualização também permite que as informações sejam agrupadas de maneiras diferentes, exibindo relações entre os artefatos que não eram previstas na primeira configuração. Além de organizá-los pela tipologia, útil para traçar a sua genealogia - o objetivo da visualização para a pesquisa -, esta nova ferramenta permite que os artefatos sejam agrupados pela linguagem adotada, pelos gêneros narrativos, pelas produtoras/estúdios que os criaram, ou mesmo pelas séries dos quais pertencem. Como parte dos registros é não-binário (um artefato pode participar de mais de um gênero narrativo ao mesmo tempo, por exemplo), é possível vê-los em vários locais e grupos paralelos.

A questão da linguagem, sobretudo, passa a ser uma frente a ser explorada, possível apenas através desta nova visualização; inumeros registros novos começaram a ser incluídos na base de dados, como referências aos aspectos da linguagem gráfica presente nos artefatos, considerando que a questão da linguagem é algo bem importante para a pesquisa em design da informação.

Ainda que problemático sob um aspecto de interface e uso (projeto) pensados para que outras pessoas possam usufruir da informação, este novo artefato é, em si mesmo, bastante útil para traçar relações e avaliar proximidades entre as narrativas estudadas. Se tratada como uma ferramenta para uso de especialistas, ela tem grande valor como artefato de visualização de dados.

A versão final do editorial acabou aperfeiçoando o modelo legado de 2022. Pequenos ajustes gráficos foram feitos à visualização (timeline) original, como o uso de avatares quadrados no lugar dos circulares, respeitando a linguagem gráfica do novo editorial; as cores, obviamente, também foram ajustadas para que o componente fosse bem integrado ao novo produto editorial.

Mas não foram operadas apenas mundanças "cosméticas" no artefato. Links que poderiam parametrizar a visualização estavam finalmente independentes do próprio componente, e poderiam acionar mudanças na linha do tempo de qualquer ponto do documento. Não seriam apenas capazes de aplicar filtros sobre ela, como também exibiam paineis sobrepostos com informações sobre o produto de Point & Click mencionado, que poderia ser enviado ao "monitor" disponível no editorial para que o respectivo vídeo (ou emulação do produto) pudesse ser experimentado.

Este novo elemento, o "monitor", representou por si só um grande desafio geométrico para o documento, já que suas dimensões e posições precisam ser alteradas ao longo do documento para que ele não atrapalhe a leitura. Garantir que estas posições e dimensões funcionassem qualquer que fosse a proporção que o navegador se encontrasse ou fosse ajustado, não foi um processo simples de ser resolvido.

Pequenas recomendações de links, imagens das narrativas de Point & Click, ícones indicando qual o tipo de interação dos links, imagens sobrepostas ao texto como se fossem anexos, e um painel capaz de exibir outros vídeos ou apresentações, são algumas das novas interações incluídas no projeto editorial, além de todo o movimento de seus elementos e a capacidade de ir e vir entre uma secção e outra do documento. Muitos recursos de gestão de interfaces foram implementados para criar toda esta fluidez nas interações.

Mas o coração do editorial continua sendo seu componente de visualização em forma de linha do tempo. Nele também foram feitas algumas mudanças: o painel lateral que continha os vídeos exibidos quando um produto era selecionado deu lugar ao "monitor" sempre presente na tela; O componente passou a figurar no final do documento, fazendo com que seu scroll nos dois eixos não atrapalhasse a navegação no resto do documento, como acontecia na versão anterior do editorial; os produtos selecionados não modificavam mais o campo de pesquisa, permitindo uma independência entre o que era visualizado como resultado da ação do usuário (imagens da narrativa, o vídeo e/ou a emulação do artefato), e a navegação/filtragem da linha do tempo; e por fim, as maneiras de organizar os dados disponíveis (por linguagem, por gênero narrativo, ou pelo mecanismo adotado) foram implementados como botões, e não mais como um campo de seleção

Todos estes ajustes finos deixaram o componente melhor integrado e consistente com o resto do editorial. Se um dos problemas iniciais da visualização destes artefatos era a sensação claustrofóbica causada por um conjunto de botões expremidos em uma apresentação de slide interativa, a configuração final da visualização respira de forma bem mais leve e fluída bem acomodada e distribuída ao longo do espaço de tela disponível.

Aparentemente, apenas o que há em comum entre estes dois campos são o uso ostensivo de formas geométricas, construções abstratas e as cores vibrantes. Mas esta é uma percepção superficial do que realmente são. Podemos dizer que ontologicamente (na sua natureza ou essência) são exatamente a mesma coisa: peças essencialmente visuais configuradas por algorítmos, possíveis quase que exclusivamente sob um suporte computacional, que utilizam a repetição e o rítmo como elementos centrais da sua estética, e que seus efeitos plásticos perceptíveis são meramente incidentais, resultantes de regras definidas em sua programação que - estas sim - definem seu comportamento e desenvolvimento.

Dito com outras palavras, as duas compartilham de um mesmo processo construtivo, e também de um mesmo olhar sobre a expressão, sempre calcado em dados, sejam as longas bases de dados que alimentam as visualizações, ou os dados internos de um algorítmo (variáveis, posições, matrizes, etc.) que geram suas formas.

E a dificuldade em criar estes artefatos é também a mesma: a presença de um raciocínio computacional orientando a configuração do artefato (ao menos para entender o que é possível, e como é possível ser feito) e de uma prática na confecção do cógido capaz de dar materialidade a eles - expertises incomuns aos artistas e designers, presentes de forma geral apenas em cientistas e engenheiros de computação com as mesmas deficiências formativas no que tange à habilidades com a expressão, comunicação e composição plástica dos artefatos que criam.

Compensar estas questões é inegavelmente um grande desafio formativo. Atualmente há um esforço em muitas universidades norte-americas para incluir uma formação artística nos campos de ciências exatas chamados de STEM Education (ciência, tecnologia, engenharia e matemática), e transformá-los em STEAM Education (ciência, tecnologia, engenharia, artes e matemática). E esforços desde a década de 90, como o de Muriel Cooper e John Maeda no MIT Media Lab, para incluir o pensamento computacional nos campos artísticos e criativos, que culminaram na criação da linguagem Processing, por exemplo.

Por aqui, trabalho desde 2017 neste projeto chamado Futuro do Design, com o mesmo intuito do Visible Language Workshop de Cooper, ou o Design by Numbers de Maeda, assim como diversos outros colegas espalhados pelo país também o fazem. Especialmente no design, encontramos também a dificuldade em reconectá-lo ao campo da arte em função de um rompimento secular entre as duas práticas.

A interdisciplinaridade formativa, ou quando isso é demasiadamente complexo, ao menos a colaboração entre os campos, parecem ser critérios-chave para que tanto arte generativa quanto o dataviz se tornem práticas mais naturais aos profissionais de design, arte ou computação. Por diversas vezes já me questionei se a produção deste tipo de artefato não seria uma exigência para uma formação contínua ampliando as habilidades e competências dos estudantes, isto é, acrescimos às formações que já possuímos atualmente nas três (ou mais) áreas. Isto também poderia ajudar, mas literacia computacional, na verdade, é uma competência que poderia ser desenvolvida mesmo antes da formação superior, e aproveitada como força criativa, nela. É um traço também dos estudantes brasileiros se sentirem inábeis, desde o ensino básico, com a matemática, geometria e as demais ciências exatas. Nesse sentido, o STEAM me parece a iniciativa mais acertada para que seja possível acabar com o medo instituído em artistas e designers de usar a programação como processo criativo, e a dificuldade que computólogos possuem de usá-la para fins expressivos.