mymadprogrammingdiary

[mymadprogrammingdiary]

Atividade 8

Descrição:

Criem uma nova classe para um elemento de interface gráfica (assim como CircButton,QuadButton e CampoTexto, deve utilizar apenas formas geométricas e texto para ser desenhada na tela). Pode ser um display de texto, dropdown etc.

Pense em algum comportamento (método) que esta classe terá, e que as demais classes podem ter, e que não foi ainda implementado.

Crie uma nova interface, que terá a assinatura do método. Faça com que todas as classes implementem a interface (menos a classe Button) e implemente o método em cada classe.

Código:

baixe aqui o arquivo para o código.

[mymadprogrammingdiary]

Atividade 9

Descrição: Criem uma função que utilize recursividade para criar um padrão fractal simples (que não tenha sido mostrado em aula). Façam uma versão da função que receba parâmetros que possam animar o fractal.

Código: 

boolean mouseDown = false;

void setup() {  size(1100, 600);  noStroke();  smooth(); } void draw() {  background(255);  //quadradosEscala(mouseX); //chamada da função para desenhar o fractal (o tamanho do quadrado vai variando de acordo com a movimentação do mouse)  escalaAnimada(250); } void quadradosEscala(float n) { fill(0); int tam = 5; if (n < tam){ //apenas serão desenhados quadrados maiores que 5x5;   return; } rect(0, height/2, n, n); //height/2 para iniciar a partir do centro da tela translate(n + 5, n / 8);  //tamanho do quadrado + 5px de distância e /8 para alinhar verticalmente quadradosEscala(n * 0.7); //cada quadrado é 70% do tamanho do quadrado anterior a ela }

//versão 2 da função dos quadrados em escala void escalaAnimada(float n) { fill(random(255),random(255),random(255)); int tam = 5; if (n < tam){ //apenas serão desenhados quadrados maiores que 5x5;   return; } rect(0, height/2, n, n); //height/2 para iniciar a partir do centro da tela translate(n + 5, n / 8);  //tamanho do quadrado + 5px de distância e /8 para alinhar verticalmente escalaAnimada(n * 0.7); //cada quadrado é 70% do tamanho do quadrado anterior a ela

if(mouseDown==false){    noLoop();  } } void keyPressed(){  mouseDown = true;  loop();  mouseDown = false; }

Imagens do código:

Versão 1:

Versão 2  (a cor vai variando de acordo com a keyPressed):

(BÔNUS) - Criei outro fractal simples, dessa vez com círculos:

Imagem:

[mymadprogrammingdiary]

Projeto 1 (versão animada)

Código:

//inicialização das variáveis

float rot = 0; //variável para rotate int alpha = 1, delta = 1; //variação gradiente

int x = 0, y = 20;

int cols = 24; //número de linhas e colunas int rows = 24;

//inicia a array para randomizar as formas int [][] nextShape = new int[cols][rows];

void setup(){  //tamanho da tela  size(500,500);  smooth(); //suavização da animação

 //loop para randomizar as formas (quadrado ou losango)  for(int i = 0; i < nextShape.length; i++){    for(int j = 0; j < nextShape[i].length; j++){      nextShape[i][j] = (int)random(0,2);    }  }

} //função para a rotação dos quadrados void draw_rotating_rect(float x, float y, float rect_size, float r){  translate(x, y);  rotate(r);    rect(0, 0, rect_size, rect_size);  resetMatrix(); }

void draw(){  //cor de fundo  background(255);

 x = 0;  y = 20;

 //chamada da função para desenhar a arte  desenhaArte(); }

//função para desenhar a arte animada:

void desenhaArte(){  //loop para criar as 24 linhas e colunas da arte  for(int i = 0; i<cols; i++){    for(int j = 0; j<rows; j++){      frameRate(3); //número de frames por segundo

     //preenchimento da forma      noStroke(); //para deixar as formas sem borda      fill(0, alpha); //cor

     //se for 0 desenha um quadrado      if(nextShape[i][j] == 0){        x += 20; //posição em que o quadrado é desenhado

       rectMode(CENTER); //rectmode para o quadrado ser desenhado a partir do centro

       //desenha o retângulo        if(mousePressed){ //quando o mouse for pressionado o rotate dos quadrados acontece e uma borda é criada          stroke(100, 120, 200);

         draw_rotating_rect(x,y,15, rot + i + j);        }else{ //senão apenas o gradiente usando o alpha do fill acontece          if (alpha == 0 || alpha == 255) {             delta = -delta;          }          alpha += delta;          rect(x,y,15,15);        }

     }      //se não for 0 desenha um losango      else{        x += 20;        //desenha o losango e também acontece o gradiente com os losangos        if (alpha == 0 || alpha == 255) {             delta = -delta;        }        alpha += delta;        quad(x-10,y,x,y-10,x+10,y,x,y+10);        }    }    x = 0;    y += 20;  }  rot = rot + 0.05; //rotation }

Imagem do código executado no processing:

//com mousePressed (rotating):

[mymadprogrammingdiary]

Projeto 1

Reprodução da seguinte arte:

Código:

//inicialização das variáveis int x = 0, y = 20;

int cols = 24; int rows = 24;

//inicia a array para randomizar as formas int [][] nextShape = new int[cols][rows];

void setup(){  //tamanho da tela  size(500,500);

 //loop para randomizar as formas (quadrado ou losango)  for(int i = 0; i < nextShape.length; i++){    for(int j = 0; j < nextShape[i].length; j++){      nextShape[i][j] = (int)random(0,2);    }  }

}

void draw(){  //cor de fundo  background(255);

 x = 0;  y = 20;

 //chamada da função para desenhar a arte  desenhaArte(); }

//função desenha arte

//função para desenhar a arte void desenhaArte(){  //loop para criar as 24 linhas e colunas da arte  for(int i = 0; i<cols; i++){    for(int j = 0; j<rows; j++){

     //preenchimento da forma      noStroke();      fill(0);

     //se for 0 desenha um quadrado      if(nextShape[i][j] == 0){        //posição em que o quadrado é desenhado        x += 20;        //rectmode para o quadrado ser desenhado a partir do centro        rectMode(CENTER);        //desenha o retângulo        rect(x,y,15,15);      }      //se não for 0 desenha um losango      else{        x += 20;        //desenha o losango        quad(x-10,y,x,y-10,x+10,y,x,y+10);

     }    }    x = 0;    y += 20;  } }

Imagem do código executado no processing:

[mymadprogrammingdiary]

Atividade 7

Descrição:

Utilizando a classe Circulo criada em sala, crie 5 diferentes círculos. Inclua no construtor o recebimento de um parâmetro de cor, para que, ao criar um círculo, a sua cor deva ser especificada. Faça com que cada circulo seja exibido com sua cor.

Código:

/*Utilizando a classe Circulo criada em sala, crie 5 diferentes circulos. Inclua no construtor o recebimento de um parâmetro de cor, para que, ao criar um circulo, a sua cor deva ser especificada. Faça com que cada circulo seja exibido com sua cor.*/ Circulo circ1, circ2, circ3, circ4, circ5; void setup(){   size(600,600);     circ1 = new Circulo(200, 300, 60, 2.3, 3.5, color((int)random(256),(int)random(256),(int)random(256)));   circ2 = new Circulo(250, 300, 35, 3.5, -1.2, color((int)random(256),(int)random(256),(int)random(256)));   circ3 = new Circulo(450, 100, 80, 6.0, 1.6, color((int)random(256),(int)random(256),(int)random(256)));   circ4 = new Circulo(350, 100, 50, 5.0, 2.9, color((int)random(256),(int)random(256),(int)random(256)));   circ5 = new Circulo(150, 80, 90, 8.0, 2.2, color((int)random(256),(int)random(256),(int)random(256))); } void draw(){   background(255);     circ1.exibir();   circ1.atualizar();   circ1.checarBordas();     circ2.exibir();   circ2.atualizar();   circ2.checarBordas();     circ3.exibir();   circ3.atualizar();   circ3.checarBordas();     circ4.exibir();   circ4.atualizar();   circ4.checarBordas();   circ5.exibir();   circ5.atualizar();   circ5.checarBordas();

}

class Circulo{  float x;  float y;  float diam;  float passoX;  float passoY;  color cor;  Circulo(float eX, float eY, float eDiam, float epassoX, float epassoY, color ecor){    x = eX;//width/2;    y = eY; //height/2;    diam = eDiam; //100;    passoX = epassoX; //1.0;    passoY = epassoY; //1.0;    cor = ecor;  }  void exibir(){    fill(cor);    ellipse(x,y,diam,diam);  }  void atualizar(){    x += passoX;    y += passoY;  }  void checarBordas(){    if((x >= width - diam/2) || (x <= 0 + diam/2)){      passoX = -passoX;    }    if((y >= height - diam/2) || (y <= 0 + diam/2)){      passoY = -passoY;    }  }  void colorir(){    fill(cor);  } }

Imagem do arquivo executado no processing:

[mymadprogrammingdiary]

Atividade 5

Descrição:

Utilize um loop em duas dimensões para fazer um grid de retângulos na tela. Faça com que cada um dos retângulos tenha um tamanho menor conforme esteja mais próximo do centro da tela. Faça com que cada um dos retângulos tenha uma cor diferente (mais escura, mais clara, mais próxima do vermelho etc.) de acordo com sua distância do centro da tela.

Como a atividade da aula 6 foi relativamente complexa, o professor teve que repassar o código explicando passo a passo como foi feito, fiz apenas algumas alterações de valores e aqui segue o código:

void setup() {

 size(600, 600);

}

void draw() {

 for (int i = 0; i <= width; i += width/50) {

   for(int j = 0; j <= height; j += height/50){

     float size = dist(i, j, width/2, height/2)/15;

     fill(100, 100, dist(i, j, width/2, height/2)/2);      rect(i, j, size, size);

   }  } }

Imagem do código em execução:

[mymadprogrammingdiary]

Atividade 4

Descrição:

Pegue o exercício da aula anterior (05/04), na qual fizemos um círculo se movendo horizontal e verticalmente, que, ao chegar a uma das bordas da tela mudava a direção de seu movimento (quicava). Faça com que, através do pressionar de uma tecla direcional (cima, baixo, esquerda, direita), a direção do movimento do círculo mude correspondentemente. Por fim, faça com que, caso se clique sobre o círculo, ele mude de cor.

Código:

int circX, circY; int passoX, passoY; color cor;

int circVX, circVY; void setup(){ size(600,600); //horizontal circX = 25; circY = height/2; //começa na metade da tela passoX = (int)random(4, 7); passoY = (int)random(4, 7); cor = color(0,120,200); }

void draw(){ background(255); noStroke(); if(mousePressed == true){   fill(100); }else{   fill(cor); } ellipse(circX, circY, 50, 50); } void keyPressed(){  if(keyCode == RIGHT){   circX += passoX;  }  else if(keyCode == LEFT){     circX -= passoX;  }  else if(keyCode == DOWN){   circY += passoY;  }  else if(keyCode == UP){     circY -= passoY;  } }

Imagens:

mousePressed:

[mymadprogrammingdiary]

Atividade 3

Descrição:

Criar um programa que desenhe na tela um círculo em posição inicial aleatória. Faça o círculo se mover nas posições horizontal e vertical. Quando o círculo alcançar uma das bordas, faça com que ele passe a se mover na direção contrária.

Código:

int circX, circY; int passoX, passoY; color cor;

int circVX, circVY; //vertical ou horizontal int VH;

//random int cX, cY; float pX, pY; void setup(){  size(600,600);  //horizontal  circX = 25;  circY = height/2; //começa na metade da tela  passoX = (int)random(4, 7);  passoY = (int)random(4, 7);  cor = color(0,120,200);

 //vertical  circVX = width/2;  circVY = 25;

 //random  cX = 0;  cY = 0;  pX = random(2,4);  pY = random(1,5);

 //vertical ou horizontal  VH = (int)random(1,3);  println(VH); } void draw(){  background(255);  noStroke();  fill(cor);  if(VH == 1){    //bolinha na horizontal vai e volta sem desaparecer a bolinha    ellipse(circX, circY, 50, 50);      circX += passoX;

   if(circX > width -25 || circX < 25){      passoX = -passoX;    }  }else if(VH == 2){    //bolinha na vertical vai e volta sem desaparecer a bolinha    ellipse(circVX, circVY, 50, 50);      circVY += passoY;

   if(circVY > height -25 || circVY < 25){      passoY = -passoY;    }  } }

Imagem:

(não tem como mostrar o código rodando completamente então irei postar apenas um print)

[mymadprogrammingdiary]

Atividade 2

Descrição:

Criar um programa que desenhe na tela um círculo em posição inicial aleatória.Utilize como cor interna do círculo uma variável do tipo color. Faça com que o círculo se mova nos eixos x e y de forma uniforme. Faça com que toda vez que o programa for executado o círculo se mova em velocidade diferente. Faça com que o círculo possa se mover para frente ou para trás, para cima ou para baixo Imprima no console a posição x e y do círculo a cada frame.

Código:

int posiX, posiY; color cor;

float moveX, moveY; void setup(){  size(600,600);  posiX = (int)random(1,600);  posiY = (int)random(1,600);  cor = color(200, 100, 200);

 moveX = random(1,5);  moveY = random(1,5);

} void draw(){  background(255);  ellipse(posiX, posiY, 50, 50);  noStroke();  fill(cor);

/*O círculo se move em velocidade diferente. Pode se mover para frente ou para trás, para cima ou para baixo*/

 posiX += moveX;  posiY += moveY;

 posiX += -moveX; //inversão de valores  posiY -= 2;

 //posição X e Y a cada frame:  println("Posição X do círculo:", posiX);  println("Posição Y do círculo:", posiY); }

Imagens do código e execução:

[mymadprogrammingdiary]

Imagens atividade 1

Aqui está o resultado da minha atividade:

[mymadprogrammingdiary]

1ª atividade!

Com a chegada da disciplina de programação II também começam as obrigações e esta será a primeira!

Descrição da atividade: Pesquisar na referência do Processing sobre as diferentes formas geométricas (elipse, retângulo, linha, triângulo etc.) e criar um programa que as desenhe com diferentes tamanhos e posições na tela. Postar no blog imagem do programa, o código e uma descrição do algoritmo seguido para o desenvolvimento do programa.

Segue o código de como realizei:

int tam2 = 40; int tab2 = 10;

int tam = 10; //tamanho inicial da forma int tab = 30; //espaço entre formas

float x1 = tab, x2 = tam; float x3; int y3 = 300; int alt = 400;

void setup() {  size(640, 640);  background(255);  fill(0);

 /* for para repetir as formas do retângulo e ellipse*/  for (int i = 1; i <= 6; i++) {    rect(10, tab2, tam2, tam2);    ellipse(180, tab2 + 30, tam2, tam2);    tab2 = tam2 + tab2 + 30;    tam2 += 10;  }

 //é necessário reiniciar as variáveis para o laço do triangulo e linha  tam = 10;  tam = 30;  x3 = x1 + ((x2 - x1)/2);

 //for para repetir as formas do triângulo e linha  for (int i = 1; i <= 6; i++) {    line(400, x1, 400, x2);    triangle(320, x1, 320, x2, y3, x3);    x1 = x2 + tab;    tam += 10;    x2 = x1 + tam + tab;    x3 = x1 + ((x2 - x1)/2);    y3 -= 12;    alt -= 12;  } }

Imagem do código executado:

(EXTRA)

void setup(){  size(600,400); } void draw(){  background(255);  //quadrado maior  fill(83, 136, 214, 200);  rect(100, 200, 400, 200);  //porta  fill(51, 84, 136, 150);  rect(120, 280, 60, 120);  //janela 1  rect(280, 280, 60, 60);  //janela 2  rect(380, 280, 60, 60);  //telhado  fill(178, 0, 0);  triangle(100, 200, 500, 200, 300, 100);   }

Uma breve explicação de como realizar a atividade:

 1. desenhe um quadrado na parte central inferior da tela com x= 400 e y= 200;  2. depois disso, desenhe um quadrado com x= 60 e y= 120, esse quadrado deverá ficar no interior do quadrado maior na parte inferior esquerda;  3. desenhe 2 quadrados 60x60 que deverão ficar lado a lado com o quadrado número 2;  4. agora desenhe um triângulo que deverá ficar "em cima" do quadrado maior ocupando toda a sua extensão, com as coordenadas x1= 100, y1= 200, x2= 500, y2= 200, x3= 300, y3= 100;  5 após isso é opcional colorir as formas e você irá notar que a junção das formas formam uma casa.