Transcrições
1. Introdução: Eu acho que, como designer, pode ser muito difícil criar regras sobre como criar uma peça, e eu amo que trabalhar com dados é tudo sobre gerar sistemas. Você constrói esse conjunto específico de regras para como algo deve ser representado, e então você pluga dados e ele sai de uma forma que segue essas regras. É fácil ajustar e alterar as regras e obter resultados
diferentes ou alterar os dados e encontrar algo completamente diferente. Processamento é uma linguagem ou uma extensão do Java e foi destinado a incentivar os designers a trabalhar mais com código. Aprender a codificar e processar realmente me mudou como designer. Libertou-me fazer muitas coisas que nunca poderia fazer à mão antes. Então, estou animado para aprofundar o Processamento e fornecer este kit de ferramentas de peças para que outros designers possam usar o Processamento forma
mais completa e ter uma referência para criar seus próprios aplicativos. Eu peguei todas essas peças que encontrei nos últimos anos e coloquei em um só lugar em um kit de ferramentas. Isso é o que eu realmente queria quando eu estava começando com Processing. A intenção não é memorizar todo o código que estou mostrando, mas usar isso como referência para mais tarde quando você tem algo em mente. Deveríamos ter a referência aqui, e você pode pegar esse pedaço de código. Se você fez meu curso anterior sobre geração de mapas com o Processing and Illustrator, este é um excelente acompanhamento para ele. Vale a pena, para designers que estão interessados em código, mas também pessoas que podem estar trabalhando com código já, mas estão mais interessadas em usá-lo para fins de design. Meu nome é Nicholas Felton. Sou um designer de informação baseado no Brooklyn e trabalho com dados.
2. Visão geral: A maneira como eu abordei esta classe é fornecer quatro tipos diferentes de esboços. Inicialmente, analisaremos diferentes maneiras de colocar os dados no processamento. O próximo conjunto de esboços está em torno de diferentes estruturas que você pode criar como grades, linhas, ou composições radiais. Em seguida, como acontece com toda a codificação, você vai encontrar bugs. Eu forneci um par de técnicas diferentes que eu achei úteis em termos de chegar à raiz dos problemas e passar para o passo final que é o refinamento. É aqui que estamos tentando fazer as coisas parecerem melhores e levá-las a um estado polido. Então, Processamento é software de código aberto, é gratuito para baixar e usar para qualquer finalidade. Você pode obtê-lo aqui em processing.org para Mac, Windows
e Linux. Você pode fazer uma doação se quiser apoiar a fundação e seu trabalho, e aqui você pode obter as versões mais recentes. Para começar, vou rever alguns dos conceitos fundamentais de Processamento com
os quais você deve estar familiarizado antes de seguir em frente nesta lição. Criei um conjunto de arquivos que você pode baixar do Skillshare, ou arquivos de dados, ou estruturais,
depuração e refinamento, e, em seguida, alguns exemplos finais que reúnem tudo. Então, no final disso, estaremos fazendo algo como este pequeno esboço que olha todos os diferentes exoplanetas que foram descobertos até agora e visualizá-los usando uma combinação de algumas dessas técnicas diferentes. A idéia básica deste kit de ferramentas é que você pode pegar algo como um importador CSV combinar isso com uma técnica estrutural como uma composição radial, e então usar algumas das ferramentas de depuração para
descobrir por que não está funcionando ou otimizar como ele está funcionando e, finalmente, aplicar alguns desses refinamentos. Como neste caso, usando saturação de matiz e modo de cor de brilho em vez de RGB. Então, eu vou ter um par de exemplos diferentes que são semelhantes, e este é outro que estará nos exemplos definidos no final, ou finalmente este conjunto de gráficos de linhas. A idéia é que estes são todos apenas baseados em pequenos trechos de código que eu vou introduzir nas seções a seguir. Espero que você tenha alguma experiência com Processamento por conta própria ou fazendo minha aula anterior sobre Processamento e Illustrator. Eu acho que é importante agora apenas rever alguns dos conceitos básicos para que estes não nos enganem mais tarde enquanto olhamos para idéias mais específicas. Resumidamente, Processing, novamente, é um aplicativo que você baixou
do site de
Processamento e é composto por três elementos básicos diferentes: o editor onde vamos escrever código, o console que escreve erros ou qualquer registro que configuramos, e, finalmente, a tela que é onde todo o desenho acontece e que se parece com isso. Ali está o editor e a consola. Se o executarmos, a tela aparece. Processamento tem uma área de configuração e uma área de desenho, e por isso estas são duas das principais estruturas que vamos confiar. Existem tipos básicos de variáveis: inteiros, floats e strings. Um inteiro é para qualquer número inteiro, float é para números decimais, e uma string contém texto, e esses são provavelmente os três tipos básicos de variáveis que estaremos usando. Uma matriz é basicamente uma lista de diferentes tipos de dados. Então, como uma matriz de três números seria zero, um e dois, e então nós abordamos estes dentro do parêntesis colocando um número lá como zero, um e dois para acessar diferentes partes da lista. Há também um exemplo aqui de uma matriz de strings como uma lista de pessoas. Isso é realmente útil para visualização de dados. Uma vez que temos dados em algum formato externo, geralmente
queremos trazê-los para uma matriz onde podemos apenas iterar através dos diferentes elementos e desenhá-los para a tela. Você também pode fazer uma lista de listas. Novamente, tudo isso é explicado um pouco mais detalhadamente na classe Processing anterior, então isso está ficando um pouco confuso. Por favor, volte e atualize. Mas uma matriz 2D é basicamente uma lista de listas. Então, é mais como uma matriz, é uma coisa bidimensional, e na verdade começa a se assemelhar a uma planilha onde temos linhas e colunas. Estes novamente são abordados da mesma forma que você pode ver aqui como imprimir esta linha no local 0, 0 nos dá o número zero. Para passar por tudo isso, usamos um loop. Este é um loop for que vai iterar através da nossa matriz e imprimir coisas para a tela. Isso é incrivelmente útil e vamos usá-lo ao longo do próximo exemplo. Finalmente, uma função que era fundamental para o projeto de mapeamento que fizemos anteriormente é essa função chamada mapa. Basicamente, ele leva um único número e o contexto para ele como este inicial, que é uma latitude que loops entre 180 negativos e 180, e então apenas mapeia para outro intervalo de números. Neste caso, 0 a 400 e assim. Esta é uma função que leva cinco parâmetros diferentes. O primeiro é o valor, o segundo é seu intervalo nativo, e um terceiro par de números é o intervalo final alvo. Finalmente, eu queria mostrar esta visão imponente, mas reconfortante, do Processamento. Então, na página de referência de Processamento, eles listam todos esses atributos
e funções diferentes que estão disponíveis no programa, e eu acabei de passar e destacar os que eu conheço. Então, enquanto eu sinto que eu posso fazer a maior parte do que eu quero no Processamento, você pode ver aqui que eu estou usando apenas cerca de metade das diferentes partes deste programa, e eu acho que com uma quantidade ainda menor, como um quarto deles, Você pode fazer uma tonelada. Então, não é sobre dominar o programa, é sobre aprender o que você precisa para fazer o que quiser. Espero dar-lhe muitos desses elementos neste curso.
3. Dados: Nesta lição, vamos analisar a importação de dados para o Processamento. Este é um passo crucial e a base de fazer qualquer visualização usando o aplicativo. Na minha experiência, encontrei três diferentes tipos de dados. Há CSV, que é valores separados por vírgulas, estes são geralmente emitidos por planilhas e são incrivelmente comuns. Ele também pode existir como um TSV, que é apenas um valor separado por tabulação em vez de um separado por vírgulas. Você pode ver neste slide como
o CSV é compacto e eficiente e provavelmente é o mais fácil de trabalhar com ele. Mas você pode encontrar um par de outros formatos como XML ou JSON, estes são normalmente saem de aplicativos ou interfaces web como a API de mapeamento do Google, ele irá retornar algo em um formato JSON ou XML. Eles podem ser um pouco difíceis de analisar, então vamos dar uma olhada em como percorrer estes e colocar os valores no mesmo tipo de formato que faríamos com um CSV. Então, eu construí sete pequenos esboços diferentes aqui para demonstrar algumas das diferentes técnicas que você pode usar para importar dados. O primeiro, vamos olhar para este pequeno CSV. Esse é um ano de meus dados de atividade de andar, correr
e andar de bicicleta. Então, a idéia aqui é a mesma que usamos no mapeamento com o projeto Illustrator e Processing. Você tem duas variáveis diferentes aqui: o CSV que vai trazer os dados e, em seguida, o dividido,
que é chamado MyData. Esta é a matriz bidimensional em que vamos colocar dados. Mas basicamente, a idéia aqui é que nós
trazemos todos os dados em apenas uma matriz de linhas, o CSV, e nós podemos imprimir o CSV. Deixe-me trazê-lo. Vou livrar-me desta. Você pode apenas ver que tudo é importado, mas é uma bolha. Então, o próximo conjunto de comandos diz dividir isso na vírgula e salvá-lo nesta matriz bidimensional. Então, agora você pode ver que é muito mais limpo, e no próximo exercício estrutural, você pode usar isso para criar formas diferentes. Há algumas outras maneiras que você pode trazer um CSV para Processamento. Há também uma estrutura de dados de tabela, e assim este mostra como isso funciona. É bastante semelhante ao dividido, os resultados são quase exatamente os mesmos. Mas neste, você pode abordar cada coluna pelo nome. Então, se você trazer seus dados como uma tabela, agora você pode simplesmente dizer no mês da coluna, eu quero obter todos os valores. Ou na execução da coluna, eu quero obter todos os valores. Você tem que dizer que tipo de variável eles serão. Neste caso, meses vão ser strings porque eles são texto ou as atividades em si serão números decimais, como andar, correr, e ciclo. Esta é a iteração mais simples, onde apenas temos um loop para onde estamos pegando tudo, mas não estamos realmente salvando. Então, se eu quiser usá-lo em várias partes de um esboço, é útil colocá-lo em uma variável global. Se você se lembrar, uma vez que definimos uma variável fora da configuração, então ela pode ser acessada em todo o esboço. Então, aqui, quando trazemos a tabela, dizemos que esses contêineres, essas matrizes de valores serão tão longas quanto o número de linhas no CSV,
e, em seguida, como nós loop através dele, nós apenas salvamos cada um. Isso nos permite mais tarde no esboço ser capaz de abordá-los de diferentes lugares sem ter que recarregá-los cada vez. Então, uma outra coisa conveniente que você pode fazer. Neste exemplo, estamos usando uma função chamada append, e isso é realmente útil quando você não sabe quanto tempo seu conjunto de dados será. Neste exemplo anterior, onde estávamos salvando tudo em uma matriz, estabelecemos antes de começar
a preencher a matriz que ele vai ter um certo conjunto de linhas de comprimento. Então, estamos estabelecendo o tamanho deste contêiner. Mas se você estiver usando uma API ou talvez um desses outros tipos de dados que podem ser úteis para usar append, neste, estamos apenas dizendo para adicionar um pedaço de dados ao final, e continuar fazendo isso repetidamente até que não haja mais dados para adicionar. Agora, isso pode ser mais lento de usar, mas se estamos apenas fazendo isso uma vez na configuração, eu acho que está tudo bem. Então, eu uso isso o tempo todo e você pode ver que é um
pouco mais compacto do que a outra abordagem. Então, essas são quatro maneiras diferentes de extrair seus dados CSV. Agora, XML é Extensible Markup Language, e é muito detalhado, ele tem todas essas tags diferentes que são repetidas uma e outra vez e outra vez. Mas esta é apenas uma parte de alguns dados em execução que eu baixei do Strava, e basicamente você só tem que mergulhar em toda a hierarquia diferente aqui para extrair as coisas. Então, eu não vou entrar em detalhes sobre como isso funciona, mas se você precisar extrair alguns dados de um XML, que é algo que eu faço de vez em quando, essas são as peças que você vai precisar. Nós carregamos, retiramos algumas crianças, preenchemos nossas matrizes com valores. Então, se você precisa tirá-lo de um arquivo XML, esta é a maneira de fazê-lo. O mesmo se aplica ao JSON. Este é um formato hierárquico, e o Processamento provavelmente não é a coisa mais nativa para processar. Mas novamente, eu mostrei a vocês como extrair dados deste pedaço de amostra de JSON. É apenas uma questão de cavar lá dentro, criar uma matriz, e andar por ela e retirar elementos. O ponto é apenas colocá-lo em Processamento como uma matriz e extrair todas essas informações da estrutura. Se você precisa de JSON, esta é a referência para fazer isso ou um exemplo de trabalho, e algo que eu tinha procurado desesperadamente ao tentar trabalhar com o JSON pela primeira vez. Finalmente, vou mostrar-vos uma outra pequena técnica que acho muito útil. Este é um conjunto de dados que eu descobri que é tudo sobre filmes sobre distopias diferentes e o ano em que eles saíram, mas você pode ver essas diferentes categorias aqui. Então, uma das primeiras coisas que eu gosto de fazer
ao trabalhar com um pedaço de dados é descobrir, bem, qual é a categoria mais popular? Quantos deles estão lá? O processamento tem um tipo de dados. É muito útil para fazer isso. Chama-se dicionário. Neste caso, é um IntDict ou dicionário de inteiros. Um dicionário é um par de valores, como uma chave e um valor. O que isso nos permite fazer é puxar este conjunto de dados, eu estou usando um CSV e a abordagem de tabela para trazê-lo, e então eu configuro este dicionário, e eu apenas adicionar cada uma dessas frases ao dicionário, uma de cada vez. Então, aqui mesmo, onde eu estou percorrendo todas as linhas para o índice que eu configurei acima do meu índice, eu estou apenas adicionando o valor dessa linha aqui, que é o nome do tipo de distopia e dando um valor de um. Então, isso basicamente cria uma lista de todos os valores diferentes e me leva a essa maneira realmente útil de olhar para os dados, que me diz que o “Governo/Social” são o tipo mais prevalente de distopia, enquanto “Alien controlado” apenas tem oito, é o menos comum. Então, você pode fazer isso para um conjunto de ajustes e descobrir quais palavras são usadas mais nele. Na parte inferior aqui, eu estou apenas classificando por quantas vezes cada palavra aparece,
e, em seguida, salvá-lo em uma matriz de chaves e uma matriz de seus valores. Então, eu espero que este conjunto de referências para trabalhar com dados seja útil,
e se você encontrar alguns desses tipos de dados mais exóticos, você não ficará muito assustado, pois você tem uma referência para extrair os dados relevantes.
4. Estrutura: O próximo capítulo é tudo sobre diferentes estruturas. Eu lhe dei seis tipos básicos e um monte de diferentes iterações deles. Começando com linhas, e depois transformando isso em uma grade, trabalhando com formas concêntricas. Temos alguns exemplos diferentes de como fazer linhas, retas
e curvas, alguns exemplos radiais e, finalmente, brincar com coordenadas. Então, o primeiro é o mais simples. Isto é apenas usar alguns retângulos para desenhar algumas linhas e eu vou mostrar-lhe o que isso gera. Então, temos cinco barras diferentes aqui. Eu estou basicamente apenas configurando alguns valores comuns no topo, estes serão valores globais. Eu geralmente gosto de ter uma margem nos meus esboços para que as coisas não estejam apertando para o lado. Então, se você fizer este zero, você verá que não é tão bom quanto eu dou 50 porque eu estou usando esses valores em todo o bloco para fora
os retângulos nas bordas e entre si. Estamos basicamente na maior parte disso, estamos apenas fazendo um loop aqui que diz, para o número de retângulos que eu especifiquei, que é cinco, não os descreva. Dê-lhes um preenchimento de um cinza e, em seguida, desenhe-os a partir de uma margem que é 50. À medida que iteramos através, isso vamos de zero a quatro porque ele precisa ser menor que o retcount. Então, queremos que os tamanhos do retângulo aumentem e também precisamos da margem para aumentar. Então, esta é a posição inicial do retângulo e, em seguida, há sempre vai
ser a largura menos o preenchimento nas bordas,
margens, largura e este valor que eu especifiquei de RectSize tall. Então, essa é uma maneira simples de desenhar um monte de retângulos para a tela. Vindo para a próxima, a próxima iteração disto é ou o que se queremos um monte de histograma, alguns pequenos gráficos de barras, mas vários deles. Para isso, a peça crítica disso é que você precisa de dois loops. O primeiro que já fizemos que é quantos retângulos verticalmente haverá e, em seguida, um loop horizontal. Então, isso é para quantas barras nós montamos que é 20. Queremos rolar por isso horizontalmente. Então, quando eu executar isso, você pode ver que ainda temos essas cinco áreas verticais, mas dentro dela, temos 20 barras verticais. Cada um deles está recebendo um valor a partir daqui com esta função aleatória que está dizendo, eu quero que minhas barras sejam entre metade do meu RectSize ou metade de 100 e 100. Outra coisa legal que você pode fazer é apenas fazer uma grade simples de retângulos. Então, esta é a mesma ideia. Temos um loop aninhado. Então, temos o primeiro que desenha verticalmente, e o outro que desenha horizontalmente. Estamos desenhando 25 retângulos diferentes neste pedaço de código. Podemos fazer o mesmo com elipses. Temos o nosso código aninhado outra vez. Agora, temos 25 por 25 elipses. O principal aqui é que estamos apenas usando elipse para desenhá-lo e temos que adicionar este pedaço de código que diz, “Desenhe isso do canto em vez do centro.” Cada círculo está desenhando a partir do canto superior esquerdo assim como os retângulos fizeram. Este é um pouco mais interessante. Então, se quisermos adicionar dados a isso, mas temos nossa escala de retângulo a partir do centro, temos que mudar as coisas um pouquinho. Anteriormente, eles estavam desenhando do canto superior esquerdo. Então, aqui, especificando como onde os círculos onde eu fiz um canto, eu tenho que especificar para os retângulos, desenhá-lo do centro. Você pode ver que enquanto eu passo o mouse, eles estão mudando de tamanho. Bem, isso é porque em vez de definir o RectSize aqui e sempre ficar com ele, eu substituo isso mais tarde dizendo usar
a posição do mouse para definir o tamanho do retângulo. Vamos usar muito este comando MouseX porque ele é realmente útil para ajustar seus gráficos e ver como diferentes valores os impactam. Eu sei que esta estrutura terá valores
diferentes e me permitirá ter retângulos de tamanhos diferentes porque, Eu posso alimentá-lo o valor MouseX. Neste exemplo, estamos apenas desenhando um monte de quadrados concêntricos. Então, este é apenas um único loop para o número de retângulos que eu quero. Desenhe cinco retângulos, começamos com um que é 400 por 400 aqui e então apenas compensa cada um por 50. Então, isso é feito usando i ou um contador no loop for para multiplicar o tamanho do deslocamento, que eles
fiquem maiores e maiores. Temos um círculo aqui, circular um também. Que é a mesma ideia básica usando esse deslocamento para crescê-los cada vez. Existem algumas maneiras diferentes de desenhar linhas no processamento. O mais simples é um conjunto reto de linhas. Basicamente, como você faz isso é basicamente três partes. Nós temos este BeginShape, que diz que eu quero começar a desenhar uma linha e, em seguida, para cada ponto, nós definir um vértice e, em seguida, usar EndShape para fechá-lo. Então, à medida que passamos pelo loop for, estamos pegando nossos pontos aleatórios para a altura e
pontos uniformemente espaçados para a largura e adicionando um vértice em cada local. Existem também maneiras fáceis de fazer linhas curvas no processamento. Então, em vez de usar esse vértice normal, nós apenas usamos vértice curvo. Agora, você pode ver como o gráfico tem a sensação mais suave para ele. Isso é apenas usando basicamente um ponto CurveVertex em vez do vértice normal. Você também precisa adicionar esses extras um logo após BeginShape e um logo após EndShape. Mas há um pequeno problema com estas linhas curvas. Isso é que eles são bons para desenhar normalmente, mas, eles não são os melhores para desenhar dados porque, como você verá, eu desenhei círculos vermelhos aqui para cada ponto que está no meu conjunto de dados, e você pode ver como a linha atinge um pouco acima do lá e, em seguida, esta peça vai um pouco abaixo e um pouco abaixo aqui. Então, ele está realmente exagerando os dados de maneiras que não queremos. O conjunto de dados não está ficando tão alto, mas é isso que ele está representando. Então, eu usaria isso onde faz sentido, mas talvez para desenhar dados, não
é o melhor. Isso pode levar você a usar simplesmente linhas retas ou a usar a curva de Bézier. Agora, este é o último tipo de linha que eu vou mostrar a vocês. Mas, é um pouco mais complicado. Este é apenas um único exemplo de uma curva. Não é o mais intuitivo. Basicamente, você tem que configurar os pontos de controle para tudo isso com este BezierVertex. Então, agora, são precisos seis pontos diferentes para desenhá-lo. Mas espero que consolo em saber que toda vez que tento fazer isso, estrago tudo. Levo cerca de 10 ou 15 minutos de depuração para obter uma curva de Bezier agradável para funcionar, é por isso
que estou muito feliz em ter agora este exemplo simples onde tudo este exemplo simples onde tudo
funciona e você pode ver como conectar os valores certos. Estou usando o MouSex aqui para controlar essas alças para ajustar a tensão. Então, você pode pegar essa peça aqui. A curva de desenho bezier que começa com BeginShape e termina com
EndShape, e colocar em seus valores, e é isso que eu vou estar usando a partir de agora. Se você tem curvas que você quer fazer, espero que você pegue este pedaço de código também. Movendo-se para estruturas radiais. Este é um simples que apenas coloca um monte de círculos em um círculo. Agora, estou usando tanto MouseX quanto MouseY para controlar diferentes parâmetros aqui. Então, decidi que quero que o número de formas seja determinado por um décimo de MouseX e o tamanho da forma seja determinado por um décimo de MouseY. Então, vamos todo o caminho para a esquerda. Eu fico com um círculo e eu posso torná-lo maior ou menor indo para cima e para baixo,
e eu posso adicionar mais círculos indo para a esquerda e para a direita. Pense nisso como uma superfície na qual você pode facilmente adicionar dados, assim como com as curvas e com todas as formas anteriores. Também podemos fazer isso com linhas. Mais uma vez, este é outro conjunto de fórmulas que eu sempre tenho que google quando eu uso apenas para determinar quais são as posições X e as posições Y dos pontos finais dessas linhas. Você pode ver que há alguma geometria lá dentro, estamos usando senos e cossenos. Bu, a idéia aqui não é lembrar essas coisas para tê-lo memorizado, mas ter um recurso para voltar para ele e fazê-lo funcionar quando você precisar. Podemos fazer o mesmo com retângulos. Queremos retângulos saindo do centro, aqui você pode ver o código que faz isso. Mas, há um pequeno problema aqui é que, se tivermos quatro, eles não se alinham precisamente, não estão completamente centrados. Essa é uma pequena falha com a maneira que eu preparei. Então, eu lhe dei um exemplo melhor aqui. Este Rectoffset radial. Então, para obter todos os nossos retângulos desenhando perfeitamente centrados, eu tenho este outro pedaço de código. Este está usando uma coisa nova. Isso é para fazer transformações. Isto é basicamente se você quiser deslocar algo ou girá-lo, você pode criar um contexto para isso usando PushMatrix. Aqui diz: “Tudo depois do início do PushMatrix eu quero que ele seja traduzido ou girado ou escalado e então eu quero que os transformadores parem quando eu colocar este pedaço de código PopMatrix aqui.” Então, inicialmente, e eu posso desligar um desses para que você possa ver como ele está funcionando. Se eu só usar, ou vou desligar os dois na verdade. Então, eu não tenho nada aqui, você pode apenas ver o topo deste retângulo se movendo. Isso é porque todos os meus retângulos diferentes estão desenhando um sobre o outro. Agora, se eu ativar a tradução de rotação, agora, eles estão todos girando, mas eles estão centrados em torno do ponto zero aqui, que é onde essas traduções e rotações começam. Então, uma vez que eu ativar a tradução, agora eu estou movendo-a através da metade da largura da tela e metade da altura da tela. Você pode ver agora que está perfeitamente onde eu quero. Podemos usar a mesma técnica para texto que pode ser muito útil se você quiser rotular esses retângulos. Bem, como você consegue que o texto não fique em linha reta? Usamos a mesma abordagem. Este é aquele PushMatrix, algum PopMatrix para obter um monte dessas palavras. Isto é inspirado por Bart Simpson. Algo que você pode ter que escrever no quadro-negro muitas centenas de vezes. Finalmente, apenas olhando para algumas coordenadas, então isso remonta ao que estávamos fazendo com os mapas. Se você quiser colocar um conjunto de pontos aleatórios na tela. Voltamos para o nosso amigo, a função de mapeamento. Então, vamos pegar esse conjunto de pontos que eu gerei. Eles são apenas aleatórios e mapeá-los para a tela. Eu sei seus valores de 0-100 e eu quero que eles sejam traduzidos entre margem e com margem de menos. Então, apenas em uma boa parte da tela aqui que eu quero usar. Finalmente, se além de ter simplesmente coordenadas, você deseja conectá-las. Eu fiz este pequeno esboço que combina esses círculos e as linhas curvas para gerar um caminho aqui e eu também estou numerando-os apenas para que eu possa entender o que está acontecendo. Começam no zero e terminam às nove. Neste caso, não importa se as linhas ultrapassam os pontos porque, este é simplesmente um caminho conectando-os. Não é mais um gráfico. Então, espero que essa seja uma boa maneira de começar seus projetos com um conjunto de composições pré-embaladas. Depois de pegar um dos nossos pequenos módulos de importação de CSV ou XML ou JSON, você o coloca aqui, preencha um array
e, em seguida, use uma dessas composições para gerar uma visualização.
5. Depuração: Nesta lição, vamos lidar com insetos. Estes são uma parte inevitável de escrever código e que muitos dos melhores programadores do mundo tipo de cera filosófica sobre. Eu encontrei essas duas citações que eu gosto. Um, pelo criador do BitTorrent que diz que, "90% da codificação é depuração. Os outros 10% estão escrevendo insetos.” Este outro de um dos engenheiros que Flipboard diz que, “Depurar é como ser o detetive em um filme de crime onde você também é o assassino.” Eu acho que isso é parte da satisfação única de trabalhar com código também é que, quando você começa essas coisas funcionando, você meio que perseverou através de seus próprios obstáculos e obstáculos que você coloca em seu caminho para obter essa coisa funcionando. Ao longo do caminho, peguei algumas técnicas que
achei úteis para evitar a criação de bugs. Porque há um conjunto de códigos que você vai escrever. Isto é válido. O processamento diz que este é um bom código, faz sentido, mas não faz exatamente o que você quer. Então, como você obtém ambos um código válido que funciona como pretendido. Vamos começar com apenas algum tipo de práticas recomendadas para escrever código. Uma é puxar toda a sua constante. Então, sempre que você tiver um único número no arquivo, tipo cinco ou dez, me
dá os resultados que eu quero. Tente puxar isso para uma variável. Neste caso, tivemos este primeiro exemplo que é sobre desenho de uma elipse na posição X e Y, mas eu quero que os dados sejam dimensionados 10x. Bem, o problema com isso é que 10 estão aparecendo duas vezes aqui. Você pode passar e mudar um deles, mas você não muda o outro,
ou dizer, você está usando essa constante em cinco lugares diferentes ou seis lugares diferentes. Você vai encontrar todos eles cada vez que você quiser mudá-lo? Eu acho que a melhor prática é configurar uma variável para isso, como escala destruída e apenas usar isso ao longo. Agora, você acabou de mudar o número um e pode levar a menos problemas. Em termos de nomeação de variáveis, este é um problema persistente na codificação. Você quer que as coisas sejam rápidas e eficientes, mas também descritivas, para que você saiba o que estão fazendo. Eu tendem a evitar essas variáveis de uma letra que você pode ver às vezes no código de outras pessoas. Mas, eu acho que é melhor ser mais explícito enquanto tenta permanecer conciso com seus nomes de variáveis. Ele irá ajudá-lo a entendê-lo mais tarde quando você voltar para ele e ajudar outras pessoas a entender seu código também. Um grande e muito comum ditado para codificação é, não se repita. Então, sempre que você se vê escrevendo o mesmo código duas vezes, é um pouco ineficiente, mas pode levar a erros. Neste exemplo, temos esta pequena fórmula para obter a área do diâmetro de um círculo, dada a área. Mas como uma elipse precisa tanto de sua altura quanto de sua largura, estou usando duas vezes. Assim como usar um fator de escala ou outra constante várias vezes, isso pode ser uma receita para problemas se você não copiá-lo corretamente, ou você mudar uma pequena coisa nele. É melhor puxar isso para fora e ter sua própria linha onde ele está aparecendo apenas uma vez, e ainda melhor, mas um pouco mais avançado maneira de fazer isso é criar uma função. Isso mostra como você pode criar uma função que calculará o diâmetro de um círculo que se torna apenas um pedaço de código que fica abaixo da configuração e das regiões de desenho. Então, sempre que eu quiser obter um diâmetro de círculo, eu apenas enviá-lo para a área, e isso vai me dar o valor de volta. Uma das coisas boas que o processamento faz é que, ele irá inserir automaticamente seu código antes de você. Então, se você pressionar o comando T no teclado, ele levará algo como o código não formatado à esquerda e basta inserir tudo. Esta é uma prática útil que eu faço o tempo todo, e ajuda a identificar onde vai haver problemas, onde um conjunto de parênteses não está fechado ou você tem outros problemas com parênteses. À medida que você voltar e refinar seu código, é útil passar por ele e certificar-se de que qualquer coisa que está abandonado, como variáveis ou linhas de código, você não está usando, seja retirado. Estamos todos trabalhando muito rápido e tentando coisas diferentes, mas como bits de código ficam órfãos, é bom retirá-los e manter as coisas limpas. Então, agora vamos olhar para alguns outros esboços que mostram algumas
dessas técnicas de depuração e maneiras que achei úteis para encontrar os problemas no meu código. Um erro que você vai encontrar continuamente e que eu vejo em uma base diária é este, índice de
matriz fora dos limites. Isso significa apenas que você tentou acessar um pedaço de dados que não existia. Então, neste caso, eu tenho uma matriz com oito valores nele, e no meu loop quatro, eu estou tentando acessar cada um desses valores diferentes. Mas aqui, o problema é que, Eu disse para eu ser menor ou igual ao comprimento do meu conjunto de marcadores. Isso basicamente significa que está tentando ir para nove. Se eu remover a parte igual e executá-la novamente, tudo ficará bem. Agora, uma das maneiras de depurar isso pode ser, usar
a função de impressão. Este esboço vai me dar o mesmo erro. Que há uma exceção fora dos limites. Mas, usando a impressão lean aqui, estou imprimindo toda vez que funciona até que não funcione. Então, eu posso ver que quando eu é igual a sete, ele está obtendo o último valor fora da minha matriz, que é 700, mas claramente está tentando ir mais longe. Isso é uma indicação de que estou superando o tamanho dos meus dados, e que remover essa marca de igual deve fazer as coisas funcionarem perfeitamente. Outra coisa que pode ser útil e às vezes está funcionando, mas não está desenhando o que você esperava. Então, neste caso, estou tentando desenhar oito círculos diferentes, mas estou vendo apenas um. Uma das coisas que posso usar às vezes é usar opacidade. Posso definir a opacidade para algum outro valor como 120, e isso pode ser útil para revelar o que está acontecendo. Neste caso, que todos os meus círculos estão desenhando, mas eles estão apenas desenhando um em cima do outro, ou outra coisa que eu gosto de fazer é usar o mouse X. Mais uma vez, isso vai me dar todos os valores da posição do meu mouse e permita-me descobrir o que está a acontecer. No caso da transparência um valor fixo é provavelmente bom, mas o que eu gosto sobre isso é que, mouse X vai me dar valores que eu entendo. Eu sei que aqui à esquerda, vai ser zero. À direita, serão 800 neste caso, e então eu posso usá-los para descobrir se um sistema está funcionando da maneira que eu prevejo. Outra maneira de resolver esse problema com os marcadores desenhando um sobre o outro é usar um traço em vez de transparência. Então aqui, em vez de dar a eles todos preenchimentos, posso ver que os círculos estão desenhando um sobre o outro, dando-lhes um golpe. Para composições mais complicadas, acho útil começar a anotar o esboço. Estas podem não ser coisas que eu gostaria de ver no esboço final, mas elas serão muito úteis para entender o que está acontecendo. Então aqui, eu ressuscitei nossa curva de processamento anterior, mas estou mostrando os pontos de controle agora e rotulando-os com texto que tem seus valores, e também a tensão nesses pontos de controle. Isso me ajuda a entender exatamente o que está acontecendo no esboço, e você pode ver aqui que eu rotulei as coisas, modo que uma vez que eu tenho que trabalhar da maneira que
eu quero, eu posso extrair todos esses elementos que eu não quero. Como remover os pontos de controle. Remova o texto que está rotulando os valores que estou vendo. Isso pode ser realmente um valor para entender como um esboço está funcionando. Este problema de precisão flutuante é algo que eu garanto que irá enganar alguns de vocês enquanto você está começando a usar o processamento. Este é um tipo de ocorrência comum em que você deseja distribuir uniformemente um conjunto de pontos, linhas
ou retângulos na tela. Você pode ver neste exemplo de topo, está quase funcionando. Esses pontos estão se distribuindo quase totalmente uniformemente pela tela. Na parte inferior, estes dois exemplos mostram-me como deve funcionar. O problema aqui é que, quando eu estou pedindo processamento para me dizer quão longe esses pontos devem estar, a resposta correta é 33 e um terceiro pixels. A resposta incorreta é 33, o que está quase correto. O problema aqui é que, precisamos de um flutuador para manter o espaçamento dos nossos elementos. Este é um número decimal. Mas, se fizermos todos os cálculos com número inteiro, como neste primeiro exemplo, então a largura é um número inteiro. Dois é um número inteiro, é um inteiro. Margem é um número inteiro e contagem de elementos, eles são todos inteiros. Mesmo que digamos que queremos salvar um número decimal, toda a matemática que ele faz é com números inteiros, é por isso
que obtemos 33 no final. Tudo que você tem que fazer é transformar um desses números em um flutuador, como em vez de multiplicar a margem por dois, nós multiplicamos por 2.0. Ou você pode dizer, “Eu quero que a contagem de elementos seja um flutuador colocando este código flutuante em torno dele.” Agora, quando a matemática for feita, será preciso, e teremos o valor correto aqui de 33 e um terceiro pixels. Se seus esboços funcionam, mas as coisas não estão alinhando, procure por esses problemas de precisão flutuante que podem estar tropeçando você. O exemplo final que vou mostrar tem a ver com a taxa de quadros dos esboços. Alguns dos que tenho mostrado a vocês são animados, onde os loops de desenho vão uma e outra e outra vez. Você pode ter algo onde começa a se sentir assim, onde começa a atolar e as coisas estão ficando lentas. Você pode ver que eu tenho um pouco de código aqui no topo, que está me dizendo quantos quadros por segundo este está desenhando e quantos quadros já passaram. Se você achar que ele não está operando em 60 quadros por segundo, tente colocar essa única linha no topo do seu código. Então, isso irá dizer-lhe os quadros por segundo
e, em seguida, à medida que você tentar coisas diferentes, você verá o impacto da sua taxa de quadros e se isso está ajudando. Este pedaço de código foi intencionalmente escrito para basicamente atrapalhar o esboço, então você pode vê-lo caindo de 40 para 20 quadros por segundo. Então, eu acho que estes são os petiscos que eu tenho, dicas para depuração, e nós podemos passar para o passo final, que vai ser polido. Se essas dicas não foram suficientes para resolver um problema que você possa ter
além de postar na página do projeto no Skillshare, você também pode acessar os fóruns sobre processamento. Há uma comunidade realmente vibrante lá de pessoas que estão animadas para ajudar novatos, e eu sei que é o primeiro lugar onde vou
procurar se alguém teve o mesmo problema que eu já tenho. Você pode pesquisar na pequena barra de pesquisa, ou ir ao próprio fórum e começar a procurar o aviso que você está recebendo, ou o que você está tentando fazer que não está funcionando.
6. Refinando: By the way, eu gostaria de compartilhar um conjunto de diferentes refinamentos; maneira de polir seu esboço para que as coisas pareçam ainda melhor. Primeiro, temos usado principalmente linhas, círculos
e retângulos em nossos esboços. Mas há um par de outros tipos de formas disponíveis em Processamento. Existem triângulos e arcos. Este esboço demonstra algumas
das outras formas que podem ser úteis para a visualização de dados. Além de retângulos e círculos, triângulos são uma ótima maneira de representar quantidades, bem
como arcos, que são apenas seções de círculos. Nesses esboços anteriores, acabamos de usar o tipo padrão em Processamento, mas o que é bom é que você também pode carregar qualquer tipo de letra de sua máquina. Neste caso, estamos carregando Georgia e salvando um PDF com a saída. Então, isso vai ter algum texto delineado. Aqui está o nosso PDF. Algum bom vetor, nítido, tipo personalizado. Em Processamento, se você quiser descobrir como nomear um tipo de letra, como aqui estou usando Georgia, eu uso isso. Eu vou para criar fonte. Você não precisa criá-lo, mas você pode simplesmente olhar através sua lista de tipos de letra instalados. Hoje eu quero usar Calibre-Black. Eu só posso ver que é referido aqui como Calibre-Black. Eu não preciso do tamanho em si. Então, eu vou cancelar e mudar Georgia para Calibre-Black, então ele vai carregar o tipo e agora eu tenho um bom pedaço personalizado do tipo. Nesse exemplo, o tipo de letra que eu estava usando estava todo delineado, mas pode ser útil ter também texto em tempo real. Então, isso significa que se eu colocá-lo em um ilustrador, eu serei capaz de editá-lo. Você pode ver aqui que eu não posso editá-lo, são apenas formas. Mas, se usarmos essa pequena adição ao código, esse modelo de modo de texto, isso significará que quando executarmos o código. O PDF que ele emite, não
será delineado. Ao trazê-lo para o Illustrator, posso editá-lo, posso alterar o tipo de letra, e é realmente útil para ser capaz de manipular a saída de Processamento. Outra pequena peça que eu não mencionei é que com retângulos, você pode dar a eles um quarto parâmetro. Então, além de sua localização X e Y e sua altura interna, você também pode dar a eles um raio de canto. Então, neste esboço eu apliquei isso ao mouse x. Então, agora eu sei se é um valor muito baixo e estou imprimindo no console. Isto é o que o raio dos cantos de três pixels parece versus um raio de 32 pixels e quase 70. Então, eu posso passar por aqui, encontrar o valor que eu gosto, e então dizer, se é 14, e então eu posso apenas colocar isso e ser estático. Há alguns modos de cores diferentes que também estão disponíveis no Processamento, então RGB é padrão e você não precisa defini-lo. Acontece por padrão. Mas normalmente, as cores são especificadas de 0 a 255. Colocando um número aqui após o modo de cor, você pode dizer : “Quero que todas as minhas cores existam em uma escala de 0 a 100.” RGB é ótimo, mas não há diferença
nas cores que ele pode representar em relação esse outro modo de cor saturação e brilho. Mas, do ponto de vista dos dados, é mais fácil manipular as cores e saturação de matiz e brilho do que está em nosso RGB. Então, esta é uma pequena turnê pelo espaço de cores RGB. Você pode ver que eu tenho eu acho que é vermelho e verde indo ao longo destes dois eixos e como eu mover o mouse o canal azul é adicionado em mais. Então, você pode ver que há muitas cores boas aqui, mas elas estão espalhadas pelo espaço de cores, então pode ser mais difícil acessá-las, e é por isso que você pode colocar em valores estáticos. Enquanto que com saturação de matiz e brilho, você está controlando essas qualidades fixas da cor. Então, a tonalidade não é uma dimensão, quão saturada está. Há outra dimensão e V ou valor é a última. Então aqui, vocês podem ver que eu tenho todas essas boas cores realmente brilhantes que existem simultaneamente. Isso está se movendo através do espaço de cores com saturação total
e brilho total e eu posso diminuir o brilho e eles ainda estão embalados juntos. Então, eu posso apenas definir o
valor de saturação e brilho e, em seguida, aplicar a tonalidade a um pedaço de dados, ou posso dizer que eu quero que a saturação disso se aplique a um pedaço de dados. Processamento também produzirá uma série de formatos de imagem diferentes. Esta é a exportação embutida, permitirá que você salve quadros como PNGs, JPGs, TGA ou TIFs e você simplesmente faz isso
alterando o sufixo aqui no pedaço de código SaveFrame. Eu também lhe mostrei uma maneira agradável de ser capaz de executar um esboço com vários quadros. Você pode usar esta função aqui o “vazio keyPressed” um para ser capaz de pressionar uma tecla no teclado e salvar um quadro ou usar o mouse pressionado. Então, você tem um monte de parâmetros e você está modulando o esboço. Uma vez que você chegar a um lugar que você gosta, digamos que você está arredondando os cantos com base em MouseX, então você pode simplesmente clicar no botão e salvar a saída. O mesmo se aplica aos PDFs. Precisamos de um par de peças diferentes, precisamos importar o processamento ou a biblioteca PDF de processamento inicialmente. Em seguida, temos apenas uma peça que inicia o processo de salvamento se registro e um pedaço que termina o processo de salvamento. Novamente, incluí duas funções aqui, para que não esteja salvando um PDF em cada quadro. Justamente quando você quiser, você pode clicar no botão do mouse ou pressionar P
no teclado e ele irá salvar esses quadros para você. Então, acho isso muito útil. Eles geralmente simplesmente não querem ser salvos em um PDF o
tempo todo , mas é bom tê-lo em teclados, modo que quando você encontrar algo bom você pode salvá-lo. Embora eu geralmente esteja trabalhando com dados, pode
ser útil ter um componente aleatório às vezes. Uma das coisas boas que eu descobri é que embora aleatório normalmente seja diferente cada vez que você usá-lo,
você pode colocar esta linha de código em e chamar RandomSeed e apenas dar-lhe um número fixo. Isso significa que toda vez que você executar o esboço, você terá a mesma saída aleatória. Então, enquanto é um de cada vez que eu executo, esses pontos estão na mesma posição. Mas digamos, eu mudo para dois, agora eles estão em uma posição diferente, mas será consistente cada vez que eu executá-lo com RandomSeed como dois. Então, digamos que se você quiser usar isso para cores mas você encontrar um bom conjunto de cores aleatórias que
funciona, é bom ser capaz de bloquear isso usando RandomSeed. É bom ter controle sobre o que é rotulado às vezes, especialmente com o grande conjunto de dados. Então, neste caso, eu quero saber o valor desses círculos e nós fazemos isso de um par de maneiras diferentes. Um pode ser apenas jogar com o mouse aqui e descobrir, onde é o limite onde esses números começam a ficar muito grande para caber? Então, parece que ao passar o mouse ao redor que quando eu chegar abaixo de 20, eles começam a se estender para fora dos círculos. Então agora, estou usando esta declaração condicional que diz, se o valor da elipse é maior que MouseX, então desenhe. Ou usando esses dois tubos, isso significa que se essa outra condição for atendida, que é se esse valor for maior do que meu limite de rótulo rejeita para ser 45. Qualquer um deles fará com que os rótulos apareçam. Então, se eu apenas remover este, e apenas colocá-lo no MouSex, eu posso encontrar o lugar onde eu estou confortável com ele. Então, talvez tudo acima de 30. Eu não quero ser rotulado e, em seguida, eu posso alterar meu limite de rótulo para 30 e remover o componente mouseX dele. Então, agora, eu rotulo ele tem mais de 30, é aplicado e esta é uma boa maneira de ajustar a rotulagem para os dados que você tem. Finalmente, vamos querer mostrar alguns números e estes podem não ser tratados nativamente tão bem como nós tratá-los em um programa de design. Então aqui, eu tenho este valor original 80,472,65. Agora, eu realmente não preciso de decimais. Então, no próximo exemplo, eu mostro a vocês como você pode arredondar os decimais apenas lançando-os para um inteiro. Então, colocando este pequeno pedaço de código em torno do meu número, agora será um número inteiro. Mas isso poderia parecer melhor se colocássemos uma vírgula que seria mais fácil de ler. Então, este outro pedaço de código aqui, este NFC vai colocar em é um formatador de números, nf e c é uma vírgula. Então, coloque uma vírgula na posição certa. Então, finalmente, talvez eu nem queira essa precisão total. Não quero que seja 80.472. Então, dividindo-o por 100 e, em seguida fazendo isso e arredondando esse número e multiplicando-o de volta por 100, então eu posso mudar a precisão. Então, eu posso fazer isso 10 e 10 e executá-lo novamente. Isso me daria um pouco mais de precisão ou se eu dividi-lo por 1.000 e multiplicá-lo por mil, então será um pouco mais redondo. Então, isso arredondado para o lugar dos milhares. Então, essas são técnicas diferentes para fazer seus números parecerem muito melhores, o que
será mais fácil de ler e exigir que você faça um pouco menos de trabalho. Então, espero que esses pequenos trechos sejam úteis e ajudem seus esboços a parecer muito melhor. Na próxima lição, vamos colocar um monte desses componentes juntos e fazer alguns esboços acabados.
7. Exemplos: Finalmente, eu gostaria de mostrar a vocês como todas essas peças podem se
unir e fazer um exemplo de processamento final. O primeiro que tenho são alguns dados de exoplanetas que baixei. Exoplanetas são essas terras potenciais que
foram encontradas em torno de estrelas fora do nosso sistema solar. Você pode baixar essas informações livremente da web. Todos estes parâmetros diferentes sobre os diferentes corpos celestes que foram descobertos. Então, eu quero juntar tudo isso em um esboço. Isso começa como com os outros exemplos, trazendo os dados. Então, vamos fazer isso usando um dos exemplos de importação de tabela. Eu acho que é essa abordagem, “Data_02" Então aqui, nós temos uma tabela que estamos usando, e nós definimos essa tabela como você pode ver aqui com o nome do nosso CSV, e nós dizemos que ela tem um cabeçalho. Isso nos permite abordar esses diferentes pedaços de dados por seus cabeçalhos de coluna, como ID de linha, ou nome de host do planeta. Então, apenas trazendo esses dados, mas aqui, você pode ver no console como antes. Aqui estão os dados que eu trouxe, e estão apenas imprimindo as peças que estou trazendo. Então, eu estou dando a cada um um um número, um nome, e ele tem um tamanho. Neste caso, é quantas vezes o tamanho de Júpiter, é a distância do sol,
e UA é a unidade astronômica de quão longe a Terra está do sol. Então, esta é uma distância relativa. Então, eu baixei esses dados, eu os trouxe usando minha abordagem de tabela CSV. Eu colocaria um pouco de lógica condicional
aqui porque nem todo planeta tem informação. Então, eu não quero estar tentando desenhar planetas que têm um raio de zero ou uma órbita de zero. Então, eu só estou dizendo, se o raio for maior que zero e a órbita do planeta for maior que zero, então eu quero desenhar esses caras. Então, obviamente vou precisar de algumas elipses para representar meus planetas. Então, esta é a linha que eu criei aqui, onde eles podem ter uma posição x e uma posição y, e o tamanho deles será o raio do planeta vezes o planeta da escala, constante que eu fiz, que é apenas três. Então, torna tudo agradável e visível na tela. Agora, para calcular suas posições x e y, estou usando essa estrutura que mostrei um pouco mais cedo. Que são os círculos radiais. Então, aqui é onde temos um pouco de geometria. Estamos usando seno e cosseno para definir onde esses círculos aparecem com base no ângulo. Tenho um pouco de matemática aqui. Isto é basicamente apenas para animá-los enquanto desenham. Então, estou usando a velocidade da órbita do planeta para colocá-los no lugar certo. Quero que cada um deles tenha uma cor diferente baseada na massa planetária. Então aqui, eu estou configurando isso, onde eu estou mapeando sua massa de zero para 30. Trinta foi aproximadamente o máximo para a saturação de matiz e escala de brilho de zero a 100. Mas vou aplicá-lo à tonalidade. Então, enquanto eu calculo a massa deles, isso se transforma em um valor entre zero e 100, e isso define sua cor. Então, se eu rodar isso agora, você pode ver todos os diferentes planetas orbitando em diferentes velocidades. Uma coisa que se torna imediatamente aparente aqui é que, quanto mais eles estão de sua estrela que estaria no centro da tela, mais rápido eles começam a girar. Uma das coisas que adicionei a este código é um pouco de zoom. Então, isso é feito com essa contagem de quadros. Então, mesmo que eu remova isso, e me livre do zoom. Sim. Bem, agora nos livramos do zoom quando estamos presos lá fora. Mas um dos problemas que você pode ver aqui, é que é bastante robusto como a taxa de quadros não é muito alta aqui. Essa é a minha percepção. Então, eu vou obter esse pedaço de código de depuração em taxas de quadros e apenas
colá-lo para ter certeza de que minha intuição está certa. Você pode ver no topo aqui, a taxa de quadros é de apenas cerca de sete quadros por segundo. Então, não está desenhando tão bem quanto poderia. Então, o que eu fiz no próximo exemplo que eu tenho aqui, é que eu apenas mudei a maneira como os dados são trazidos para o esboço, um pouco. Eu abri os dois para que você possa ver. Neste primeiro exemplo, estou usando uma abordagem mais simples para obter todos os dados fora do CSV, o que basicamente significa, cada quadro que estou desenhando, estou recebendo todos os dados da minha tabela. Então, isso é o que está atrapalhando o esboço. Eu tenho que mover isso para a configuração. Então, em vez de coletar os dados em cada quadro, vou fazer isso uma vez quando fizermos a configuração. Então, requer um pouco mais de código. Agora, para salvar tudo, você pode ver estabelecendo os nomes das minhas variáveis, e então eu estou dizendo, por
quanto tempo eles vão ser baseados na contagem bruta da minha tabela,
e, em seguida, passando por toda a tabela e salvando-os todos em um array. Mas agora, no meu loop de sorteio, eu posso apenas obter esses dados que eu já estabeleci, e você pode ver agora quão rápido e suave o esboço é. Eu também estou usando atos de mouse como uma forma de ampliar. Mas para mim, isso parece bonito, como se estivesse funcionando muito bem. Na verdade, não é muito código. Eu acho que a parte mais complicada aqui é provavelmente apenas como eu estou calculando a posição x e y, para usar o meu mouse x para ampliar. Mas caso contrário, eu diria, quase tudo o que você vê aqui está incluído no kit de peças que eu forneci. Neste próximo exemplo, eu tenho um conjunto de dados bastante simples. Temos apenas 12 filas com quatro colunas cada. Então, é um total mensal para andar, correr e andar de bicicleta distâncias, e eu vou trazer isso
para processamento usando o método de tabela. Estou configurando minhas variáveis no topo
e, em seguida, na configuração, eu estou basicamente apenas estabelecendo o tamanho e usando o resto
deste código para salvar todos os valores em minhas variáveis. Foi a minha primeira tentativa, e eu só queria ver que os dados relativos um ao outro. Eu estava pensando, talvez faria sentido ter essas linhas emanando do centro para mostrar as distâncias relativas. O que eu não gosto sobre isso é que, basicamente, uma linha só pode ter metade do tamanho da tela. Então, não me dá muitos links com eles. Só estou desenhando as linhas de caminhada no momento. Mas já senti que isso não representaria os dados de uma forma que achei que funcionasse tão bem. Então, indo para algumas coisas estruturais que estávamos olhando, eu pensei que talvez usar esses círculos concêntricos seria uma boa abordagem. Então, usar um anel para cada mês pode ser uma boa maneira de mostrar isso. Mas em vez de usar círculos, eu poderia usar algo que falamos
na seção polonesa usando algumas dessas formas diferentes. Então, usando um arco para representar o comprimento. Então, neste próximo exemplo para a atividade, deixe-me mostrar como expandi-lo para usar arcos em círculos concêntricos. Então, novamente, eu estou trazendo todos os dados aqui, e então como eu loop através, eu estou calculando o comprimento da caminhada em relação a toda a distância, que é uma nova variável que eu configurei que vai apenas segurar a soma da caminhada, e correr, e andar de bicicleta. Então, estou mapeando a distância de caminhada contra essa distância total. Então estou desenhando um arco desse comprimento. Então, eu estou fazendo isso para todos os diferentes tipos de dados e dimensionando estes novamente pelo mouse x. Eu acho que ter o mouse x lá é bom, porque ele pode me ajudar a discar em quão longe eu quero que isso seja. Eu quero que isso seja mais um círculo completo ou quão perto eu
quero que isso apareça dos rótulos? que seria um monte de trabalho para saltar para frente e para trás, e chegar a fatores de escala por ter nosso mouse x, eu posso apenas escolher onde ele parece bom, e então salvá-lo. Basicamente, são apenas três arcos que estou desenhando. Estou mapeando cada uma das distâncias, essa distância total. A única coisa complicada é que eu tenho que começar um arco onde o último parou, e eu poderia ter certeza de que isso está funcionando novamente usando outra técnica que
discutimos que estava introduzindo alguma transparência. Então, se a cor do traçado agora é ligeiramente transparente, eu posso apenas certificar-me, como você pode ver aqui, que ele está desenhando exatamente onde o último arco sai. Então, eu sei que esses dados estão funcionando corretamente. Eu acho que se eu fosse expandir isso ainda mais, eu poderia dar-lhe um tipo personalizado e, em seguida ,
trazer alguns dos códigos para salvar isso como um PDF. No próximo exemplo, vamos pegar esse mesmo conjunto
de dados de distâncias mensais percorridas, correr e andar de bicicleta, e aplicar isso a algumas curvas bézier. Então, este aqui novamente, eu tenho a tensão definida para o mouse x. Então, eu posso encontrar um lugar onde eu gosto, e eu estou trazendo os dados da mesma maneira que nós fizemos antes. Então, eu estou configurando essas matrizes e obtendo a distância total, obtendo cada uma das distâncias para caminhar, correr, e andar de bicicleta, e um nome de mês. Mas aqui, você pode ver que há muita repetição. Eu peguei aquele código bezier, que tínhamos antes e aqui linhas forma bezier. Então, é este código para desenhar cada um dos diferentes tipos de dados tem sua própria linha. Você pode ver que há muita repetição acontecendo aqui. Isso torna difícil de ler e potencialmente cria oportunidades para erros chegarem. Então, no refinamento que eu forneci, o que eu fiz é exatamente como a função que eu mostrei antes. Eu peguei todo este pedaço do loop de desenho, e transformei-o em uma função. Então agora, o que eu quero desenhar essas curvas, em vez de ter que chamar como escrever o mesmo código três vezes diferentes. Aqui, ele diz, “Cycle Line” Você pode ver que eu apenas uso esta função chamada, “Draw_Bezier”, e tudo o que ele precisa de mim fazer é enviá-lo para dados e a cor que eu quero usar, que eu configurei aqui. Eu criei uma variedade de cores diferentes. Então, a função leva nessa matriz de valores e a cor que eu enviá-lo, e este é exatamente o mesmo código. É generalizado agora como uma função. Então, sempre que eu quiser usar um bezier, eu poderia pegar isso e usá-lo mais tarde. Eu também dei a isso uma função
pressionada do mouse para que ele salve um PDF quando ele desenha, e eu rotulei todos os pontos diferentes com seus valores. Então agora, posso ver quantos quilômetros estavam envolvidos? Quando eu gosto da tensão que eu tenho em minhas curvas, eu posso pressionar o botão do mouse, e agora eu salvei o PDF, lá está ele. Posso trazê-lo para o ilustrador ou colocá-lo no InDesign, ou simplesmente imprimi-lo e fazer o que quiser com ele. Esses são alguns exemplos de como todos esses diferentes kits de peças do kit de ferramentas, se
somam em um esboço completo, e algumas das técnicas para tentar suavizar o processo de obter esses vários pedaços de código para trabalhar em conjunto e evoluir para esboços mais avançados que você pode querer projetar.
8. CONCLUSÃO: A atribuição desta classe é usar Processamento para visualizar um conjunto de dados, seja um dos que eu forneci ou algo que você encontre ou crie por conta própria. Um par de conjuntos de dados que eu forneci, que eu acho que são meio interessantes, um são todas as datas de nascimento em 2003 e quantas pessoas nasceram em cada um desses anos. Há alguns padrões interessantes aqui que você pode descobrir. Há outro menor. Isso é simplesmente as altas e baixas temperaturas para várias cidades ao redor dos Estados Unidos. Você pode decidir geocodificar estes ou simplesmente traçar os diferentes padrões na temperatura. Então, se você está se sentindo muito capaz ou aventureiro, há um CSB de seis megabytes aqui que fala sobre cada árvore de Manhattan. Eu acho que este é um conjunto de dados realmente suculento e poderia
levar a um monte de visualizações bastante interessantes. Se você está começando a se sentir confortável com tudo isso e
procurando a próxima maneira de subir de nível usando Processing, eu recomendo todas as ferramentas de ensino de Dan Shiffman. Ele tem um livro que é particularmente inspirador para mim, chamado “The Nature of Code”, que lida com muitos algoritmos naturais de maneiras de fazer resultados realmente bonitos usando Processing. Esta aula é destinada a alunos que têm um pouco de familiaridade com Processamento. Se você não estiver confortável com alguns dos conceitos básicos que discutimos inicialmente, volte e experimente a classe Building Maps with Processing and Illustrator que é uma introdução mais prática a esses conceitos básicos. Espero que você experimente isso, se familiarize com as diferentes peças deste kit de ferramentas, e também poste suas experiências e perguntas no fórum no Skillshare.
9. O que vem a seguir?:
Nicholas Felton, Information Designer
