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:

Atividade 13 - Efeito onde HSB é mais eficiente

Enunciado: exemplificar e discutir um caso de filtro onde o emprego do padrão HSB pode ser mais eficiente que o RGB.

O exemplo que escolhi foi um estilo sépia! Basta apenas modificarmos a componete hue e colocando valor baixo para que não fique muito saturada. O brilho permanece igual como se pode ver no código acima! E o resultado foi esse:

No caso do RGB deveríamos modificar as três variáveis de maneira muito bem calculada para que suas combinações dê o efeito exato! Precisa-se de muito mais tempo para conseguir chegar no mesmo resultado e de várias tentativas até enfim conseguir. Então realmente depende do seu objetivo final para escolher qual padrão de cores utilizar. Nesse meu exemplo, facilmente cheguei ao resultado com HSB.

TRABALHO FINAL (Parte 1) - Gerador automático de "arte".

Primeiro passo foi escolher o artista, o meu foi o Peter Halley:

Peter acreditava na desestruturação das linhas e da composição e de uma geração na qual ele colocava interrogações nos elementos formais do Abstracionismo, porque ele dizia, até mesmo os trabalhos abstratos de Mondrian não só carecem de uma reflexão na direção de modelos idealistas mas também poderiam ser um modo mais simbólico de se utilizar estes elementos e, na verdade, quando vocês leem textos de Mondrian, nota-se que há mais por trás dos aspectos formais do trabalho, e isto é o que Peter Halley reforça quando ele faz este tipo de circuitos.Então estes são os tipos de circuitos que continuam, que cruzam outras formas. Para Peter Halley estes circuitos refletem elementos do fazer combinações, trajetórias, que nós temos também nas cidades, no tráfego, nas linhas dos fios de eletricidade, então, isto reflete mais elementos que estão além do aspecto formal também. (Fonte: Wikipedia)


Então depois escolhi uma série de 3 obras bem semelhantes para compará-las:

(Não consegui identificar se há um nome para essa série, mas existe várias artes desse artista nesse tipo de circuito)

Características geralmente presentes:
1- Quadrados e retângulos.
2- Geralmente um quadrado maior no centro.
3- Retângulos que dão aspectos de "fios", "caminhos"
4- Em algumas situações a tela é como se fosse a repetição de duas, então contém dois quadrados "centrais" nas subtelas divididas. Nesse caso a quantidade de "caminhos" são menores.
5- As cores não tem um exato padrão, porém armazenei as cores de cada quadro, como três padrões e as c cores de cada quadro só aparecerão juntas.
6- Em dois dos casos os caminhos começam no centro do quadrado principal.

Deixei tudo em torno das variáveis width e height,.. E dentro de cada função de desenho, tem outras variáveis como ladoqdo, espacolados, ladoqdofundoind (lado de cada quadrado que é subdividido em duas telas), ladoqdocentro (lado do quadrado central de cada subdivisão.

Os estados UM, DOIS e TRES, escolhem aleatoriamente qual das três maneiras de organização das obras será mostrado. A variável cor ativa cada grupo de cores, todas as funções tem IF dentro que determinado grupo de retângulos é tal cor dependendo do número randômico cor. Também são três possibilidades, três grupos de cores a serem usadas juntas!

Coloquei frameRate(1) para poder visualizar devagar as mudanças de quadros a cada nova forma de acordo com números randômicos. Deixei o código com os cálculos matemáticos de cada posição para ficar exposto no próprio código meus cálculos foi bom principalmente para me guiar a entender o que significa cada unidade vejo o cálculo q estou fazendo que variável estou usando e já consigo me situar de qual retângulo se trata mais facilmente!! Ficou bem grande admito porém o objetivo de apenas mudando largura e altura, e tamanho de lados dos quadrados tudo possa automaticamente mudar. Tive bastante dificuldade parar achar a melhor solução pois tem um padrão de estilo de quadro, mas não exatamente as distâncias etc, Peter Halley gostava de não ter um padrão por isso escolhi fazer a base das três possibilidades com cores possíveis juntas e gerar outros bem parecidos de acordo!!

A posição dos quadrados centrais sempre são a mesma, então todos os cálculos surgem a partir da largura e altura da tela, juntamente com lado do quadrado. Daí vem todos os cálculos de tamanho e distâncias de cada "fio" dos circuitos! Espero que o cálculo embutido no código tenha ficado claro os cálculos matemáticos que não foram poucos, rs.

*(os comentários que tem de cores, são de acordo com as cores originais de um determinado modelo, para ter uma certeza maior de que retângulo cada parte se trata)
**(como não há um padrão absoluto de cores, poderia retirar o grupo de cores colocar as três variáveis do rgb como randômicas e geraria ainda mais modelos diferentes com cores a mais, porém resolvi fazer dessa maneira para meio que estabelecer um padrão de três possibilidades)


final int UM=0;
final int DOIS=1;
final int TRES=2;

int modelo=UM;

void setup ()
{
size(600,600);
frameRate(1);
noStroke();

}

void draw ()
{ 
int m=(int)random(3);
int cor=(int)random(3);

  if (m==0)
modelo=UM;

else if (m==1)
modelo=DOIS;

else if (m==2)
modelo=TRES;

  mostraQuadro(modelo,cor);
}

void mostraQuadro (int mod, int cor)
{
switch(mod) {

 case UM:
 desenha(cor);
 break;
 case DOIS:
 desenha2(cor);
 break;
 case TRES:
 desenha3(cor);
 break;

}

}


void desenha (int cor)
{
  int ladoqdo=400;
  int espacolados=(width-ladoqdo)/2;
  
if(cor==0){
fill(65,105,225);}
if(cor==1){
fill(255,140,0);}
if(cor==2){
fill(255,215,0);}
rect(0,80+ladoqdo,width,height-ladoqdo-80); //retangulo azul inferior

if(cor==0){
fill(144,220,144);}
if(cor==1){
fill(160,180,50);}
if(cor==2){
fill(80);}
rect(0,0,width,80+ladoqdo); //fundo verde medio

if(cor==0){
fill(255,0,0);}
if(cor==1){
fill(105,105,105);}
if(cor==2){
fill(0);}
rect(espacolados,80,ladoqdo,ladoqdo); //quadrado vermelho
rect((width/2)+70,80+ladoqdo,20,20); //qd pequno verm
rect((width/2)+70,80+ladoqdo+20,width-(width/2)+70,14); // retang verm

if(cor==0){
fill(128,0,0);}
if(cor==1){
fill(180,200,50);}
if(cor==2){
fill(80);}
rect((width/2)-170,80+ladoqdo,170,height-ladoqdo-80-10); //quadrado vinho
rect((width/2)-170,ladoqdo+80+(height-ladoqdo-80-10)/2,width-((width/2)-170),55);  //retang vinho

if(cor==0){
fill(152,251,152);} //quadrados verde claro
if(cor==1){
fill(255,69,20);}
if(cor==2){
fill(250,235,215);}
rect(0,0,width/2-120,65); 
rect(width/2-120,0,60,80);
rect(espacolados/2,ladoqdo/2+80,espacolados/2,30);
rect(espacolados/2,ladoqdo/2+80,30,ladoqdo/2);

if(cor==0){
fill(255,255,0);} //amarelo vivo
if(cor==1){
fill(255,80,0);} 
if(cor==2){
fill(255,105,180);} 
rect(10,ladoqdo/2+80-15-50,espacolados-10,50);
rect(10,ladoqdo/2+80-15,30,(ladoqdo+80)-(ladoqdo/2+80-15));

if(cor==0){
fill(0,128,0);} //verde escuro
if(cor==1){
fill(255,215,0);}
if(cor==2){
fill(225,0,0);}
rect(width-espacolados-80,30,width-(width-espacolados-80),30);
rect(width-espacolados-80,60,40,20);

if(cor==0){
fill(255,215,0);} //amarelo escuro
if(cor==1){
fill(100,142,20);}
if(cor==2){
fill(255,80,0);}
rect(width+espacolados,120,espacolados,80);
rect(width+espacolados+20,180,espacolados-20,ladoqdo+80-180);

}

void desenha2 (int cor)
{
int ladoqdo=400;
  
if(cor==0){
fill(65,105,225);}
if(cor==1){
fill(255,140,0);}
if(cor==2){
fill(255,215,0);}
rect(0,ladoqdo+80,width,100); //retangulo laranja inferior

if(cor==0){
fill(144,220,144);}
if(cor==1){
fill(160,180,50);}
if(cor==2){
fill(80);}
rect(0,0,width,ladoqdo+80); //fundo verde medio

if(cor==0){
fill(255,0,0);}
if(cor==1){
fill(180,200,50);}
if(cor==2){
fill(0);}
rect(50,80,ladoqdo,ladoqdo); //verdeoliva
rect(0,height-20,width,20);

if(cor==0){
fill(128,0,0);}
if(cor==1){
fill(105,105,105);}
if(cor==2){
fill(250,235,215);}
rect(50+ladoqdo/2+40+20,ladoqdo+80,30,35); //qd pequno cinza
rect(50+ladoqdo/2+40+20,ladoqdo+80+10,width-50+ladoqdo/2+40+20,25); // retang cinza

if(cor==0){
fill(152,251,152);}
if(cor==1){
fill(255,69,20);}
if(cor==2){
fill(255,105,180);}
rect(50+ladoqdo/2,ladoqdo+80,40,45); //quadrado laranja escuro
rect(50+ladoqdo/2,ladoqdo+80+45,width-50+ladoqdo/2,35);  //retang laranj esc

if(cor==0){
fill(255,255,0);}
if(cor==1){
fill(255,80,0);} //laranja qd
if(cor==2){
fill(225,0,0);} 
rect(30,ladoqdo/2+80,20,20);
rect(30,ladoqdo/2+80,10,ladoqdo/2);
rect(width/2+10,60-15,width-(width/2+10),15);
rect(width/2+10,80-20,30,20);

if(cor==0){
fill(0,128,0);}
if(cor==1){
fill(255,215,0);} //amarelo escuro
if(cor==2){
fill(255,80,0);}
rect(30+ladoqdo/2+20,5,width-30+ladoqdo/2+20,30);
rect(30+ladoqdo/2+20,35,40,45);

if(cor==0){
fill(152,251,152);}
if(cor==1){
fill(0,128,0);} //verde escuro
if(cor==2){
fill(255,105,180);}
rect(10,80+135,40,30);
rect(10,80+135+30,15,(80+ladoqdo)-245);

if(cor==0){
fill(255,215,0);}
if(cor==1){
fill(100,142,20);} //verde medio
if(cor==2){
fill(255,225,0);}
if(cor==2){
fill(50,235,215);}
rect(ladoqdo+50,110+10,100,70);
rect(ladoqdo+50+40,110+10+40,60,(80+ladoqdo)-160);

if(cor==0){
fill(0,128,0);}
if(cor==1){
fill(139,69,19);} //marrom
if(cor==2){
fill(255,80,0);}
rect(ladoqdo+50,90,width-ladoqdo-50-20,20);
rect(width-40,90+20,20,ladoqdo+80-110);
}

void desenha3 (int cor)
{
  int ladoqdocentro=180;
  int ladoqdofundoind=width/2;
  
background(255);

{
if(cor==0){
fill(65,105,225);}
if(cor==1){
fill(255,140,0);}
if(cor==2){
fill(255,215,0);} //amarelo escuro
rect(0,(height-ladoqdofundoind)/2,ladoqdofundoind,height/2);

if(cor==0){
fill(144,220,144);}
if(cor==1){
fill(160,180,50);}
if(cor==2){
fill(80);} //cinza escuro
rect(ladoqdofundoind,(height-ladoqdofundoind)/2,ladoqdofundoind,height/2);

if(cor==0){
fill(128,0,0);}
if(cor==1){
fill(105,105,105);}
if(cor==2){
fill(0);} // preto
rect(360,(height-ladoqdofundoind)/2+(ladoqdofundoind-ladoqdocentro)/2,ladoqdocentro,ladoqdocentro);
rect(width/2,(height-ladoqdofundoind)/2+(ladoqdofundoind-ladoqdocentro)/2+ladoqdocentro,ladoqdofundoind,(ladoqdofundoind-ladoqdocentro)/2-15);
rect(width/2+25,height/2+55,40,15);
rect(width/2+25,(height-ladoqdofundoind)/2,15,(height/2+55)-(height-ladoqdofundoind)/2);


if(cor==0){
fill(152,251,152);}
if(cor==1){
fill(255,69,20);}
if(cor==2){
fill(250,235,215);} //rosa quase branco
rect(width/2+ladoqdofundoind/2,(height-ladoqdofundoind)/2+30,20,30);
rect(width/2+ladoqdofundoind/2,(height-ladoqdofundoind)/2+30,width-(3*width/4)-20,20);
rect(width-40,ladoqdofundoind/2+30,20,height-((height-ladoqdofundoind)/2+30)-(height-ladoqdofundoind)/2-(ladoqdofundoind-ladoqdocentro)/2); 
rect(width/2+ladoqdofundoind/2,(height-ladoqdofundoind)/2+ladoqdocentro+(ladoqdofundoind-ladoqdocentro)/2,15,30);
rect(width/2+ladoqdofundoind/2,(height-ladoqdofundoind)/2+ladoqdocentro+(ladoqdofundoind-ladoqdocentro)/2+20,width-(3*width/4),15);

if(cor==0){
fill(255,255,0);}
if(cor==1){
fill(255,80,0);} 
if(cor==2){
fill(255,105,180);} //rosa
rect(0,(height-ladoqdofundoind)/2+(ladoqdofundoind-ladoqdocentro)/2+ladoqdocentro,ladoqdofundoind,(ladoqdofundoind-ladoqdocentro)/2-15);

if(cor==0){
fill(0,128,0);}
if(cor==1){
fill(255,215,0);}
if(cor==2){
fill(225,0,0);} //vermelho
rect((ladoqdofundoind-ladoqdocentro)/2,210,ladoqdocentro,ladoqdocentro);
rect(ladoqdofundoind/2,(height-ladoqdofundoind)/2+30,20,30);
rect(ladoqdofundoind/2,(height-ladoqdofundoind)/2+30,ladoqdofundoind/2-30,20);
rect(ladoqdofundoind-40,(height-ladoqdofundoind)/2+30,20,height-((height-ladoqdofundoind)/2+30)-(height-ladoqdofundoind)/2-(ladoqdofundoind-ladoqdocentro)/2);
rect(ladoqdofundoind/2,(height-ladoqdofundoind)/2+(ladoqdofundoind-ladoqdocentro)/2+ladoqdocentro,15,30);
rect(ladoqdofundoind/2,(height-ladoqdofundoind)/2+(ladoqdofundoind-ladoqdocentro)/2+ladoqdocentro+20,width-(3*width/4),15);

if(cor==0){
fill(255,215,0);}
if(cor==1){
fill(100,142,20);}
if(cor==2){
fill(255,80,0);} //laranja
rect(0,height/2+ladoqdofundoind/2-15,ladoqdofundoind,15);
}

}

Atividade 12 - Tileset Sonic!

Recriar a tela de um cenário do jogo Sonic
 utilizando o respectivo tileset obtido da internet.

De acordo com as técnicas de matriz aprendidas em aula, busquei na internet algumas imagens de tileset do jogo Sonic, como chão, chão2, arvore, girassol, nuvem. E montei de acordo com seus tamanhos e posições!

PImage imgchao, imgchao2, imgarvore, imggirassol,imgnuvem;
int [][]mapa={{0,5,0,5,0,0},
              {0,0,0,0,0,0},
              {0,0,0,0,0,0},
              {0,0,0,0,0,0},
              {3,3,4,0,0,4},
              {1,1,2,2,2,1}};
                
void setup ()
{
size(600,400);
background(0,100,255);
imgchao=loadImage("chao.png");
imgchao2=loadImage("chao2.png");
imgarvore=loadImage("arvore.png");
imggirassol=loadImage("girassol.png");
imgnuvem=loadImage("nuvem.png");
}

void draw ()
{
mostraMapa();
}

void mostraMapa ()
{
for(int i=0;i<6;i++)
  for(int j=0; j<6; j++)
     switch(mapa[j][i]) {
     case 1: 
     image(imgchao,i*144,j*71);
     break;
     case 2: 
     image(imgchao2,i*144,j*66);
     break;
     case 3: 
     image(imgarvore,i*144,j*53);
     break;
     case 4: 
     image(imggirassol,i*27,j*72);
     break;
     case 5: 
     image(imgnuvem,i*150,j*50); 
 }

}

Atividade 11 - Sprites Mário, corrigir problemas de controle.

Mantendo o frame-rate a 60 fps,  explicar o problema e mostrar uma solução para a questão do controle do personagem

Primeiramente foi preciso criar novos estados, é preciso ter dois tipos de andando (esquerda e direita) e também dois tipos de parado (para cada um dos lados) e acertar de que toda vez que o personagem vá virar para o outro lado primeiro apareça o parado para local que irá ir e só depois dos sprites de enfim andando. Para isso foi criados IF's, que estavam dentro do draw mas como ficaram vários resolvi organizar dentro da função move() e chamá-la no draw.

Para garantir que o frameRate funcione, precisamos criar outra variável para armazenamento que possa ser inicializada, para evitar problemas do personagem avançar espaço mas não mudar de imagem!


final int PARADO=0;
final int PARADO2=1;
final int ANDANDO=2;
final int ANDANDO2=3;
final int FORATELAESQ=4;
final int FORATELADIR=5;

int valorframerate=0;
int posicaoMario=250;

PImage imgParado, imgAndando, imgParado2, imgAndando2;
int estadoMario=PARADO;

void setup ()
{
size(800,600);
frameRate(60);

imgParado=loadImage("marioparado.png"); //esq
imgAndando=loadImage("marioandando.png"); //esq
imgParado2=loadImage("marioparado2.png"); //dir
imgAndando2=loadImage("marioandando2.png"); //dir

}

void draw ()
{
   background(255);
     move ();
    mostraMario(estadoMario);

}

void move()
{
if((keyPressed==true)&&(keyCode==LEFT)&&(estadoMario==PARADO)){
  estadoMario=ANDANDO;
  }
  if((keyPressed==true)&&(keyCode==RIGHT)&&(estadoMario==PARADO2)){
  estadoMario=ANDANDO2;
  }
  if((keyPressed==true)&&(keyCode==LEFT)&&(estadoMario==PARADO2)){
  estadoMario=PARADO;
  }
  if((keyPressed==true)&&(keyCode==RIGHT)&&(estadoMario==PARADO)){
  estadoMario=PARADO2;
  }
  if ((posicaoMario==0-30)&&(keyPressed==true)&&(keyCode==LEFT)){
  estadoMario=FORATELAESQ;
  }
  if ((posicaoMario==800-30)&&(keyPressed==true)&&(keyCode==RIGHT))
  {
  estadoMario=FORATELADIR;
  }
}

void mostraMario(int estado)
{
switch(estado) {
  case PARADO:
  image(imgParado,posicaoMario,150);
  break;
  
  case PARADO2:
  image(imgParado2,posicaoMario,150);
  break;
  
  case ANDANDO:
  incrementa();
  if (valorframerate%30<15) {
  image(imgAndando,posicaoMario,155);
  } 
  else
  {
  image(imgParado,posicaoMario,150);
  posicaoMario-=5;
  estadoMario=PARADO;
  }
  break;
  
  case ANDANDO2:
  incrementa();
  if (valorframerate%30<15)
  {
  image(imgAndando2,posicaoMario,155);
  }
  else
  {
  image(imgParado2,posicaoMario,150);
  posicaoMario+=5;
  estadoMario=PARADO2;
  }
  break;
  
  case FORATELAESQ:
  incrementa();
  if(valorframerate%30<15)
  image(imgAndando,posicaoMario,155);
  else
  image(imgParado,posicaoMario,150);
  estadoMario=PARADO;
  break;
  
  case FORATELADIR:
  incrementa();
  if(valorframerate%30<15)
  image(imgAndando2,posicaoMario,155);
  else
  image(imgParado2,posicaoMario,150);
  estadoMario=PARADO2;
  break;
}

}

void incrementa() {
  if(valorframerate < 60) {
    valorframerate++;
  } else {
    valorframerate = 0;
  }
}

void keyReleased() {
  valorframerate= 0;
}

Atividade 10 - Mover círculo do centro até qualquer lugar indicado na mesma velocidade.

Mantendo-se sempre uma mesma velocidade de deslocamento, criar uma aplicação que move um círculo, inicialmente no centro da tela, para qualquer posição clicada pelo mouse.

Primeiro defini a velocidade fixa de 150, e posicionei a bola no central da tela (metade da altura e metade da largura). Criei um estado clique para verificar se é verdadeiro ou falso. Dentro da função mouseClicked() caso o clique o estado é ativado, quando é solto o clique fica falso e armazeno em variáveis as posições x e y através da função "pmouseX" e "pmouseY".

Quando clique é ativado a bola fica da cor do fundo (ou seja desaparece) e chamamos a função movimento. Essa função a nova bola vai aparecer em branco e vai ativar o movimento dela até o local do clique. Nela colocamos como parâmetro a posição atual da bola, a posição do clique, e a velocidade fixa. É criada uma variável auxiliar para controlar o movimento de acordo com a velocidade, i é inicializado em 0 e pode ir até 1, enquanto i for menor que zero i será: i=i+(1.0/velocidade); É só colocar esse i multiplicando a diferença do x e y final (clique) e o x e y inicial (centro). O código fica assim:

int x1;
int x2;
float i=0;
boolean clique=false;
int velocidade=150;

void setup ()
{
size(600,600);
}

void draw ()
{
background(0);
ellipse(300,300,30,30);
if (clique==true)
  {
    background(0);
    movimento(300,300,x1,x2,velocidade);
  }

}

 void mouseClicked() {
  if(clique == false) {
    x1 = pmouseX;
    x2 = pmouseY;
   }
   clique = true;
}

void movimento(int x, int y, int a, int b, int v)
{
fill(255);
ellipse(x+i*(a-x),y+i*(b-y),30,30);

  if(i<=1)
    {
    i=i+(1.0/v);
    }

}

Atividade 9 - Diferenciar clique em botões retangulares e circulares.

Diferenciar, com base em exemplos, como se pode detectar
 o clique do mouse sobre botões circulares e retangulares.

O quadrado é bem simples definimos o local do botão e fizemos a função dentrorect() para identificar se o mouse está dentro do botão. É só checar se estar no intervalo de espaço entre os quatro vértices de acordo com sua largura e altura. SE isso for verdade retorna true para o dentro1, quando o dentro1 é verdadeiro ou seja o mouse está dentro da área do botão, tem outro IF para testar se o mouse está pressionado. Caso o mouse esteja dentro da área do botão e pressionado, ele muda de cor. Quando o mouse não está mais pressionado volta a cor normal.

Já o círculo precisamos de um cálculo diferente. Começamos com a mesma lógica, uma função dentroellipse(), temos que identificar o valor do clique até o centro para identificar se ele é igual a menor o raio da elipse. Se for maior que o raio está fora da elipse, se for igual ou menor está dentro. Mas para isso precisamos descobrir o valor dessa distância, que pode ser a hipotenusa de triângulos retângulos. Então deduzimos que os catetos serão, cat1=mouseX-ellipseX e cat2=mouseY-ellipseY; e fazemos o conhecido teorema de Pitágoras.


boolean dentro1=false;
boolean dentro2=false;
int ellipseX=400;
int ellipseY=200;
int raio=50;

void setup ()
{
  size(600,400);
  rect(100,150,100,100);  
  ellipse(ellipseX,ellipseY,2*50,2*50);
}

void draw ()
{
dentrorect();
if (dentro1==true)
 {
 if (mousePressed==true)
   {
     fill (255,25,0);
     rect(100,150,100,100);
   }
   else if (mousePressed==false)
   {
   fill(255);
   rect(100,150,100,100);
   }
 }

dentroellipse();
if (dentro2==true)
{
    if (mousePressed==true)
    {
      fill(25,255,0);
      ellipse(ellipseX,ellipseY,2*50,2*50);
    }
    else if (mousePressed==false)
    {
    fill(255);
    ellipse(ellipseX,ellipseY,2*50,2*50);
    }
    
}


}

void dentrorect () {
  if (mouseX>100 && mouseX<200 && mouseY>150 && mouseY<250)
  dentro1= true;
  else dentro1= false;
}

void dentroellipse () {
  float hp;
  int cat1, cat2;
  cat1=mouseX-ellipseX;
  cat2=mouseY-ellipseY;
  hp= sqrt(cat1*cat1+cat2*cat2);
  
  if (hp<=raio)
  dentro2= true;
  else dentro2= false;
}

Atividade 8 - Breakout com obstáculos.

incluir dois ou mais obstáculos na tela, que são destruídos quando tocados pela bola.

Já com nossa base de código do breakout que fizemos em sala, deveríamos incluir no mínimo 2 obstáculos e fazer serem destruídos quando colidir com a bola! Confesso que demorei bastante para achar uma solução que funcionasse corretamente, mas enfim depois te muitas tentativas cheguei nesse código: (o que está com fundo lilás foram os códigos adicionados para inserir essa colisão e desaparecimento do obstáculo)

int bastaoX=0;
int bolaX=10;
int dX=5;
int bolaY=(int) (random(500));;
int dY=5;
  
  int a=300;
  int b=300;
  int c=270;
  
void setup ()
{
size (600,600);
}

void draw ()
{
background(0);
fill(255);
rect(bastaoX, 580,100,20);
obstaculos();

if((keyPressed==true) &&(keyCode == RIGHT))
bastaoX= bastaoX+5;
else if ((keyPressed==true)&&(keyCode == LEFT))
bastaoX=bastaoX-5;

if (bastaoX>=500)
bastaoX=500;
else if (bastaoX<=0)
bastaoX=0;

ellipse(bolaX,bolaY,20,20);

bolaX=bolaX+dX;
bolaY=bolaY-dY;

if ((bolaX>590) || (bolaX<=0))
dX=-dX;

if (bolaY<=0)
dY=-dY;

for (int b=bastaoX; b<bastaoX+100; b++)
{
if ((bolaY>=580) && ((bolaX==b)))
dY=-dY;
}

 if ((bolaX>300)&& (bolaX<380) && (bolaY>300) && (bolaY<330))
  {
   a=-300;
  }
  if ((bolaX>220) && (bolaX<300) && (bolaY>300) && (bolaY<330))
  {
    b=-300;
  }
 if ((bolaX>260) && (bolaX<340) && (bolaY>270) && (bolaY<300))
  {
  c=-300;
  }
  
  if ((a==-300) && (b==-300) && (c==-300)) 
   {
  background (255,25,0);
  fill (0);
  text("VOCÊ VENCEU!",200,300);
  }

}

void obstaculos()
{

  fill(255,25,0);
  rect(a,a,80,30); 
  rect(b-80,b,80,30);
  rect(c-10,c,80,30);
}

Criei uma função obstaculos que desenha os três obstáculos nas posições que escolhi. Para controlar cada um separadamente criei variáveis globais que irão guardar os valores das posições!! E fiz um IF para cada obstáculo, cada um com as condições da bola encostar no intervalo do tamanho de cada obstaculo referente. Então SE a bola atingir aquele intervalo, a variável que controla sua posição fica -300, fazendo com que saia da tela, dando a impressão de destruição.

E acrescentei só uma tela de final, quando tiver destruido todos os obstáculos aparece "você venceu".

Atividade 7- Fazer A da Braun pulsar.

Fazer o “A" da Braun pulsar (lenta e continuamente
 aumentar e diminuir de tamanho) no centro da tela.

O módulo é 1 em geral, com a diferença apenas no retângulo do meio da letra que é 1,3.
Temos 8 módulos de altura e 3,3 de largura! Optei por dividir em algumas imagens sobrepostas, um quadrado preto com as bordas superiores arredondadas (ocupando 3 módulos), um outro da mesma cor do fundo com apenas 2 módulos de altura e 1,3 de largura. Depois fiz dois retângulos (um de cada lado) com a quantidade de módulos restante para puxar as pernas da letra de maneira sobreposta que pareça contínuo. Depois fiz mais um retângulo preto após 3,5 de módulo em branco, com 1 módulo de altura e 1,3 de largura (porém coloquei um pouco mais largo para garantir a sensação de continuidade).

A função ficou assim:

void brAun (float largura)
{
float modulo= largura/3.3;
float altura= 8*modulo;

noStroke();
fill(0);
rect(350,250-modulo, 3.3*modulo, 3*modulo, 50);
rect(350, 250+modulo, modulo, altura-2*modulo);
rect(350+2.3*modulo, 250+modulo, modulo, altura-2*modulo);
fill(255);
rect(350+modulo,250, 1.3*modulo, 3*modulo, 30);
fill(0);
rect(350,250+3.5*modulo, 3*modulo, modulo);
}

Tive que criar uma variável largura e um boolean crescer, toda vez que a largura for igual ou maior que zero, crescer é ativado que faz largura ser incrementada. Caso atinja o limite de tamanho que defini, decrementa até chegar a zero novamente!

E o programa principal:

Resultado:

Atividade 6 - Bandeira do Brasil!

LF 5700, S. II, A. 5 - 01/09/1971
I - Para cálculo das dimensões, tomar-se-á por base a altura desejada, dividindo-se esta em 14 partes iguais. Cada uma das partes será considerada uma medida ou módulo.
II - O largura total será de 20 módulos.
III - A distância dos vértices do losango ao quadro externo será de um módulo e sete décimos.
IV - O círculo no meio do losango terá o raio de três módulos e meio.

Fui construindo o código primeiramente seguindo as definições que a lei indica, então módulo=largura/20 e altura=14*modulo. Como o x e y são o centro do losango então consequentemente é o centro da elipse também, e seu raio é de 3,5*modulo, como no código da elipse trabalhamos com diâmetro é só multiplicar por dois; diâmetro=2*3,5*modulo.

Como no caso do retângulo o parâmetro não é o centro como losango e elipse, e sim no alto da lateral esquerda então precisamos criar variáveis para guardar esses valores, encontramos o local ideal pegando o atual valor de x e diminuindo pela metade da largura, a mesma coisa com y porém diminuindo a metade da altura, fica: eixoXrect=x-l/2 e eixoYrect=y-altura/2. Então o posicionamento do rect em relação a elipse fica ok com qualquer valor colocado em x e y.

O cálculo do losango é um pouco diferente pois sua largura e altura não é a mesma do retângulo é justamente 1,7*módulo a menos em todas as extremidades. Alguns parâmetros o x e y serão o mesmo do losango e elipse em outros é preciso calcular esse diferença de 1,7*módulo!
Fica: quad(x,y-(7-1.7)*modulo,x+(10-1.7)*modulo,y,x,y+(7-1.7)*modulo,x-(10-1.7)*modulo,y);

Atividade 5 - Lançamento balístico + desafio + dados na tela!

Reutilizando as funções MRU e MRUV - e diferenciando claramente as variáveis necessárias - crie uma aplicação que simula lançamentos balísticos (logicamente o tempo é o mesmo para ambos os movimentos simulados)

Bom começamos utilizando as funções de MRU e MRUV. Uma para movimento horizontal e outra vertical, respectivamente. 

float MRUV(float vv, float av, float t){

  float d;

  t=tAtual;

  d=vv*t+av*t*t/2;

  dAtualver=d;

  return (dAtualver);

  }

  

  float MRU(float vh, float t){

  float d;

  t=tempaux;

  d = vh*t;

  dAtualhor=d;

  return (dAtualhor);

  }

As duas funções retornam o cálculo da distância, uma com apenas velocidade e tempo, e a outra com acréscimo da aceleração! Esses dois movimentos ao mesmo tempo causam o lançamento balístico.

Transformando em 60fps: Mudando o frameRate para 60 e incrementar o tempo em +1.0/60.0!! 

DESAFIO:

Simule o quicar de uma bola lançada para a frente e para cima!

Para fazer a bola quicar foi a parte mais complicada para mim. Bom, acrescentei uma condição para sempre que o eixoY for maior que o tamanho da tela, sua nova posição ser o limite da tela menos o raio. Para o movimento repetir é preciso zerar o tempo e para completar a sensação de quicar a variável velver (velocidade vertical) será diminuída até tender a zero! Criei outra variável com mesmo valor de tempo porém ela não é zerada e é usada na função do movimento horizontal para fazer com que ele continue normalmente na horizontal e apenas vá reiniciando o movimento na vertical, quando quica.

Código completo:

float tAtual = 0;

float dAtualhor;

float dAtualver;

float raio=5;

float velver=70;

float velhor=15;

float eixoX;

float eixoY;

float tempaux=tAtual;

void setup(){

  frameRate (60);

  size(600,600);

  background(255);

}

void draw(){

  eixoY=600-dAtualver;

  eixoX=dAtualhor;

  

  background(255);

  mostraMundo();

  

textSize(25);

text("Distância vertical: "+dAtualver, 10, 30); 

text("Distância horizontal: "+dAtualhor, 10, 60);

text("Tempo: "+tempaux, 10, 90); 

  

  println("Distância percorrida na vertical:");

  println(MRUV(velver,-9.8,0),"metros");

  println("Distância percorrida na horizontal:");

  println(MRU(velhor,9.8),"metros");

  println("Tempo decorrido:");

  println(tAtual,"segundos");

  fill (200,2,100);

  ellipse(eixoX,eixoY,raio*2,raio*2);

  tAtual+=1.0/60.0;

  tempaux+=1.0/60.0;

  

if ((eixoY)>600) 

{

eixoY=600-raio;

tAtual=0;

velver=velver/1.5;

}

}

float MRUV(float vv, float av, float t){

  float d;

  t=tAtual;

  d=vv*t+av*t*t/2;

  dAtualver=d;

  return (dAtualver);

  }

  

  float MRU(float vh, float t){

  float d;

  t=tempaux;

  d = vh*t;

  dAtualhor=d;

  return (dAtualhor);

  }

  

  void mostraMundo(){

  for (int i=0 ; i<12 ; i++) {

    line(i*50,0,i*50,600);

    line(0,i*50,600,i*50);

  }

  }

A parte do texto é simples usando a ferramenta text, lembra bastante o já conhecido println, porém você também controla o tamanho da fonte e a posição do eixo x e y que o texto se posicionará.

Acima o gif do resultado!

Atividade 4 - Movimento de uma bola com MRU a 60fps!

Mantendo o tempo real, explicar as alterações necessárias
 para o simulador operar a 60 fps, tornando o modelo mais preciso e, consequentemente, a animação mais suave.

O código inicial fazia a bola se movimentar um quadro a cada um segundo, deixando seu rastro das posições anteriores.

int tAtual=0;

int vAtual= 10;

int dAtual;

void setup ()

{

frameRate(1);

size(600,600);

background(255);

mostraMundo();

}

void mostraMundo () 

{

  for (int i=0; i<12; i++)

   {

  line(i*50,0,i*50,600);

  line(0,i*50,600,i*50);

   } 

}

void draw() 

{

dAtual= MRU(vAtual,tAtual);

println(tAtual, dAtual);

ellipse(dAtual,300,10,10);

tAtual++;

}

int MRU(int v, int t)

{

int d;

d=v*t;

return(d);

}

Tivemos que mudar tanto seu frameRate() de 1 para 60 e também criar uma nova variável para receber o novo valor de tempo, que será 1/60. Como o resultado dessa divisão dá número quebrado ela tem que ser float, implicando assim que todas as variáveis que se relacionem com ela também precisam ser alteradas para float. Então agora tAtual não é incrementado com +1 a cada loop, e sim com 1/60, dizendo assim que a cada 1 segundo 60 bolas serão desenhadas. Dando assim uma movimentação mais fluida e suave.

float tAtual=0;

float vAtual= 10;

float dAtual;

float tempo60fps=1.0/60.0;

void setup ()

{

frameRate(60);

size(600,600);

background(255);

mostraMundo();

}

void mostraMundo () 

{

  for (int i=0; i<12; i++)

   {

  line(i*50,0,i*50,600);

  line(0,i*50,600,i*50);

   } 

}

void draw() 

{

dAtual= MRU(vAtual,tAtual);

println(tAtual, dAtual);

ellipse(dAtual,300,10,10);

tAtual=tAtual+tempo60fps;

}

float MRU(float v, float t)

{

float d;

d=v*t;

return(d);

}