Postagens

Mostrando postagens de julho, 2016

Aula 21 - Einstein e o desvio padrão

Imagem
Tarefa Crie versões no Photoshop da imagem de Einstein.jpg e cinza.jpg com variações de brilho e contraste. Qual impacto ocorreu na média e desvio padrão? Para as duas imagens alterei os brilho e contraste da seguinte maneira: 1- imagem original 2- brilho e contraste no máximo 3- brilho e contraste no minimo 4- brilho no máximo, contraste no minimo 5- brilho no minimo e contraste no máximo. Cinza Como a Tela de Cinza consta com uma unica cor a váriância e o desvio padrão são iguais a zero sempre. O que altera é a média. como todos os valores são iguais, podemos dizer que a média é exatamente a cor do cinza que está na foto. Com relação ao contraste. reparei que o brilho tem característica de deixar a imagem mais clara, enquanto o contraste acentua os tons de preto. Assim nas imagens em que o brilho e o contraste está no máximo temos uma media de 51 dos tons, mas quando o contraste está no minimo e o brilho no máximo conseguimos subir essa média para 8...

Aula 19 - Transição de vídeo Toaster

Imagem
Tarefa Discutir a implementação de uma das transições apresentadas em http://www.youtube.com/watch?v=6n7GoNmgHGI (NewTek Video Toaster 4000 Demo) Esse video mostra o que foi o auge dos anos 90 e começo dos efeitos de transição, muitos deles provavelmente baseados no trabalho do George Lucas. Bem discutir é fácil dificil é fazer. Nos softwares de edição de video fazer tudo isso é moleza, o díficil é criar na base da programação. Tentei refazer o exemplo da girafa, mas por algum motivo não consegui fazer com que a transição funcionasse de maneira adequada. E ai que decidi fazer um código relativamente trabalhoso. A transição das ovelhinhas. Essa aqui Oh: Não vou postar os prints do código pois ele é extremamente repetitivo, o que posso dizer é que criei uma variável com boleano e defini a posição de cada ovelha que ia caindo e uma variavel para quase todas as imagens. No total foram umas 16 variáveis marcando a hora que cada ovelha ia cair. Quando todas caiam a variavel bol...

Aula 18 - Filtros e Moldura

Imagem
Tarefa Utilizando alguma biblioteca de GUI, controlar cada uma das transformações através de slide bars - explique o processo. Tive muitas dificuldades para realizar essa tarefa. O código ficou com dois erros que não consegui identificar mas vamos discutir a criação assim mesmo. O fato de trabalhar com uma biblioteca foi um desafio e tanto, pois não tive instrução sobre isso em sala de aula. Encontrei algumas bibliotecas Gui, mas a que achei mais facil foi a ControlP5. Mesmo sem muita instrução foi bastante facil criar os sliders. Uma coisa q achei muito curiosa é que o nome que eu dava como legenda para o slider ele sabia automaticamente que era a minha variável. Descobri isso meio que ao acaso. Para começar o código iniciei todas as figuras que eu queria que aparecessem na tela e o tamanho que eu já tinha predefinido. Criei as variáveis e defini os controladores. No draw posicionei as imagens e defini o esquema da moldura. Achei interessante a moldura ser algo binário, ac...

Aula 22 - Gráfico de vendas

Imagem
Tarefa Incluir os principais elementos presentes em um gráfico comercial (rótulos de dados e títulos, rótulos, linhas de grade e escalas de eixos) e discutir a importância dos mesmos. Curiosamente apesar do resultado ser bem complexo o código não usa muitas variáveis. Criei uma que faz a contagem dos meses, uma que gera randomicamente o numero de vendas e uma que calcula a soma desses valores. Como estava criando um código sobre vendas decidi apresentar também fora do gráfico em texto o menor numero atingido e o máximo, como também calcular  a media de todos esses valores. No setup declarei o tamanho da tela e as três funções que criei para este projeto. Na função de vendas criei um contador que gerava os valores vendidos de acordo com o numero de meses do ano. Dentro desse contador calculei a soma de todas as vendas e defini um padrão: considerando que as vendas variam de 0 até 15 nesse sistema, as vendas que fossem acima de 8 eram tingidas com a cor verde e as ...

Aula 20 - Teoria dos conjuntos

Imagem
Tarefa Desconsiderando os exercícios já apresentados na disciplina, exemplificar e discutir como a teoria dos conjuntos pode ser aplicada no desenvolvimento de aplicações multimídia. Um software que usa dos conceitos da teoria dos conjuntos é o Ilustrator, uma das funções que permite  mais facilmente de se perceber isso é o Pathfinder.  Com essa ferramenta podemos separar imagens de modos distintos. Explicarei como funcionam os modos de forma: 1- Com esse modo podemos unir duas formas, fazendo com que o seu contorno se torne unico, ou seja a união de todos os elementos de dois conjuntos. 2- Se uma forma cruza com a outra, a parte que sobrepor a outra é removida, partindo para os conjuntos seria como a exclusão de termos repetidos que o outro conjunto e a remoção do outro. 3- Nesse caso quando as formas se cruzam  apenas as partes que ficaram sobrepostas são consideradas. Em termos de conjuntos seria a de um novo conjunto formado apenas dos elementos ...

Aula 24 - Par Ou impar?

Imagem
Tarefa Demonstrar graficamente que é melhor apostar no sorteio de números pares num jogo de par ou ímpar. Vamos supor que o par ou impar é jogado  apenas com uma mão por cada pessoa, o máximo de resultados possíveis são onze sendo pares{0,2,4,6,8,10} e impares {1,3,5,7,9} ou seja existe uma de cerca de 55% de quem jogar com par ganhe. Para demonstrar graficamente o jogo do par ou impar criei um sistema que sorteia números de 0 até 5 e depois os soma. É realizada uma verificação, se os números divididos por 2 são exatos são pares, senão são impares e essa contagem é contabilizada dentro dos contadores 'par' e 'impar'. Esta parte que tem escrito como parte do gráfico de barras escreve números de baixo para cima em uma tabela que será configurada em outra parte do código. Na tela apresento qual a porcentagem obtida com as jogadas aleatórias. Além do número total de jogadas e os resultados de quantas vezes saíram par ou impar. Ainda no setup eu cha...

Aula 17 - RGB OU HSB?

Imagem
Tarefa Discutir e demonstrar como o brilho e a saturação de uma imagem podem ser facilmente ajustados empregando-se o padrão de cores HSB, em vez do RGB. Façamos algumas considerações: o RGB (red,green,blue) é ajustado de acordo com a quantidade de vermelho, verde e azul de uma imagem. essas quantias variam de 0 ate 255. Para mudar o brilho ou saturação de uma imagem com RGB, teria que a todo momento regular os três valores até encontrar uma zona com as cores desejadas. Quanto mais próximo de 0 mais escura é uma imagem, quanto mais próxima de 255 mais pura é uma cor. Todas misturadas em 255 resultam em branco e em 0 se tornam negras. o HSB ( hue,saturation,brightness) trabalha de um modo diferente com as cores de uma imagem, agora não é mais preciso escolher uma mistura entre vermelho verde e azul para se encontrar um tom, o 'hue' que significa matiz em português, separa cores entre 0 e 499, assim para definir a cor a ser utilizada basta escolher um número. Para ajustá-...

Aula 15 - Olho

Imagem
Tarefa 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 criar esse código foi bom relembrar como foi criado o código dos botões (Aula 10) . No código de botões definimos os limites de um circulo usando da função que encontrava a hipotenusa. Assim para definir o movimento do olho usei uma variável que encontrava o cateto oposto, o cateto adjacente, H que recebe a hipotenusa, tg para tangente e arcTg para o arco tangente. No draw() coloquei os elementos que não iam se mover como o fundo da tela e a elipse que forma o espaço do olho. A elipse foi fixada no centro da tela com um raio de 100pixels. Em seguida criei uma função chamada Hipotenusa, como o próprio nome já diz, com ela encontrei os limites da minha elipse. Quer dizer defini os limites da elipse, pois a função calcula a hipotenusa baseada na posição do mouse em relação ao centro da tela, assim a iris do olho poderia rodar toda...

Aula 14 - cronômetro

Imagem
Tarefa Com a função, fazer um algoritmo usando a função millis() do processing para simular um cronômetro, apenas com o ponteiro dos segundos. Para criar um cronometro criei tres variavéis, uma que iria receber os milissegundos, outra que recebia os segundos e outra que contava os minutos. 'x', 'y' e 'ang' são responsáveis pelo movimento do ponteiro. Criei uma variável chamada marcaMs, esta recebe a função millis(), é muito importante que essa declaração seja feita dentro do Draw(), para que assim possam ser contabilizados os milissegundos. Dentro do draw defini uma cor para o fundo da tela, e criei as formas do cronometro: como base um circulo usando a função ellipse e um botão na parte de cima feito de um quadrado (rect) e de uma elipse. A largura da linha foi aumentada para ficar mais interessante visualmente. Para encontrar o angulo preciso do movimento do ponteiro fiz um cálculo com 'regra de 3' . Considerando que um circulo tem  36...

Aula 13 - Barco no mar

Imagem
Tarefa Criar o movimento de um barco no mar e discutir os resultados no blog. Para essa atividade criei dois códigos, no primeiro o barco apenas flutuava e no segundo o barco navegava no mar. O Draw e o Setup é o mesmo para os dois. Para não ter que desenhar todos os elementos da tela que seriam o mar e o barco, inseri duas imagens no código e Criei uma tela de 600x600. A variável 'a' funciona como um contador que faz com que o barco entre em movimento. O Draw : o contador é definido como aumentando de 5 em 5. Uma cor azulada foi definida para o background e chamada a função que criar o movimento do barco. Definindo a função principal: Barco Flutuando Foram criadas duas funções xBarco e yBarco. O xBarco recebe o valor do mesmo mais um valor menor, isso vai definir a velocidade do movimento do barco. O yBarco recebe o seno de xBarco, como o seno é cíclico quando xBarco atinge um certo valor o movimento do barco é refeito, gera...

Aula 12 - Polígonos

Imagem
Tarefa Criar uma aplicação que desenha um polígono regular centralizado na tela com a quantidade de lados informada no próprio código. Discutir a solução adotada  em seu blog. O código é bastante simples. Primeiro é definido um tamanho de tela no setup, Nesse caso foi uma tela de 400x400. Depois criei uma função que vai receber os parâmetros para criar os polígonos que são o raio e o numero de lados. Como para criar um polígono é preciso ter pelo menos três lados, criei uma condição que  se fossem inseridos valores menores 3 seria criada uma elipse no lugar. Para criar os polígonos foi preciso descobrir o angulo entre as arestas, o cálculo toma por base 2*PI, que seriam os 360 graus de um circulo, e divide pelo numero de lados que este polígono vai ter. Geralmente durante as aulas para gerar formas especificas utilizávamos funções que chamavam diretamente uma elipse(ellipse), um triangulo(triangle) ou um quadrado(rect), mas nesse caso o código deveria ser pratico ...

Gerador Automático de Arte - PARTE 2

Imagem
Para ver a parte 1 do trabalho com o código e todas as especificações clique ' aqui ' A seguir o vídeo explicando o processo de criação do Gerador Automático de Arte, nesse vídeo tive que explicar os modelos natural, computacional e matemático por tras da criação do código. O vídeo:

Aula 23 - Avaliação da palestra " A belexa da visualização de dados".

Ted Talks - A beleza da visualização de dados. A palestra foi ministrada em 2010 por  David McCandless  considerado como jornalista de dados. Nesta palestra foi abordada a importância dos dados vinculados nas redes na era digital e o fato que as pessoas não tem noção da dimensão de certos valores relacionados aos mais diferentes temas apenas mostrando-as amostragens numéricas ou mesmo de dados textuais. Assim para tornar valida a teoria são demonstrados alguns exemplos como a questão bélica no mundo e o fato de que dependendo do ponto de vista e das indagações feitas as informações podem mudar, dessa maneira ele prova a pluralidade de significados que as noticias podem ganhar quando trabalhadas de um modo ou de outro. Outros dados apresentados foram como aparecem noticias sobre jogos violentos quase sempre nos mesmos meses todos os anos e o estudo de porque esse assunto ser sempre ressuscitado na mesma época.   Encontrar esses padrões visuais torna mais...