Blog destinado ao curso Sistemas e Mídias Digitais - SMD

  • DOUGLAS SILVA ART

    Curta a minha página no Facebook

  • THE CHIBIMAKERS

    Curta também a página do grupo The chibimakers, no qual postamos sempre desenhos no estilo Chibi.

terça-feira, 12 de dezembro de 2017

Trabalho Final MAMI - Pt 2

Nessa segunda e última parte do Trabalho Final da cadeira de MAMI, eu apenas coloquei uma interface gráfica com a ajuda da biblioteca ControlP5 (recomendo baixá-la se for usar o projeto), e desenvolvi um vídeo explicando o processo de concepção do mesmo. 




DESCRIÇÃO

Share:

Atividade 21 - MAMI

A proposta da atividade atual consiste em resumir criticamente a palestra "The Beauty of Data Visualization” de David McCandless.




Em sua palestra, David McCandless transforma conjuntos de dados complexos, como gastos militares mundiais, medos da humanidade e atualizações de status do Facebook em diagramas bonitos e simples que provocam a compreensão de padrões e conexões que não haviam sido vistos ou percebidos. O bom design, ele sugere, é a melhor maneira de visualizar e entender o excesso de informação, e pode mudar a maneira como vemos o mundo.

Segundo ele, quando lidamos com uma quantidade gigantesca de dados, às vezes não se consegue ver o que realmente se quer encontrar, mas quando se organiza essas informações de uma maneira visual, e de um jeito que elas consigam interagir entre si formando um novo padrão, é como anda por uma floresta e se deparar com uma clareira, tornando assim a informação mais fácil de compreender.

A maior parte da visão humana recebe as informações inconscientemente. Ela é extremamente sensível a variações de cores, formas e padrões. Enquanto que o cérebro trata dos números, palavras e conceitos. Ele propõe que se juntássemos as duas formas de perceber as coisas, isso mudará nossa forma de pensar sobre elas. Fará com que passemos a entendê-las de uma forma melhor. 

Isso é exatamente a forma que um profissional do curso de SMD deveria pensar, pois é com isso que ele vai ter que lidar nos seus trabalhos. Ele terá que aplicar design para resolver problemas da área da informação mas de forma visual, provendo assim soluções elegantes e de melhor assimilação. E quando digo problemas da informação, eu incluo desde a criação de gráficos gerados à partir de dados estatísticos de quantidades em que uma moeda vai dar cara ou coroa, até fazer um adaptive logo usando um algoritmo.

 DESCRIÇÃO
Share:

Atividade 20 - MAMI

A tarefa era criar versões no Photoshop da imagem de einstein.jpg e cinza.jpg com variações de brilho e contraste, e dizer qual foi o impacto que ocorreu na média e desvio padrão delas.

Inicialmente as imagens “einstein.jpg” e “cinza.jpg” possuem os valores de média e desvio padrão respectivamente correspondentes a: 28 e 63, e 29 e 0.

Original

Modificada

Alterando os valores de brilho e contraste da imagem do “einstein” para 50 e 50 respectivamente, pude notar que a média e o desvio mudaram respectivamente para: 35 e 77. Houve pouca variação nos dois valores. Isso ocorreu pois, a parte cinza que tendia para o preto ficou mais escura, e o cinza que tendia para o branco ficou mais claro, aumentando a distância entre os valores.

Original
Modificada

Já na imagem “cinza” , mudei o brilho e o contrate para 150 e 100 respectivamente, tendo uma mudança apenas na média, que agora é 51. Esse aumento ocorre porque as cores da imagem, estão ficando mais claras, logo está se aproximando do 255, que é o valor máximo. O desvio padrão continuou o mesmo pois não há variação de cores na imagem.


DESCRIÇÃO

Share:

sábado, 9 de dezembro de 2017

Atividade 19 - MAMI

A proposta da atividade atual consiste em criar um olho (círculo preto pequeno no interior de círculo branco grande) que se encontra sempre voltado para o cursor do mouse 

Para fazer com que o circulo preto pequeno se mova em direção do mouse, eu criei uma variável chamada ang, que recebe o valor do cálculo da tangente dos pontos X e Y do mouse subtraídos da largura/2 e altura/2 da tela. Sendo ang a representação de um círculo cuja angulação varia de -PI a +PI, eu passo esse valor como parâmetro para a função rotate ( ), fazendo com que o círculo preto gire.



DESCRIÇÃO

Share:

Atividade 18 - MAMI

A proposta da atividade atual consiste em criar uma aplicação para simular um cronômetro simples, apenas com o ponteiro dos segundos, empregando a função milis() do Processing.

Para criar o ponteiro do meu cronômetro, eu usei a função line(), no qual ela recebe os x e y iniciais da linha sendo a metade da minha tela (300, 300), e os x e y finais são os valores da primeira e segunda posição do vetor que a minha função polarToCart retorna. Essa função funciona recebendo um raio (r = 130) e um ângulo (ang = 0), e retornando um vetor com as coordenadas polares convertidas em coordenadas cartesianas. Para deixá-lo colorido eu usei o modo de cor HSB e função stroke( ) eu passo um valor referente ao vermelho em HSB. Para deixar-lo com a espessura mais grossa, eu usei a função strokeWeight( ) com o valor 10.

Para fazer a linha girar como o ponteiro dos segundos, a variável do ângulo (ang) é igual 6.14/12000 * millis(), sendo assim a divisão de uma volta do circulo por 12 segundos. A função millis() é o tempo, em milisegundos, que o programa passa a ter desde que inicia.

Para o resto do cronômetro, eu usei uma imagem mesmo.


DESCRIÇÃO


Share:

Atividade 17 - MAMI

A proposta da atividade atual consiste em criar o movimento de um barco no mar e discutir os resultados no blog. Também era pra utilizar a função rotate para simular o movimento. 

Primeiro, pra criar o movimento das ondas, eu criei um for, que varia de 0 à 500. Se o i do for chegar a 250, a variável inclinação passa a ser igual a variável ang. Depois eu criei outro for, que serviria para fazer várias ondas, mas devido o processamento, que deixava o movimento extremamente lento, eu optei por desenhar apenas 4 linhas, intercalando as cores delas. Nesse for, as linhas são desenhadas usando a variação do seno do ângulo representado pela equação sin(ang)*20. Essa equação faz com que haja variação da posição y das linhas, dando o efeito de movimento da onda. Para que isso ocorra, fora do laço a variável ang é incrementada com 0.05, modificando assim o valor do resultado da equação e em seguida a variável variação também é incrementada em 0.1. Quando variação for maior que uma volta ele zera.

Para fazer o movimento do barco, eu coloquei ele na posição 250. Para saber seu ângulo de inclinação nessa posição, eu criei a variável angInclinacao, que armazena o valor de ang. Usando a função translate(), eu posiciono o barco na posição x =  250, e y = 275 - sin(angInclinacao)*20, e translate(250,275-(sin(angInclinacao)*20)). Agora para que o barco faça o movimento igual ao da onda, eu uso a função rotate((sin(angInclinacao)*0.7)). Isso faz com que o barco fique num ângulo reto quando ele está nos picos de variações.


DESCRIÇÃO




Share:

terça-feira, 5 de dezembro de 2017

Atividade 16 - MAMI

A proposta da atividade atual consiste em, empregando a função rotate(), criar uma aplicação que desenha um polígono regular centralizado na tela com a quantidade de lados informada no próprio código. 

Primeiramente, para criar o polígono eu criei a função slice(), que retorna um float com o ângulo que as fatias do meu polígono vai ter. Depois criei uma variável chamada ang, que vai chamar a função slice() e passar um número de quantidade de fatias, que no caso é a variável num, que está inicialmente definida como 4.

Após isso, eu criei um for no draw, que desenha o polígono através da função triangle( ), onde eu passo os valores do pontos do triângulo (0, 0, cos(ang)*250, sin(ang)*250, cos(ang*2)*250, sin(ang*2)*250). No caso, os valores cos(ang)*250, sin(ang)*250 representam as coordenadas x e y do meu segundo ponto, e o cos(ang*2)*250, sin(ang*2)*250 as coordenadas do meu terceiro ponto. Para que esse for desenhe todos os triângulos do meu polígono centralizado e tomando com base os pontos (0,0) como centro do mesmo, eu usei as funções rotate( ) e translate( ). A primeira função para girar os triângulos em torno do eixo do ponto (0,0) e a segunda para deslocar a posição inicial da tela (0,0) para o centro da tela (300, 300).

Resultado 01

Resultado 02
Resultado 03
Usar a função rotate( ) para fazer polígonos girarem é menos trabalhoso do que por exemplo fazer cada ponto do polígono variar seu valor para que tenha o mesmo efeito visual de uma rotação, como visto em uma das aulas de MAMI. Isso poupa bastante tempo de implementação, e sem contar que deixa o código melhor também.


DESCRIÇÃO

Share:

Trabalho Final MAMI - Pt 2

Nessa segunda e última parte do Trabalho Final da cadeira de MAMI, eu apenas coloquei uma interface gráfica com a ajuda da biblioteca Cont...