Exercício 5: Bandeira do Brasil

Seguindo a Lei Federal N°5700/71 para reprodução da bandeira brasileira, foi desenvolvido esse código no processing, que cria a bandeira com seus elementos básicos (Retângulo, Losango e circulo) e seguindo sua regra de criação que é:

Retângulo: 20 módulos de comprimento por 14 de largura.
Losango: Distancia de 1.7 módulo das extremidades do retângulo.
Circulo: Raio de 3.5 módulo, posicionado no centro horizontal e vertical do retângulo (20*modulo/2, 14*modulo/2).

No código foi colocado inicialmente um valor fixo para o modulo, de 10.

A função bandeiraBrasil cria a bandeira seguindo sua lei de criação com o centro nas variáveis X e Y passadas para a função, no caso X e Y do mouse.

Na função bandeiraBrasil2 a unica diferença é que é passado um modulo mutável, que é a posição X do mouse dividida por 16.

Código-Fonte:

int modulo = 10;

void setup(){

  size(600,600);
  background(255);


}

void draw(){
  background(255);
  if(mousePressed){
    bandeiraBrasil2(mouseX,mouseY, mouseX/16);
  }

}


void bandeiraBrasil(int X, int Y){

    //Retangulo: cor verde, 20 modulos de comprimento por 14 modulos de largura
    fill(0,200,0);
    rect(X-20*modulo/2,Y-14*modulo/2,20*modulo,14*modulo);
 
    //Losango: cor amarela
    fill(250,250,0);
    quad(X-20*modulo/2+1.7*modulo, Y, X, Y-14*modulo/2+1.7*modulo, X+20*modulo/2-1.7*modulo, Y, X, Y+14*modulo/2-1.7*modulo);
    fill(0,0,200);
    ellipse(X,Y,7*modulo,7*modulo);

}

void bandeiraBrasil2(int X, int Y,int modulo){

    //Retangulo: cor verde, 20 modulos de comprimento por 14 modulos de largura
    fill(0,200,0);
    rect(X-20*modulo/2,Y-14*modulo/2,20*modulo,14*modulo);
 
    //Losango: cor amarela
    fill(250,250,0);
    quad(X-20*modulo/2+1.7*modulo, Y, X, Y-14*modulo/2+1.7*modulo, X+20*modulo/2-1.7*modulo, Y, X, Y+14*modulo/2-1.7*modulo);
    fill(0,0,200);
    ellipse(X,Y,7*modulo,7*modulo);

}

Exercicio 4: Flor Processing

Esse código possui três funções para criar uma "flor" com círculos; a primeira cria um flor em forma de cruz na posição X e Y passadas, no caso X e Y do mouse, no entanto o tamanho dos círculos não varia.

Na função flor2, é criada uma flor em forma de cruz, na posição passada, e o tamanho dos círculos variam de acordo com o valor passado para a função, no caso a posição x do mouse dividido por 8.

Na função flor3, é criada uma flor em formato de X na posição passado, sendo essa a unica diferença entre esta e a função flor 2.

O circulo central da flor, tem seu centro (nesse exemplo) na posição X e Y do mouse, e as outras são feitas em relação a ela, na primeira função como o raio é 20, a posição x do circulo esquerdo é o x do circulo central menos o raio da bola central e o raio do circulo esquerdo, tendo assim seu centro, essa lógica é alterada e assim é feito os outros três círculos, e como os quatro círculos são feitos em relação ao raio e posição do raio central, é possível mudar posição e raio do circulo central sem "quebrar" a figura, por isso a modificação para a função flor2 é bem rapida

Código:

int x;

void setup(){
    size(1080,986);
 
}

void draw(){
    if(mousePressed){
      flor3(mouseX,mouseY,mouseX/8);
   
    }
}

void circulo(float xc,float yc,float r){
    ellipse(xc,yc,2*r,2*r);
}

void flor(float xf, float yf){
    circulo(xf,yf,20);
    circulo(xf,yf-40,20);
    circulo(xf,yf+40,20);
    circulo(xf-40,yf,20);
    circulo(xf+40,yf,20);
 
}

void flor2(float xf, float yf,float r){
    circulo(xf,yf,r);
    circulo(xf,yf-r*2,r);
    circulo(xf,yf+r*2,r);
    circulo(xf-r*2,yf,r);
    circulo(xf+r*2,yf,r);
 
}

void flor3(float xf, float yf,float r){
    circulo(xf,yf,r);
    circulo(xf-r*sqrt(2),yf-r*sqrt(2),r);
    circulo(xf+r*sqrt(2),yf+r*sqrt(2),r);
    circulo(xf+r*sqrt(2),yf-r*sqrt(2),r);
    circulo(xf-r*sqrt(2),yf+r*sqrt(2),r);

}

Exercício 3: Jogo Estilo Angry Birds - BÔNUS Código de Simulação de MRU e MRUV (ATUALIZADO)

Preview do "Jogo":

ATUALIZAÇÃO: Com o comando background comentado na função draw, agora a bola tem um rastro, como foi pedido.

Explicação do código
É criada a janela com 600x600 px, a função grid é usada para criar um grid na tela, a função lanBalistico é responsável por receber os dois valores de velocidade fornecidos(x,y), e calcular o deslocamento no eixo x e y, e move a bola aos pontos correspondentes e mostra na tela a frase "Acertou!!!" caso o circulo atinja o alvo.

Para brincar um pouco com esse "Jogo" basta e mudando os números passados na função lanBalistico

Código Fonte do Jogo:

float t = 0;
float d;
float v;
float v0 = 105;

float vx = 160;
float vy = 40;

float a = -20;

float dx;
float dy;



void setup(){
  frameRate(60);
  size(600,600);
  background(185);

}

void draw(){
  v = v0+a*t;
 // background(185);
  grid();
  text("Tempo: "+t,20,20);
  text("Velocidade Inicial: "+v0,20,40);
  text("Velocidade Atual: "+v,20,60);
  text("Distancia Percorrida: "+d,20,80);

  //Chamando funçao do lançamento balistico
  lanBalistico(140,200);
 
  //Alvo
  rect(440, 20, 120, 55);
  //Plataforma
  rect(420, 75, 180, 20);
  //Suporte da Plataforma
  rect(490, 95, 40, width-95);

    t=t+0.01666666666666666;
}

void grid(){
  int intervalo=50;
  int lines = width/intervalo;
  for(int i=0; i<lines; i++){

  line(i*intervalo,0,i*intervalo,width);
  line(0,i*intervalo,height,i*intervalo);
}
}

void lanBalistico(float x, float y){
    dx = x*t;
    dy = y*t+a*t*t/2;
 
    ellipse(dx,width-dy,20,20);
    println("("+dx+" , "+(width-dy)+")");
    if(dx>=440 && width-dy==20 || dx>=440 && width-dy==75 || dx>=440 && width-dy<75 && width-dy>20){
        text("Acertou!!!!!", 20,100);
    }

}

BÔNUS MRU:
Essa função pode ser adicionada ao código anterior, ela calcula o deslocamento seguindo o Movimento Retilíneo Uniforme, e move uma bola segundo esse deslocamento

void moveBolaMRU(){
    d=v*t;
 
    ellipse(d,300,20,20);
 
}

BÔNUS MRUV:
Mesmo caso da função anterior, só que nesse caso é com o Movimento Retilíneo Uniformemente Variado.

void moveBolaMRUV(){
  d=v0*t +a*t*t/2;
  ellipse(width/2,height-d,20,20);
}

Exercicio 2: Explicar Exemplo e Modifica-lo

Mostrar Exemplo do https://processing.org/examples/, dizer o que faz e modifica-lo.

Exemplo: MousePress, link: https://processing.org/examples/mousepress.html

Código Original:

//funcao onde é definido atributos estáticos da janela, como tamanho, cor de fundo, etc.

void setup() {
  size(640, 360);
  noSmooth();
  fill(126);
  background(102);
}

//funcao que executa dinamicamente onde duas linhas perpendiculares, onde o centro são

//as coordenadas X,Y do mouse 

void draw() {

 //Quando ocorre o click do mouse a cor das linhas são mudadas para branco

 if (mousePressed) {
    stroke(255);
  } else {
    stroke(0);
  }
  line(mouseX-66, mouseY, mouseX+66, mouseY);
  line(mouseX, mouseY-66, mouseX, mouseY+66); 
}

Código Modificado:

void setup() {
  size(640, 360);
  noSmooth();
  fill(126);
}

//mudei o comando background da função setup para draw, para que não fossem desenhadas

//varias linhas, a cor de fundo também foi mudada para vermelho escuro 

void draw() {
  background(102,10,40);

  //Quando o mouse é pressionado as linhas mudam pra verde. 

 if (mousePressed) {
    stroke(10,120,40);
  } else {
    stroke(0);
  }
  line(mouseX-66, mouseY, mouseX+66, mouseY);
  line(mouseX, mouseY-66, mouseX, mouseY+66); 
}

Outra modificação:

void setup() {
  size(640, 360);
  noSmooth();
  fill(126);
}

//invés de duas linhas, é desenhado um cirulo preto, que fica verde com o clique do mouse.
void draw() {
  background(102,10,40);
  if (mousePressed) {
    stroke(10,120,40);
    fill(10,120,40);
  } else {
    stroke(0);
    fill(0);
  }
  ellipse(mouseX, mouseY, 55, 55);
}

Exercício 1: Hello World! Processing

Documentário: Hello World! Processing

Duração: 41 Minutos

Idioma: Inglês e Português

O documentário da um "overview" no Processing, enquanto mostra brevemente a história do computador. É mostrado que o Processing é uma ferramenta amigável a não programadores, usada até por pessoas com pouca experiência em design. É citado um exemplo, de um homem que editava um livreto sobre sua vida e usou o Processing para criar o design da capa.

Também e abordado no filme a importância de tratar dados, e como eles podem ser muito mais compreensíveis quando representados graficamente. 

Enquanto o filme introduz o Processing, ele mostra também pequenos trechos de filmes antigos sobre computadores, que tentavam prever como seria a interação humano-computador no futuro, uma me chamou atenção, a de que muitas pessoas saberiam programar, apesar de o computador ser muito popular, e muitas pessoas saberem, mesmo que basicamente, opera-los; não é a maioria dos usuários que sabe ou mesmo se interessa em programar.

O filme também mostra lindos exemplos com o Processing, como o design de uma luminaria, que se propagava como veias, e um exemplo onde linhas eram criadas e paravam de crescer quando tocavam outras, o que gerava uma imagem muito bonita.

Também é abordado a comunidade usuária do Processing, que é bem ativa e compartilha exemplos na internet; outro ponto a ressaltar é o fato do Processing ser aberto a modificações, os usuários podem desenvolver suas próprias bibliotecas e compartilha-las na internet.