Exercício de Códigos (processing)

Exercício I – Composição Estática

Para este exercício optei por criar uma composição abstracta, geométrica e simétrica, transmitindo a sensação de tridimensionalidade.

Em aula, apresentei à turma a minha primeira experiência representada mais abaixo; no entanto, após uma maior exploração das funcionalidades do programa Processing, acabei por desenvolver uma composição visualmente semelhante à primeira mas melhor conseguida em termos de trimidensionalidade que desejava aplicar à imagem.

A imagem de fundo do resultado final foi retirada da Internet e posteriormente cortada e alterada no Photoshop.

Captura de ecrã 2014-05-22, às 22.49.38     Captura de ecrã 2014-05-22, às 22.49.38 2

Resultado Final                                                         Imagem de fundo editada

//Para este exercício optei por criar uma composição abstracta, geométrica e simétrica, transmitindo a sensação de tridimensionalidade
//Tamanho da tela
size (700, 700);
//Imagem de fundo
PImage img = loadImage ("sea.png");
image (img, 0, 0, 700, 700);
//Círculos grandes de fundo
fill (#1A1BAD, 50);
stroke (255, 255, 255);
strokeWeight (6);
ellipse (350, 350, 590, 590);
fill (#00019B, 60);
strokeWeight (4);
ellipse (350, 350, 490, 490);
fill (#000167, 70);
strokeWeight (2);
ellipse (350, 350, 380, 380);
fill (#000032, 80);
strokeWeight (1);
ellipse (350, 350, 310, 310);
//Hexágono
fill (0, 0, 0, 30);
stroke (0, 0, 0);
strokeWeight (3);
beginShape ();
vertex (350, 110);
vertex (590, 210);
vertex (590, 490);
vertex (350, 590);
vertex (110, 490);
vertex (110, 210);
endShape (CLOSE);
//Sombras dos triângulos de baixo
strokeWeight (0);
fill (141, 3, 142);
triangle (350, 110, 590, 490, 350, 350);
fill (87, 1, 88);
triangle (350, 110, 350, 350, 110, 490);
fill (51, 0, 52);
triangle (350, 350, 590, 490, 110, 490);
//Sombras dos triângulos de cima
fill (0, 232, 242);
triangle (110, 210, 590, 210, 350, 350);
fill (2, 148, 155);
triangle (110, 210, 350, 350, 350, 590);
fill (0, 72, 75);
triangle (350, 350, 350, 590, 590, 210);
//Círculos nas arestas do hexágono
noStroke ();
fill (#981731, 80);
ellipse (350, 350, 155, 155);
fill (#FFD8D8, 80);
ellipse (350, 280, 65, 65);
fill (#981731, 80);
ellipse  (350, 210, 155, 155);
fill (#FA0D2C, 80);
ellipse (350, 490, 155, 155);
fill (#FFD8D8, 80);
ellipse (350, 420, 65, 65);
//Círculos centrais (pequenos e grandes)
fill (#7E94FF, 90);
noStroke ();
strokeWeight (2);
ellipse (350, 110, 100, 100);
strokeWeight (2);
ellipse (590, 210, 100, 100);
strokeWeight (2);
ellipse (110, 210, 100, 100);
strokeWeight (2);
ellipse (350, 590, 100, 100);
strokeWeight (2);
ellipse (590, 490, 100, 100);
strokeWeight (2);
ellipse (110, 490, 100, 100);

Captura de ecrã 2014-05-22, às 17.56.11

Primeira experiência

Exercício II – Composição Dinâmica

Para o segundo exercício, após diversas explorações das animações exemplificadas em aula, acabei por desenvolver uma animação interactiva na qual, para além de diversas linhas que surgem aleatoriamente do meio da imagem,  uma linha (com arrastamento) segue o cursor do rato também partindo do centro. Ao clicar nas teclas ‘q’, ‘w’, ‘e’, ‘r’, ‘t’ e ‘y’ aparece um triângulo ligado à linha cujas cores variam entre branco, tons de cinzento aleatórios, preto, vermelho, verde e azul (respectivamente), colorindo igualmente a elipse que se encontra centrada na imagem.

Captura de ecrã 2014-05-22, às 17.59.21        Captura de ecrã 2014-05-22, às 18.07.43

Resultado final sem interacção                                Resultado final com interacção

//Este exercício de composição dinâmica resulta da interação do observador com a animação em si; ao clicar nas teclas 'Q' 'W' 'E' 'R' 'T' 'Y', surge um triângulo que segue o cursor do rato que altera o seu preenchimento entre branco, preto, tons de cinzento, vermelho, verde e azul (respectivamente)
//Fundo e velocidade da animação
void setup() {
  size(600, 600);
  background(255);
  frameRate (20);
}
void draw() {
  //Linhas aleatórias que surgem do centro
  strokeWeight (random (5));
  stroke (random (255));
  line (300, 300, random(width), random(height));
  line (300, 300, random(width), random(height));
  line (300, 300, random(width), random(height));
  line (300, 300, random (width), random (height));
  line (300, 300, random (width), random (height));
  //linha vertical que divide a imagem e elipse no centro
  strokeWeight (7);
  line (300, 0, 300, height);
  ellipse (300, 300, 200, 200);
  //Elipses que crescem dentro da elipse no centro
   noFill();
   frameRate (60);
    rectMode(CENTER);
    float sz = frameCount % 100;
    ellipse (width/2, height/2, 100 + sz, 100 + sz);
    rectMode(CENTER);
    float st = frameCount % 50;
    ellipse (width/2, height/2, 100 + st, 100 + st);
//Linha que segue o cursor do triângulo branco
line (width/2, height/2, mouseX, mouseY);
  if (keyPressed) {
    rectMode (CENTER);
    //Triângulo branco - premir 'Q'
      if (key == 'q') {
        fill (255, 255, 255);
        triangle (mouseX, mouseY-50, mouseX+50, mouseY, mouseX-50, mouseY);
      }
  }
//Linha que segue o cursor do triângulo em tons de cinzento
line (width/2, height/2, mouseX, mouseY);
  if (keyPressed) {
    rectMode (CENTER);
    //Triângulo em tons aleatórios de cinzento - premir 'W'
      if (key == 'w') {
        fill (random (255));
        triangle (mouseX, mouseY-50, mouseX+50, mouseY, mouseX-50, mouseY);
      }
  }
//Linha que segue o cursor do triângulo preto
line (width/2, height/2, mouseX, mouseY);
  if (keyPressed) {
    rectMode (CENTER);
    //Triângulo preto - premir 'E'
      if (key == 'e') {
        fill (random (0));
        triangle (mouseX, mouseY-50, mouseX+50, mouseY, mouseX-50, mouseY);
      }
  }
//Linha que segue o cursor do triângulo vermelho
line (width/2, height/2, mouseX, mouseY);
  if (keyPressed) {
    rectMode (CENTER);
    //Triângulo vermelho - premir 'R'
      if (key == 'r') {
        fill (255, 0, 0);
        triangle (mouseX, mouseY-50, mouseX+50, mouseY, mouseX-50, mouseY);
      }
  }
//Linha que segue o cursor do triângulo verde
line (width/2, height/2, mouseX, mouseY);
  if (keyPressed) {
    rectMode (CENTER);
    //Triângulo verde - premir 'T'
      if (key == 't') {
        fill (0, 255, 0);
        triangle (mouseX, mouseY-50, mouseX+50, mouseY, mouseX-50, mouseY);
      }
  }
//Linha que segue o cursor do triângulo azul
line (width/2, height/2, mouseX, mouseY);
  if (keyPressed) {
    rectMode (CENTER);
    //Triângulo azul - premir 'Y'
      if (key == 'y') {
        fill (0, 0, 255);
       triangle (mouseX, mouseY-50, mouseX+50, mouseY, mouseX-50, mouseY);
      }
  } 
}
Anúncios

4 comments

  1. Gostei muito da tua composição estática! Fizeste uma excelente escolha de cores, uma vez que se complementam umas às outras e tornam o jogo de transparências muito interessante. As formas que aplicaste neste exercício estão dispostas de um modo muito bem pensado, sem dúvida que tornam a tua composição bastante apelativa. Bom trabalho!

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s