Category Archives: visualização

Processing – Carros 1.0

Posted on by
Reply

Já faz um tempo que estava enrolando para aprender Processing. Depois de um tempo de hibernação, retomei as leituras do livro da coruja e comecei a estudar alguns tutoriais, no próprio site.

Fiz um breve estudo para iniciar a brincadeira. Chamei de “Carros 1.0“.

Clique na imagem acima para acessar. Depois de abrir, passe o mouse para a esquerda e para direita para acelerar ou desacelerar os objetos.

Um dos meus objetivos é aprender um pouco e excercitar a Programação Orientada a Objetos. Achei o conceito muito interessante. Era algo que eu já havia tido algum contato quando fazia sites com ActionScript há alguns anos, mas que nunca havia parado para estudar. Certamente irá me ajudar em projetos mais sofisticados com Processing daqui por diante, como também poderei compreender melhor o “linguajar”  dos programadores.

Para quem não me conhece, não sou programador, tenho apenas algumas noções. Estudei algo sobre Pascal e C na Escola Técnica. Mas eu ia muito mal nas matérias de lógica de programação, queria era mexer nos programas gráficos (windows 3.11 na época). Depois de uns 5 anos, comecei a fazer sites em Flash e, para deixá-los mais sofisticados, acabei retomando os estudos sobre algoritmos. Mas, parou por aí, mais ou menos em 2006. Atualmente, convivo com desenvolvedores Java no meu trabalho. Um bando de nerd, na verdade, sempre argumentando com classes, objetos, parâmetros, null pointer exceptions, etc.

Segue o código-fonte abaixo: certamente, haverá uma forma mais simples de se construir esse algoritmo. Por gentileza, fique à vontade para criticá-lo e sugerir outra lógica: ficarei muito grato em receber sugestões para aprender um pouco mais.

// carros 1.0 – Daniel Melo Ribeiro www.danielmelo.net
// Estudo de programacao orientada a objeto com Processing.

float acelerador = 0.01;
float tamanho = 30;

// declaracao dos objetos da classe Carros

Carro fusca;
Carro kombi;
Carro corsa;
Carro uno;
Carro palio;
Carro passat;
Carro ka;
Carro idea;
Carro meriva;
Carro sandero;
Carro brasilia;
Carro premio;
Carro corolla;
Carro sonata;
Carro fiesta;
Carro fox;

// tamanho da tela, framerate e inicializacao dos objetos
// cada objeto possui os seguintes parametros: cor, posicao inicial x, posiciao inicial y e velocidade.

void setup () {
size (400, 240);
frameRate(30);
fusca = new Carro(#AF0B0B, 0, 0, 1);
kombi = new Carro (#D8D255, 0, 15, 0.2);
corsa = new Carro (#121476, 0, 30, 0.6);
uno = new Carro (#FC34AA, 0, 45, 1.6);
palio = new Carro (#08DC2A, 0, 60, 0.05);
passat = new Carro (#6D4321, 0, 75, 0.9);
ka = new Carro (#98FA09, 0, 90, 0.03);
idea = new Carro (#34AE23, 0, 105, 1.9);
meriva = new Carro (#45AA00, 0, 120, 0.01);
sandero = new Carro (#B976CC, 0, 135, 2);
brasilia = new Carro (#FA34EE, 0, 150, 0.9);
premio = new Carro (#01AFC8, 0, 165, 0.8);
corolla = new Carro (#DADADA, 0, 180, 2.6);
sonata = new Carro (#783453, 0, 195, 0.4);
fiesta = new Carro (#1ABC34, 0, 210, 1.2);
fox = new Carro (#E365FF, 0, 225, 0.6);
}

// exibe cada carro e inicia o deslocamento.

void draw () {
background(0);
fusca.mostracarro();
fusca.andacarro();
kombi.mostracarro();
kombi.andacarro();
corsa.mostracarro();
corsa.andacarro();
uno.mostracarro();
uno.andacarro();
palio.mostracarro();
palio.andacarro();
passat.mostracarro();
passat.andacarro();
ka.mostracarro();
ka.andacarro();
idea.mostracarro();
idea.andacarro();
meriva.mostracarro();
meriva.andacarro();
sandero.mostracarro();
sandero.andacarro();
brasilia.mostracarro();
brasilia.andacarro();
premio.mostracarro();
premio.andacarro();
corolla.mostracarro();
corolla.andacarro();
sonata.mostracarro();
sonata.andacarro();
fiesta.mostracarro();
fiesta.andacarro();
fox.mostracarro();
fox.andacarro();

if (mouseX < width/2) {    //se o mouse ficar à esquerda, diminui a velocidade
acelerador = -0.03;
}

if (mouseX > width/2) {   //se o mouse ficar à direita, aumenta a velocidade
acelerador = 0.03;
}

}

class Carro {

// caracteristicas do carro: cor, posicao (x e y) e velocidade

color cor;
float posicaox;
float posicaoy;
float velocidade;

Carro (color cor_c, float posicaox_p, float posicaoy_p, float velocidade_v) {

// recebe, via parametro, os atributos de cada carro

cor = cor_c;
posicaox = posicaox_p;
posicaoy = posicaoy_p;
velocidade = velocidade_v;
}

void mostracarro () {

// posiciona e exibe o carro na tela

noStroke();
fill(cor);
rect (posicaox-tamanho, posicaoy, tamanho, 10);

}

void andacarro () {
posicaox = posicaox + velocidade;
velocidade = velocidade + (acelerador*5);

// ao chegar ao final de tela, retorna para o comeco
if (posicaox > width+tamanho) {
posicaox = 0;
}

// ao chegar no inicio da tela, retorna para o final
if (posicaox < 0) {
posicaox = width+tamanho;
}

}

}

Networks: knowlegde in the age of interconnectivity

Posted on by
Reply

Excelente video com o Manuel Lima, o cara do Visual Complexity.

Alguns trechos:

We´re really facing a paradigm shift in the sense that trees are no longer able to acomodate the complexity of modern world.

Neste trecho, ele comenta que, historicamente, a metáfora da árvore muitas vezes foi utilizada para representar o conhecimento, sempre de maneira hierárquica e harmônica. Esse conceito começa a mudar no século XX, com a emergência dos estudos da complexidade e do caos.

The network is an alternative concept of beauty.

A beleza não necessariamente deve estar na harmonia ou no reconhecimento de padrões – apesar de ser algo que sempre buscamos. Não é de maneira fortuita que muitos artistas apontaram para esse caminho da abstração (inclusive Pollock, que Manuel cita em um trecho do vídeo).

The story in the data

Posted on by
Reply

It is not enough to simply suply people with gigabytes of data, though. Not everyone is a statistician or computer scientist, and not everyone wants to sift through large data sets. This is a challenge that we face frequently with personal data collection.

While the types of data collection and data returned might have changed over the years, individuals’ needs have not. That is to say that individuals who collect data about themselves and their surroundings still do so to gain a better understanding of the information that lies within the flowing data. Most of the time we are not after the numbers themselves; we are interested in what the numbers mean. It is a subtle difference but an important one. This need calls for systems that can handle personal data streams, process them efficiently and accurately, and dispense information ton nonprofessionals in a way that is understandable and useful. We want something that is more than a spreadsheet of numbers. We want the story in the data.

YAU, Nathan. Seeing Your Life in Data. In: SEGARAN, Toby; HAMMERBACHER, Jeff (org.) Beautiful Data. Sebastopol, CA.: O’Reilly Media Inc., 2009.

What stories can it tell?

Posted on by
Reply

“But great information visualization never starts from the standpoint of the data set; it starts with questions. Why was the data collected, what’s interesting about it, what stories can it tell?

The most important part of understanding data is identifying the question that you want to answer. Rather than thinking about the data that was collected, think about how it will be used and work backward to what was collected. You collected data because you want to know something about it (…)

One of the most important (and least technical) skills in understanding data is asking good questions. An appropriate question shares an interest you have in the data, tries to convey it to others, and is curiosity-oriented rather than math-oriented.”

Voltei a estudar o livro da coruja, do Ben Fry. O trecho acima está na página 4.

The hidden influence of social networks

Posted on by
Reply

Se tiver um tempo, veja até o final. Aborda muitas coisas interessantes, principalmente a influência das redes sociais em nosso comportamento, nossas emoções ou mesmo em nossa condição física. O que me agrada muito nesses estudos, além disso, são as referências às propriedades emergentes e teoria dos sitemas dinâmicos (o conjunto é maior do que a soma das partes individuais).

Data Flow 2: Visualizing Information in Graphic Design

Posted on by
Reply

International interest in the sophisticated and aesthetic visualization of complex information made Data Flow a bestseller. Today, more and more graphic designers, advertising agencies, motion designers, and artists work in this area. New techniques and forms of expression are being developed. Consequently, the demand for information on this topic has grown enormously.

Data Flow 2 expands the definition of contemporary information graphics. The book features new possibilities for diagrams, maps, and charts. It investigates the visual and intuitive presentation of processes, data, and information. Concrete examples of research and art projects as well as commercial work illuminate how techniques such as simplification, abstraction, metaphor, and dramatization function. The book also includes interviews with experts such as The New York Times’s Steve Duenes, Infosthetics’s Andrew Vande Moere, Visualcomplexity’s Manuel Lima, ART+COM’s Joachim Sauter, and passionate cartographer Menno-Jan Kraak as well as text features by Johannes Schardt about the challenges in creating effective information graphics and about the relationship between complexity, clarity, content, and innovation.

Offering practical advice, background information, case studies, and inspiration, Data Flow 2 is a valuable reference for anyone working with or interested in information graphics.

Fonte: Gestalten

Aqui há um review sobre o livro. Vejam alguns exemplos:

(essa é demais: uma máquina de costura que converte som em forma de linha no pano.)

(wallpaper generativo feito com subjects de spams)

Visualization of cultural data sets

Posted on by
Reply

We believe that a systematic use of large-scale computational analysis and interactive visualization of cultural data sets and data streams will become a major trend in cultural criticism and culture industries in the coming decades. What will happen when humanists start using interactive visualizations as a standard tool in their work, the way many scientists do already? If slides made possible art history, and if a movie projector and video recorder enabled film studies, what new cultural disciplines may emerge out of the use of interactive visualization and data analysis of large cultural data sets?

Só para variar, o que esse cara tem dito me interessa muito. Vejam mais algumas referências aos estudos de “cultural analytics” desenvolvidos pelo Manovich.