Atividade 21 - Barco e mar em movimento.

Criar o movimento de um barco no mar e discutir os resultados no blog.

Bom, meu código foi bem simples. Peguei duas imagens da internet correspondentes ao bar e ao mar. Para que o barco tenha movimento senoidal, x representa um ângulo que incia em zero e vai incrementando em +0,05 e y representa o seno do ângulo x com a função sin(), que vai alterando o valor de acordo com o valor de x incrementado.

No caso do mar colocamos em função de y, para apenas a posição vertical dele ir alterando a dar uma impressão de movimentação de ondas. Já o barco recebe x*20 na posição x e 180+y*20 na posição y, para assim fazer o movimento completo de senóide nos dois eixos, percorrendo até o fim da tela.

Atividade 20 - Desenhar polígono regular de acordo com quantidade de lados.

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.

Com o uso de coordenadas polares a elaboração desse código fica mais fácil. Primeiramente temos duas funções, uma para X e outra para Y que  recebe um ângulo e o raio, e faz a conversão para posições X e Y correspondentes, de acordo com seno e cosseno do ângulo multiplicado pelo raio.

De acordo com o número de lados que é controlado por "n" no próprio código, descobrimos os ângulos igualmente divididos pela fórmula ang=2*PI/n;.

Com uma estrutura de repetição podemos controlar usando o ponto inicial descoberto e descobrir o próximo incrementando o ângulo. Para desenhar a linha, a função line() exige que você saiba as posições equivalentes das duas pontas, com isso guardamos outra variável com mesmos dados só que incrementados com 1, para ter esses dados necessários. E então só jogamos dentro da função line, só alterar o número de n que um novo polígono equivalente é gerado. 

Fiz uma condição de que se o número de n for menor ou igual a 0, um círculo é desenhado, se não, ai vai para o for que desenha de acordo com quantidade de lados.


int n=6;
int r=200;

void setup ()
{
  size(600,600);
  
float ang=2*PI/n;

if(n<=2)
ellipse(300,300,2*r,2*r);


if(n>2) {
for(int i=0;i<n;i++) {

float a=i*ang;
float x=converterX(a,r)+300;
float y=converterY(a,r)+300;

float a2=(i+1)*ang;
float x2=converterX(a2,r)+300;
float y2=converterY(a2,r)+300;

//ellipse(x,y,10,10);
line(x,y,x2,y2);
  }
}

}

float converterX (float ang, float R)
{
   return R*cos(ang);
  
}

float converterY (float ang, float R)
{
 return R*sin(ang);
  
}

Exemplo com n=6.

Atividade 18 - Analisando impacto de média e desvio padrão de acordo com brilho e contraste.

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?

Com as imagens normais os valores foram: 

Einstein - Média  28.610287 Média V =3970.7988 Desvio padrão= 63.014275

Cinza - Média  29.0 Média V= 0.0 Desvio padrão= 0.0

Aumentando o brilho da imagem os valores ficaram: 

Einstein - Média=84.901405 Desvio padrão= 47.380764

Cinza - Média= 84.64234  Desvio padrão= 0.3606327

Aumentei o brilho igualmente nas duas imagens em 31%, com isso a média total de cada uma das imagens aumentou bastante pois os pixels que tendiam ao preto ficaram mais claro com o brilho e ficando com mais tonalidades cinza. Já o desvio padrão no caso do Einstein diminuiu consideravelmente pois como a maioria está tendendo ainda mais ao tom comparado que é o cinza, a variação de pixels fora desse tom diminui. Na imagem cinza por ser totalmente na mesma tonalidade o desvio padrão permanece tendendo a zero, pois não há variação de tons pela imagem!

Aumentando o contraste ficaram:

Einstein - Média= 28.413017 Desvio padrão= 67.919174

Cinza - Média= 4.992715  Desvio padrão= 0.11710537

No contraste também usei a quantidade de 31% igualmente nas duas imagens. Na do Einstein a Média ficou praticamente igual da original pois o contraste não muda a tonalidade, apenas destaca fazendo o que for branco ficar ainda mais branco e o que for preto ficar ainda mais preto. Já o desvio padrão aumentou um pouco devido as extremidades ficarem mais intensas causa a variação ainda maior. Na imagem cinza, como o contraste intensificou o tom que é uniforme a ir mais para o preto a média caiu muito, já o desvio padrão mais uma vez permanece tendenciando a zero pelo fato de não haver variação de tonalidades na imagem.

Atividade 17 - Discutir design da informação baseado em um jogo eletrônico.

Apresentar e discutir um caso de design da informação baseado no uso de um jogo eletrônico.

O design da informação implica a responsabilidade de transmissão de conteúdos de modo preciso e neutro. Nos jogos com objetivo de simulação de atividades da vida real, tem o objetivo de representar a realidade o mais exata possível, todos os dias os jogos tentam se melhorar para deixar as experiências mais realistas. Assim, com suas informações e a maneira que são postas dão um conteúdo de certo treinamento ao usuário.

Pensando nesse estilo de simulação, que acredito ser um modo que as informações precisam ser bem coletadas e adaptadas para ser colocadas na melhor maneira, escolhi o FIFA17 como exemplo.

A pessoa pode nunca ter jogado FIFA mas vai saber onde está tudo pois a interface é muito organizada. E quando você é ruim jogando, antes do jogo começar ou seja enquanto o game carrega você fica fazendo mini games como cobrar falta, cobrar pênalti, defender a bola, driblar, etc. 

Serve tanto para que a pessoa não fique olhando para uma tela de loading, quanto para que você possa usar aquilo do mini game no jogo em si a seu favor ou seja você melhorou enquanto estava só esperando começar o jogo em si.

 

As telas tem um sistema meio que de "memória", não é estática, ou seja, se está jogando hoje modo carreira a primeira coisa bem grande que vai aparecer no menu para jogar é se quer continuar o modo carreira. Se jogar online hoje, amanhã quando retornar ao jogo, ele vai perguntar se não quer jogar online de novo.

Se você escolher ser técnico, comandará o time, tem que ficar atento nas finanças, na tabela de pontos, se o time está cansado, se os seus jogadores querem jogar o próximo jogo ou se estão indispostos... Precisa procurar jogadores bons, fechar contrato com eles e tentar pechinchar para entrar em um acordo. Tentar cumprir as missões que o presidente do clube te propõe, fazer a estratégia melhor pra vencer.

Agora sendo jogador, você escolhe o time que quer começar. Não tem responsabilidade nenhuma, a não ser fazer a escolha certa do time que você quer ir ou o time que quer começar. Pois você começa sua carreira como jogador muito novo e muito ruim, se for escolher logo ir pra um Barcelona, Chelsea, Real Madri, etc, não terá oportunidades boas porque terão inúmeros jogadores melhores que você para jogar no seu lugar. Se você fosse o técnico, se colocaria? Preferia colocar você ou por um Neymar para jogar? 

Então tem que fazer escolhas, escolher começar em um time pequeno e ir melhorando suas habilidades com o tempo, a medida que você vai ficando melhor, os times maiores vão olhando pra você. E com mais experiência você pode chegar a ficar do mesmo nível de jogadores de ponta e até mesmo pegar o lugar deles dependendo do seu desempenho.

Os locais de cada informação são bem posicionados e intuitivos além de instigar a aprendizagem de como agir nas situações e de aperfeiçoar aos comandos e decisões, assim deixando o jogador mergulhado na experiência e absorvendo tudo sobre o ramo.

Atividade 16 - Resumo crítico sobre palestra "The beauty of data visualization".

Resumir criticamente a palestra “The Beauty of Data Visualization”, David McCandless em http://www.ted.com

Para David Mccandless, no mundo de hoje parece que estamos sofrendo de um problema chamado "excesso de informação ou abundância de dados", na qual ele apresenta soluções através da imagem e formas de visualização, um exemplo é o "Diagrama de Bilhões de dólares" na qual ele divide a informação de acordo com seu valor, importância e motivação, alterando no diagrama apenas tamanhos e cores, deixando de forma mais visível e organizada. Exemplo: quanto maior o quadrilátero no diagrama maior o dinheiro envolvido em bilhões, se o quadrilátero estiver na cor verde, representa lucros, e se tiver em vermelho representa gastos.

David Mccandless fala da importância da preservação de dados, pois eles serão a base para a comparação do hoje no futuro, como num caso de um gráfico representando o censo populacional de hoje, ou da taxa de desemprego, quando mais fáceis, preservado e visíveis forem os gráficos, melhor serão interpretados e usados no futuro. Ele ressalta também da importância dos nossos olhos pois através dele é que existe o começo e o fim da informação, pois podemos dizer que ao mexermos num mouse em seu computador, primeiro você olhou onde o mouse estava, seu cérebro e sua mão agiram no movimento, o computador processou a ação e voltou ao seu olho ver que você mudou o mouse para a direção que você queria. Sabendo disso podemos perceber que os nossos olhos tem uma "linguagem".

Ele apresenta também outro diagrama/gráfico, chamado a "corrida dos balões" , onde monstra os nomes e das substancias e vitaminas que mais precisamos diariamente em nosso corpo, o balão que estivesse mais ao topo seria a substancia que precisamos mais vezes, as que fossem maiores, seria as que precisamos em maiores quantidades. 

Isso tudo se conclui, que é como se pudéssemos pegar enormes quantidades de informações e compactá-las de forma a ficarem mais fácil de ser aceita visualmente e mentalmente, para que possamos absorver melhor e sem dificuldades grandes quantidades de informações.   

Atividade 15 - Teoria dos conjuntos em multimídia.

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 dos exemplos onde a teoria de conjuntos pode ser exemplificada em multimídia é o vídeo. Podemos ver como conjuntos, a imagem, o movimento que juntos foram a animação e com acréscimo do som se torna o vídeo. Coisas que existem separadamente e juntas formam algo novo!

Atividade 14 - História do Vídeo Toaster e implementar transição.

Apresentar a história do Video Toaster e discutir a implementação de uma das transições apresentadas em http://www.youtube.com/watch?v=6n7GoNmgHGI


"O NewTek Video Toaster é uma combinação de hardware e software para edição e produção de vídeo de definição padrão NTSC (O Comitê Nacional do Sistema de Televisão foi criado em 1940 pela Comissão Federal de Comunicações dos Estados Unidos (FCC – sigla em inglês) para resolver os conflitos que foram feitos entre as empresas sobre a introdução de um sistema de televisão analógica nacional nos Estados Unidos). Inicialmente trabalhou com o computador Amiga 2000 e fornece uma série de conectores BNC na extremidade traseira expostos que fornecem conectividade para fontes de vídeo analógico comum como VHS. As ferramentas de software relacionadas com suporte de comutação de vídeo, chroma keying, geração de caracteres, animação e manipulação de imagem."

Escolhi minha transição e fiz assim...
Coloquei uma imagem ao fundo, e outra sobreposta (porém dividida em duas partes iguais, como sub imagens). Começam na posição ideal para formarem uma imagem só e com o auxílio de uma variável que será incrementada e decrementada de acordo com a necessidade de cada lado, para irem se afastando e dando a sensação de abertura, assim revelando a outra imagem que está ao fundo!

PImage imagD;
PImage imgsel1;
PImage imgsel2;
int x1 = 0;
int x2 = 300;

void setup() {
     
     size(600, 600);
     imagD = loadImage("dulcemaria.jpg");
     
     imgsel1 = loadImage("sel1.JPG");
     imgsel2 = loadImage("sel2.JPG");
     
}

void draw() {
    transicao1();
}

void transicao1() {
     image(imagD, 0, 0);
     image(imgsel1, x1, 0);
     image(imgsel2, x2, 0);

     if (x1 >=-300) {
          x1 -= 2;
     }

     if (x2>=300) {
          x2 += 2;
     }
}

O resultado foi: