[Trabalho 1] Quadro estático e animado
Obra: quado de Geraldo de Barros
CÓDIGO DO QUADRO ESTÁTICO:
color [] cor = {color (255),color (163), color(255), color (163), color (255), color (163)};
float topX, lX, btmX, rX;
float topY, lY, btmY, rY;
color corbg;
/*
Vetor que armazena as cores de cada quadrilátero, se alternando entre cinza e branco
Variáveis que armazenarão as posições de cada vértice dos quadriláteros
Variável de cor do plano de fundo
*/
void setup(){
size(563,563);
corbg = color (18, 24, 33);
}
void draw(){
background(corbg);
/*
O valor é atribuido às variáveis antes do laço, para que o laço trabalhe
a partir dos valores iniciais e os modifique de maneira mais simples
*/
topX = width/2;
topY = 0;
lX = 0;
lY = height/2;
btmX = width/2;
btmY = height;
rX = 65;
rY = lY;
/*O primeiro laço e as primeiras atribuições, todas são para os 3 quadriláteros
do lado esquerdo*/
for (int i = 0; i<3; i++){ //laço que cria os 3 quadriláteros do lado esquerdo
fill(cor[i]);
/*A cor se altera pois o valor da variável i é igual ao índice dos elementos
do vetor que precisam ser acessados para colorir os quadriláteros*/
noStroke();
quad(topX,topY,lX,lY,btmX,btmY,rX,rY); //Em ordem anti-horária
topX = topX+33; //Os incrementos sempre tem relação com a largura do meio
topY = topY+65; //de cada quadrilátero (que é 65,7 px, aproximado para 65
lX = lX+65;
btmX = btmX+33;
btmY = btmY-65;
rX = rX+65;
if (i==1){ //Como o último quadrilátero tem uma particularidade,
topX = (width/2)+33; //Cria-se a condição para seus incrementos
topY = topY+33;
btmX = topX;
btmY = btmY-33;
rX = topX-65;
lX = lX+65;
}
}//for 1
//Atribuição de valores para os 3 quadriláteros do lado direito
topX = width/2;
topY = 0;
lX = width-65;
lY = height/2;
btmX = width/2;
btmY = height;
rX = width;
rY = lY;
for (int i = 0; i<3; i++){
fill(cor[(i+3)]);
/*Agora a variável i precisa ser adicionada de 3 para que acesse os elementos
do vetor correspondentes às cores para os quadriláteros do lado direito, que
têm ordem oposta às do lado esquerdo
*/
noStroke();
quad(topX,topY,lX,lY,btmX,btmY,rX,rY); //também em ordem anti horária
topY = topY+95; //neste caso, a particularidade maior é do segundo quadrilátero, pois sua distância
rX = rX-130; //de seu vértice direito ao vértice esquerdo do quadrilátero direito mais externo é maior que a distância
lX = lX-130; //do quadrilátero cinza do meio, o terceiro e menor, de si.
btmY = btmY-95; //Sendo uma particularidade semelhante ao terceiro quadrilátero (e menor) do lado esquerdo.
if (i==1){
rX = rX+65;
topY = topY+33;
btmY = btmY-33;
lX = lX+65;
}
}//for 2
}
IMAGEM DO RESULTADO:
SEGUNDA PARTE: QUADRO ANIMADO
CÓDIGO:
color [] cor = {color (255),color (163), color(255), color (163), color (255), color (163)};
float topX, lX, btmX, rX;
float topY, lY, btmY, rY;
color corbg;
int mov = 5; //Esta animação possibilita uma movimentação dos 6 quadriláteros
int movX = 0;
int movY =0;
int R,G,B; //Serão atribuídos outros valores para as cores que preencherão os quadriláteros e o plano de fundo
//Serão ativados a cada movimentação
void setup(){
size(563,563);
corbg = color (18, 24, 33); //A cor inicial dos elementos é a mesma da obra original
println("Pressione alguma tecla de seta, por favor."); //Instrução para a ativação do movimento
}
void draw(){
background(corbg);
//Atribuição de valores para o posicionamento dos 3 quadriláteros esquerdos
topX = width/2;
topY = 0;
lX = 0;
lY = height/2;
btmX = width/2;
btmY = height;
rX = 65;
rY = lY;
for (int i = 0; i<3; i++){
fill(cor[i]);
noStroke();
quad(topX+movX, topY+movY, lX+movX, lY+movY, btmX+movX, btmY+movY, rX+movX, rY+movY);
/* Dessa vez, cada posição X e Y será adicionada da variável que funcionará para
ativar o movimento. Seu valor inicial é 0 até que teclas sejam pressionadas*/
//O resto do laço funciona do mesmo jeito do quadro estático
topX = topX+33;
topY = topY+65;
lX = lX+65;
btmX = btmX+33;
btmY = btmY-65;
rX = rX+65;
if (i==1){
topX = (width/2)+33;
topY = topY+33;
btmX = topX;
btmY = btmY-33;
rX = topX-65;
lX = lX+65;
}
}//for 1
//Atribuição de valores para o posicionamento dos quadriláteros direitos
topX = width/2;
topY = 0;
lX = width-65;
lY = height/2;
btmX = width/2;
btmY = height;
rX = width;
rY = lY;
for (int i = 0; i<3; i++){
fill(cor[(i+3)]);
noStroke();
quad(topX+movX, topY+movY, lX+movX, lY+movY, btmX+movX, btmY+movY, rX+movX, rY+movY);
//Os quadriláteros esquerdo e direito se movimentarão juntos, como um único elemento visual
topY = topY+95;
rX = rX-130;
lX = lX-130;
btmY = btmY-95;
if (i==1){
rX = rX+65;
topY = topY+33;
btmY = btmY-33;
lX = lX+65;
}
}//for 2
}//draw
//CRIAÇÃO DA FUNÇÃO PARA ATIVAR O MOVIMENTO
void keyPressed(){ //O movimento e a mudança de cores são ativados por pressionamento de teclas
if (keyCode == 38){ //Tecla de seta UP
movY-=mov; //O movimento de Y fica -5 pelo funcionamento das coordenadas Y na tela, que se aproximam do 0
//quanto mais próximos do canto superior, por isso ele "sobe" ao diminuir sua posição
corbg = color(R+8,G+10,B+8); //o plano de fundo receberá cores relacionadas ao esquema de cores dos 6 quadriláteros
for (int i = 0; i<cor.length;i++){ //Aqui novas cores serão atribuídas a cada elemento do vetor cor
cor[i] = color(R,G,B);
for (int j=0; j<4;j++){ //O valores de cada cor são alterados no laço de repetição aninhado para que
R +=40; //incrementem e formem uma variação suave
G+=30;
B+=20;
//Se os quadriláteros forem movidos para cima, ganharão tons terrosos
if (R>255 || G>255 ||B>255){ //Caso o valor se aproxime de branco (valor máximo do sistema RGB)
R = 0; //seus valores retornam para o preto (valor mínimo do sistema RGB)
G = 0;
B = 0; }
}
}
}
if (keyCode==40){ //TECLA DOWN
movY+=mov;
corbg = color(R+8,G+8,B+8);
for (int i = 0; i<cor.length;i++){
cor[i] = color(R,G,B);
for (int j=0; j<4;j++){
R +=60;
G+=30;
B+=40;
//Se os quadriláteros forem movidos para baixo, ganharão tons magenta
if (R>255 || G>255 ||B>255){
R = 0;
G = 0;
B = 0; }
}
}
}
if(keyCode==39){ //TECLA RIGHT
movX+=mov;
corbg = color(R+8,G+8,B+8);
for (int i = 0; i<cor.length;i++){
cor[i] = color(R,G,B);
for (int j=0; j<4;j++){
R +=20;
G+=40;
B+=20;
//Caso sejam movidos para a direita, ganharão tons esmeralda
if (R>255 || G>255 ||B>255){
R = 0;
G = 0;
B = 0; }
}
}
}
if(keyCode==37){//TECLA LEFT
movX-=mov;
corbg = color(R+8,G+8,B+8);
for (int i = 0; i<cor.length;i++){
cor[i] = color(R,G,B);
for (int j=0; j<4;j++){
R +=60;
G+=50;
B+=10;
//Caso sejam movidos para a esquerda, ganharão tons dourados
if (R>255 || G>255 ||B>255){
R = 0;
G = 0;
B = 0; }
}
}
}
}
Imagens:
CÓDIGO DO QUADRO ESTÁTICO:
color [] cor = {color (255),color (163), color(255), color (163), color (255), color (163)};
float topX, lX, btmX, rX;
float topY, lY, btmY, rY;
color corbg;
/*
Vetor que armazena as cores de cada quadrilátero, se alternando entre cinza e branco
Variáveis que armazenarão as posições de cada vértice dos quadriláteros
Variável de cor do plano de fundo
*/
void setup(){
size(563,563);
corbg = color (18, 24, 33);
}
void draw(){
background(corbg);
/*
O valor é atribuido às variáveis antes do laço, para que o laço trabalhe
a partir dos valores iniciais e os modifique de maneira mais simples
*/
topX = width/2;
topY = 0;
lX = 0;
lY = height/2;
btmX = width/2;
btmY = height;
rX = 65;
rY = lY;
/*O primeiro laço e as primeiras atribuições, todas são para os 3 quadriláteros
do lado esquerdo*/
for (int i = 0; i<3; i++){ //laço que cria os 3 quadriláteros do lado esquerdo
fill(cor[i]);
/*A cor se altera pois o valor da variável i é igual ao índice dos elementos
do vetor que precisam ser acessados para colorir os quadriláteros*/
noStroke();
quad(topX,topY,lX,lY,btmX,btmY,rX,rY); //Em ordem anti-horária
topX = topX+33; //Os incrementos sempre tem relação com a largura do meio
topY = topY+65; //de cada quadrilátero (que é 65,7 px, aproximado para 65
lX = lX+65;
btmX = btmX+33;
btmY = btmY-65;
rX = rX+65;
if (i==1){ //Como o último quadrilátero tem uma particularidade,
topX = (width/2)+33; //Cria-se a condição para seus incrementos
topY = topY+33;
btmX = topX;
btmY = btmY-33;
rX = topX-65;
lX = lX+65;
}
}//for 1
//Atribuição de valores para os 3 quadriláteros do lado direito
topX = width/2;
topY = 0;
lX = width-65;
lY = height/2;
btmX = width/2;
btmY = height;
rX = width;
rY = lY;
for (int i = 0; i<3; i++){
fill(cor[(i+3)]);
/*Agora a variável i precisa ser adicionada de 3 para que acesse os elementos
do vetor correspondentes às cores para os quadriláteros do lado direito, que
têm ordem oposta às do lado esquerdo
*/
noStroke();
quad(topX,topY,lX,lY,btmX,btmY,rX,rY); //também em ordem anti horária
topY = topY+95; //neste caso, a particularidade maior é do segundo quadrilátero, pois sua distância
rX = rX-130; //de seu vértice direito ao vértice esquerdo do quadrilátero direito mais externo é maior que a distância
lX = lX-130; //do quadrilátero cinza do meio, o terceiro e menor, de si.
btmY = btmY-95; //Sendo uma particularidade semelhante ao terceiro quadrilátero (e menor) do lado esquerdo.
if (i==1){
rX = rX+65;
topY = topY+33;
btmY = btmY-33;
lX = lX+65;
}
}//for 2
}
IMAGEM DO RESULTADO:
SEGUNDA PARTE: QUADRO ANIMADO
CÓDIGO:
color [] cor = {color (255),color (163), color(255), color (163), color (255), color (163)};
float topX, lX, btmX, rX;
float topY, lY, btmY, rY;
color corbg;
int mov = 5; //Esta animação possibilita uma movimentação dos 6 quadriláteros
int movX = 0;
int movY =0;
int R,G,B; //Serão atribuídos outros valores para as cores que preencherão os quadriláteros e o plano de fundo
//Serão ativados a cada movimentação
void setup(){
size(563,563);
corbg = color (18, 24, 33); //A cor inicial dos elementos é a mesma da obra original
println("Pressione alguma tecla de seta, por favor."); //Instrução para a ativação do movimento
}
void draw(){
background(corbg);
//Atribuição de valores para o posicionamento dos 3 quadriláteros esquerdos
topX = width/2;
topY = 0;
lX = 0;
lY = height/2;
btmX = width/2;
btmY = height;
rX = 65;
rY = lY;
for (int i = 0; i<3; i++){
fill(cor[i]);
noStroke();
quad(topX+movX, topY+movY, lX+movX, lY+movY, btmX+movX, btmY+movY, rX+movX, rY+movY);
/* Dessa vez, cada posição X e Y será adicionada da variável que funcionará para
ativar o movimento. Seu valor inicial é 0 até que teclas sejam pressionadas*/
//O resto do laço funciona do mesmo jeito do quadro estático
topX = topX+33;
topY = topY+65;
lX = lX+65;
btmX = btmX+33;
btmY = btmY-65;
rX = rX+65;
if (i==1){
topX = (width/2)+33;
topY = topY+33;
btmX = topX;
btmY = btmY-33;
rX = topX-65;
lX = lX+65;
}
}//for 1
//Atribuição de valores para o posicionamento dos quadriláteros direitos
topX = width/2;
topY = 0;
lX = width-65;
lY = height/2;
btmX = width/2;
btmY = height;
rX = width;
rY = lY;
for (int i = 0; i<3; i++){
fill(cor[(i+3)]);
noStroke();
quad(topX+movX, topY+movY, lX+movX, lY+movY, btmX+movX, btmY+movY, rX+movX, rY+movY);
//Os quadriláteros esquerdo e direito se movimentarão juntos, como um único elemento visual
topY = topY+95;
rX = rX-130;
lX = lX-130;
btmY = btmY-95;
if (i==1){
rX = rX+65;
topY = topY+33;
btmY = btmY-33;
lX = lX+65;
}
}//for 2
}//draw
//CRIAÇÃO DA FUNÇÃO PARA ATIVAR O MOVIMENTO
void keyPressed(){ //O movimento e a mudança de cores são ativados por pressionamento de teclas
if (keyCode == 38){ //Tecla de seta UP
movY-=mov; //O movimento de Y fica -5 pelo funcionamento das coordenadas Y na tela, que se aproximam do 0
//quanto mais próximos do canto superior, por isso ele "sobe" ao diminuir sua posição
corbg = color(R+8,G+10,B+8); //o plano de fundo receberá cores relacionadas ao esquema de cores dos 6 quadriláteros
for (int i = 0; i<cor.length;i++){ //Aqui novas cores serão atribuídas a cada elemento do vetor cor
cor[i] = color(R,G,B);
for (int j=0; j<4;j++){ //O valores de cada cor são alterados no laço de repetição aninhado para que
R +=40; //incrementem e formem uma variação suave
G+=30;
B+=20;
//Se os quadriláteros forem movidos para cima, ganharão tons terrosos
if (R>255 || G>255 ||B>255){ //Caso o valor se aproxime de branco (valor máximo do sistema RGB)
R = 0; //seus valores retornam para o preto (valor mínimo do sistema RGB)
G = 0;
B = 0; }
}
}
}
if (keyCode==40){ //TECLA DOWN
movY+=mov;
corbg = color(R+8,G+8,B+8);
for (int i = 0; i<cor.length;i++){
cor[i] = color(R,G,B);
for (int j=0; j<4;j++){
R +=60;
G+=30;
B+=40;
//Se os quadriláteros forem movidos para baixo, ganharão tons magenta
if (R>255 || G>255 ||B>255){
R = 0;
G = 0;
B = 0; }
}
}
}
if(keyCode==39){ //TECLA RIGHT
movX+=mov;
corbg = color(R+8,G+8,B+8);
for (int i = 0; i<cor.length;i++){
cor[i] = color(R,G,B);
for (int j=0; j<4;j++){
R +=20;
G+=40;
B+=20;
//Caso sejam movidos para a direita, ganharão tons esmeralda
if (R>255 || G>255 ||B>255){
R = 0;
G = 0;
B = 0; }
}
}
}
if(keyCode==37){//TECLA LEFT
movX-=mov;
corbg = color(R+8,G+8,B+8);
for (int i = 0; i<cor.length;i++){
cor[i] = color(R,G,B);
for (int j=0; j<4;j++){
R +=60;
G+=50;
B+=10;
//Caso sejam movidos para a esquerda, ganharão tons dourados
if (R>255 || G>255 ||B>255){
R = 0;
G = 0;
B = 0; }
}
}
}
}
Imagens:
Comentários
Postar um comentário