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!