Exercício Processing

 

 

 

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

No primeiro exercício pretendi criar uma imagem ilustrativa de um gato.

gato

void setup() {
size (1000, 1000);
background (40,150,180);
}
void draw() {
noStroke ();
fill (150,150,150);
triangle (500,350,650,500,350,500); //pescoço
fill (190,190,190);
triangle (675,100,675,300,550,150); //orelha d grande
triangle (325,100,325,300,450,150); //orelha e grande
fill (255,211,244);
triangle (350,150,350,300,400,169); //orelha e pequena
triangle (650,150,650,300,500,205); //orelha d pequena
fill (150,150,150);
quad (350,500,650,500,650,850,350,850); //corpo
fill (190,190,190);
quad (350,650,350,850,300,850,300,650); //perna e
quad (650,650,650,850,700,850,700,650); //perna d
fill (150,150,150);
quad (700,850,750,850,750,800,700,800); //cauda1
triangle (750,850,800,800,750,800); //cauda2
quad (800,750,850,750,850,500,800,500); //cauda3
fill (225,225,225);
quad (800,500,750,500,750,450,800,450); //cauda4
triangle (800,500,800,550,750,500); //cauda5
triangle (800,500,850,500,800,450); //cauda6
fill (150,150,150);
triangle (750,800,800,800,800,750); //cauda7
triangle (800,800,800,750,850,750); //cauda8
fill (190,190,190);
ellipse (500,300,350,350); //cabeça
fill (0,0,0);
ellipse (425,275,25,50); //olho1
ellipse (575,275,25,50); //olho2
fill (252,252,252);
ellipse (430,270,5,5); //brilho olhos
ellipse (580,270,5,5); //brilho olhos
fill (255,211,244);
triangle (475,300,525,300,500,325); //nariz
fill (0,0,0);
triangle (500,350,475,390,525,390); //boca
stroke (2);
line (600,350,750,300); //bigode
line (600,350,750,350); //bigode
line (600,350,750,400); //bigode
line (400,350,250,300); //bigode
line (400,350,250,350); //bigode
line (400,350,250,400); //bigode
noStroke ();
fill (225,225,225);
triangle (450,500,550,500,500,600); //peito
stroke (252,252,252);
line (500,600,500,850);
noStroke ();
quad (300,850,300,800,700,800,700,850); //pés
fill (0,0,0);
triangle (400,800,450,750,450,850); //peixe cabeça
stroke (2);
quad (450,798,550,798,550,802,450,802); //peixe corpo
triangle (550,800,575,760,575,835); //peixe cauda
strokeWeight (3);
line (500,775,500,825); //espinha
line (475,775,475,825); //espinha
line (525,775,525,825); //espinha
fill (252,252,252);
ellipse (425,800,10,10); //olho peixe
}

Exercício 2 – Composição em movimento

Versão 1

snitch

O exercício faz referencias à obra literária e cinematográfica Harry Potter, mais concretamente ao jogo fictício Quidditch integrante da obra.

Optei por utilizar uma imagem de fundo que representa o campo de Quidditch e representei de forma esquemática a Snitch de Ouro, através de um circulo e dois triângulos.

quidditch

 

O exercício é  interactivo: a imagem da Snitch segue o cursor do rato e quando é premido o botão esquerdo do rato, o curso repele a Snitch.

 

Execício inspirado em : http://www.openprocessing.org/sketch/140917

Imagem de fundo: http://hqwallpapers.org/harry-potter-quidditch-hogwarts-lego-wallpaper-19260/

Player p;
PImage bg;
int y;
void setup() {
  p = new Player();
  size(640, 360);
  bg = loadImage("quidditch.jpg");
}

void draw() {
  background(bg);
  p.draw();
}
 void mousePressed() {
  if (p.isRunning)
    p.isRunning = false;
  else
    p.isRunning = true;
}
 class Player {
  PVector pos, target, direction, velocity;
  boolean isRunning;
  Player() {
  direction = new PVector(0, 0);
  pos = new PVector(width/2, height/2);
  target = new PVector(mouseX, mouseY);
  velocity = new PVector(0, 0);
  }
 void draw() {
   
    update();
    fill(255, 0, 0);
    
    pushMatrix();
    
    translate(pos.x, pos.y);
  
    float dX = pos.x - target.x;
    float dY = pos.y - target.y;
    float angle = radians((atan2(dY, dX) * 180 / PI));
    rotate(angle);
    fill (255,255,255);
    triangle (-14,30,70,30,40,60);
    
    triangle (-70,30,14,30,-40,60);
    fill (#FAD60A);
    ellipse (20-20,30-0,35,35);
    popMatrix();
  }
 
  void update() {
    target.x = mouseX;
    target.y = mouseY;
    direction = PVector.sub(target, pos);
    float separation = direction.mag();
    float distance = separation;
    direction.normalize();
    direction.mult(0.5);
    PVector acceleration = direction;
 

    velocity.add(acceleration);
    velocity.limit(3);
    if (isRunning)
      pos.sub(velocity);
    else
      pos.add(velocity);
  }
}

Versão 2

Captura de tela 2014-06-01 18.12.18

Nesta versão optei por usar uma imagem da Snitch.
l_snitch01_prph_hpe3

 

Player p;
PImage bg;
PImage img;

void setup() {
  p = new Player();
  size(640, 360);
  bg = loadImage("quidditch.jpg");
  img = loadImage ("snitch.png");
}

void draw() {
  background(bg);
  p.draw();
}
 void mousePressed() {
  if (p.isRunning)
    p.isRunning = false;
  else
    p.isRunning = true;
}
 class Player {
  PVector pos, target, direction, velocity;
  boolean isRunning;
  Player() {
  direction = new PVector(0, 0);
  pos = new PVector(width/2, height/2);
  target = new PVector(mouseX, mouseY);
  velocity = new PVector(0, 0);
  }
 void draw() {
    
    update();
   
    pushMatrix();
    
    translate(pos.x, pos.y);

    image(img, -65, -40);
    
    popMatrix();
  }
 
  void update() {
    target.x = mouseX;
    target.y = mouseY;
    direction = PVector.sub(target, pos);
    float separation = direction.mag();
    float distance = separation;
    direction.normalize();
    direction.mult(0.3);
    PVector acceleration = direction;
 

    velocity.add(acceleration);
    velocity.limit(4);
    if (isRunning)
      pos.sub(velocity);
    else
      pos.add(velocity);
  }
}

 

Anúncios

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