code

I wanted to use my first work, the vector shape which I created for this task. I also wanted to creat a game with it using of course the click of the mouse.

So it became a floppy-bird-like small game in processing. Unfortunately I didn’t have enough time to finish it completely.

 

//so this is a flappy bird-like game using the click of the mouse and my first shape

Player player= new Player(); 
boolean gameOver = false; 

float currentHeight = 500; 
PImage bg;

//this is the background image

void setup() { 
  size(500, 500);
  bg = loadImage("bg.png");
}

//drawing the shape

void draw() { 
  image(bg, 0, 0);
  color c3 = get(int(player.x), int(player.y));
   println(brightness(c3));
  
//what happanes if the circle goes out

  if (brightness(c3) < 250.0) {     
color c = color(255, 255, 255);       
fill(c);        
rect(95,85,250,20);     
c = color(87, 227, 234);       
fill(c);       
text("GAME OVER... press anything to restart", 100, 100);     
if ((keyPressed)) {        
player.x = 0;        
player.y = 230;       
player.yVel = 0;       
player.xVel = .5;     
}   

//What happenes if the mouse is being pressed      

}    
else {     
player.yVel *=0.96;      
if ((mousePressed)) {        
player.yVel-=0.2;     
}      
else {        
player.yVel+=0.1;     
}  

//defining the borders of the shape       

player.y+=player.yVel;      
player.x+=player.xVel;      
player.y = min(max(player.y,0),500);     
player.x = min(max(player.x,0),500); 

//defining what will happen if the circle leaves the shape     

if (player.y>400) { 
      gameOver = true;
    }
  }  
  player.draw();
  noStroke();
}

class Player {
  float x; 
  float y;  
  float yVel;
  float xVel; 

  Player() { 
    x = 0; 
    y = 230;
    yVel = 0;
    xVel = .5;
  }

//and the circle

  void draw() { 
    color c = color(87, 227, 234);  // Define color 'c'
    fill(c);  // Use color variable 'c' as fill color
    noStroke();
    ellipse(x, y, 20, 20);
    color c2 = color(0, 0, 0);  // Define color 'c'
    fill(c2);
    ellipse(x, y, 1, 1);
  }
}

 

text

I chose a work which has a great shape and I can use it as the base of my further work. So I wanted something not with a really serious thought or a proper meaning but with a good form.

After I found the russian doll form I knew it will be the one.

Somehow it reminded me to one of those signs on the doors, which are saying something like “Do not disturb”.

Because the objective was to create a cover for a book or an LP, I decided to use this shape as a door sign with the Arctic Monkeys album called Favourite worst nightmare.

I also wanted to leave the computer and make something analogue. So my work is a picture based work of course with some retouch and post production work. 

Exercício Código

Para a composição estática de código, tive como base uma frase de Oscar Wilde,

Football is all very well as a game for rough girls, but is hardly suitable for delicate boys.

 
PImage photo;

void setup() {
 size(400, 600);
 background(#30E364);
 photo = loadImage("conchita.png");
 
}

void draw() {
 
 image(photo, 0, 0);
 strokeWeight(5);
 stroke(#F7FFFA);
noFill();
 rect(25,25,350,550);
 fill(0,0,0);
 ellipse(200,300,5,5);
noFill();
 ellipse(200,300,80,80);
 line(25,300,370,300);
 rect(160,25,80,30);
 rect(160,545,80,30);
}


Para a composição dinâmica, criei uma animação com uma estátua grega que, com o clique do rato e movimento do mesmo, desloca, telecineticamente, um computador portátil.

Quis que a animação tivesse um carácter interactivo e que fosse colorido e dinâmico.




PImage photo;
PImage img;
float offset = 0;
float easing = 0.02;


void setup() {
 size(1000, 700);
 photo = loadImage("estatualol.png");
 img = loadImage("mac.png");
 
}

void draw() {
 if (mousePressed) {
 background ( random(600), random(600), random(600), random(600));
} 

 image(photo, 0, 0);
 frameRate(50);
 
 
 if (mousePressed) {
strokeWeight(2);
 stroke(248,255,57,90);
 line(720,250,500,180);
 line(738,250,500,160);
 image(img, 0, 0, 0, 0);
 float dx = (mouseX-img.width/2) - offset;
 offset += dx * easing; 
 image(img, offset, 0);
 
}
 
}
									

Processing

Na primeira proposta de exercício utilizando o Processing (estático) , procurei criar uma composição utilizando 4 formas básicas (círculo, rectângulo, e triângulo).

size (500, 200);
background (255, 255, 255);

stroke (41, 239, 255);
strokeWeight (3);
line (0, 0, 250, 200);
line (250, 200, 500,0);

stroke (255, 188, 41);
fill (255, 188, 41, 99);
triangle (250, 0, 125, 200, 375, 200);

stroke (41, 239, 255);
fill (41, 239, 255, 90);
triangle (0, 0, 250, 200, 500, 200);

stroke (41, 239, 255);
fill (41, 239, 255, 90);
triangle (500, 0, 0, 200, 250, 200);

strokeWeight (5);
fill (171, 229, 95, 90);
stroke (171, 229, 95);
ellipse (250, 100, 195, 195);

strokeWeight (5);
fill (229, 95, 225, 90);
stroke (240, 203, 229);
ellipse (250, 100, 100, 100);

stroke (255, 188, 41);
fill (255, 188, 41, 99);
triangle (0, 0, 0, 200, 250, 200);

stroke (255, 188, 41);
fill (255, 188, 41, 99);
triangle (500, 0, 250, 200, 500, 200);

stroke (240, 203, 229);
fill (229, 95, 225, 90);
triangle (125, 0, 0, 200, 250, 200);

strokeWeight (3);
stroke (171, 229, 95);
fill (171, 229, 95, 90);
triangle (125, 50, 62, 175, 187, 175);

strokeWeight (5);
stroke (41, 239, 255);
fill (41, 239, 255, 90);
quad (305, 200, 305, 0, 500, 0, 500, 200);

strokeWeight (3);
stroke (255, 188, 41);
fill (255, 188, 41, 99);
quad (438, 174, 438, 25, 362, 25, 362, 175);

 

Para a segunda proposta, desenvolvi o meu trabalho à volta do triângulo. Esta permite a intervenção do utilizador que, quando clica na tela, surge um triângulo cuja translação acompanha a tragectória do cursor.

void setup () {
size (800, 800);
colorMode(RGB);
}

void draw () {
if (mousePressed) {
rectMode (CENTER);
fill (random(255), random(255), random(255), 50);
triangle (mouseX, mouseY, 400, 100, 200, 700);
}
}

 

Exercício Texto – A Arte da Visão

Para a proposta do Paradoxo, conjuguei o trabalho do meu colega Gonçalo Regalado com uma citação do escritor irlandês Jonathan Swift.

Coloquei a imagem do ícone de forma a que ocupasse toda a tela, até algumas partes deste serem ocultadas, descontextualizando-o e criando uma nova leitura.

Com esta composição, pretendi criar um novo desenho a partir da criação de outra pessoa, fazendo com que o processo fosse pessoal.

 

Exercício Ícone – Passaporte

Para o primeiro exercício, da Metáfora do Ícone, decidi repensar o ícone da ferramenta existente nos computadores da Macintosh, o Assistente de Migração.

Criei, então, um passaporte com o mapa mundo pontilhado,  para representar a ferramenta que possibilita a passagem de arquivos de um computador para outro.

 

Tive como inspiração a fotografia de um passaporte:

bitmap

 

vector

 

pixel art

Optical

No primeiro exercício (estático) tentei criar uma espécie de ilusão óptica, utilizando várias linhas rectas que dão a ilusão de ser curvas e gradações e transparências de cores que transmitem também uma profundidade ilusória dentro deste objeto bidimensional.

FINAL – ESTÁTICO

 

CÓDIGO – ESTÁTICO

 void setup() {
size (300,400);
noLoop();
}

void draw() {
background(#000000);colorMode(RGB,200);

//linhas azul claro
stroke(#559CBC);
line(150, 00, 150, 400);
line(00, 200, 300, 200);

line(150, 100, 160, 200);
line(150, 110, 170, 200);
line(150, 120, 180, 200);
line(150, 130, 190, 200);
line(150, 140, 200, 200);
line(150, 150, 210, 200);
line(150, 160, 220, 200);
line(150, 170, 230, 200);
line(150, 180, 240, 200);
line(150, 190, 250, 200);

line(150, 100, 140, 200);
line(150, 110, 130, 200);
line(150, 120, 120, 200);
line(150, 130, 110, 200);
line(150, 140, 100, 200);
line(150, 150, 90, 200);
line(150, 160, 80, 200);
line(150, 170, 70, 200);
line(150, 180, 60, 200);
line(150, 190, 50, 200);
line(150, 200, 40, 200);

line(140, 200, 150, 300);
line(130, 200, 150, 290);
line(120, 200, 150, 280);
line(110, 200, 150, 270);
line(100, 200, 150, 260);
line(90, 200, 150, 250);
line(80, 200, 150, 240);
line(70, 200, 150, 230);
line(60, 200, 150, 220);
line(50, 200, 150, 210);

line(160, 200, 150, 300);
line(170, 200, 150, 290);
line(180, 200, 150, 280);
line(190, 200, 150, 270);
line(200, 200, 150, 260);
line(210, 200, 150, 250);
line(220, 200, 150, 240);
line(230, 200, 150, 230);
line(240, 200, 150, 220);
line(250, 200, 150, 210);
line(260, 200, 150, 200);

//linhas azul escuro
stroke(#08003A);
line(300, 200, 150, 0);
stroke(#0B0055);
line(290, 200, 150, 10);
stroke(#0B0055);
line(280, 200, 150, 20);
stroke(#0D0065);
line(270, 200, 150, 30);
stroke(#100077);
line(260, 200, 150, 40);
stroke(#13008A);
line(250, 200, 150, 50);
stroke(#160297);
line(240, 200, 150, 60);
stroke(#1802AB);
line(230, 200, 150, 70);
stroke(#1B02BD);
line(220, 200, 150, 80);
stroke(#1C00D3);
line(210, 200, 150, 90);

line(200, 200, 150, 100);
line(190, 200, 150, 110);
line(180, 200, 150, 120);
stroke(#2200FF);
line(170, 200, 150, 130);
line(160, 200, 150, 140);
line(150, 200, 150, 150);

//elipse
fill (#001EFF, 30);
noStroke ();
ellipse(50, 300, 300, 300); 

}

No segundo exercício (dinâmico) apoiei me não só nas ferramentas que nos propuseram em aula mas também em várias animações em processing que encontrei no site “http://www.openprocessing.org/” (os códigos originais encontram-se no link apresentado na primeira linha de código de cada uma das animações).

Procurei simular a reação da nossa pupila e mente que nos pode transportar a outras dimensões como se  entrássemos  num buraco negro.

FINAL – DINÂMICO

CÓDIGO – DINÂMICO

 

//http://www.openprocessing.org/sketch/45335


float[] ang,L,speed;
int num = 10;
 
 
float speedUP;
 
void setup(){

//alteração do tamanho de tela em "size"

    size(400,400,P2D);
    noiseSeed(19);
    ang = new float[num];
    L = new float[num];
    speed = new float[num];
     for(int i = 0 ; i < ang.length;i++){
        ang[i] = 0;
        L[i] = (200.0)/(i*4.0+1.0);
        speed[i] = 0.1-i/200.0;
    }
    noSmooth();
    background(0);
    stroke(255,10);   
    speedUP = HALF_PI * 1000.0;
}
  
void draw(){
      
    pushStyle();
        strokeWeight(10);
        stroke(0);
    fill(0,45);
    rect(0,0,width,height);
        popStyle();
     pushMatrix();
    translate(noise(frameCount/3.0)*5,noise(frameCount/3.21)*5);
     if(frameRate < 30)
    speedUP --;
    for(int q = 0;q< speedUP ;q++){
    pushMatrix();

//alteração das coordenadas que indicam o local do centro da animação em "translate"
   
    translate(width/3,height/3);
    for(int i = 0 ; i < ang.length;i++){
 
 
    translate(0,noise(i*1000.0+frameCount/33.0)*i/3.0);
 
    float l = L[i]+((noise(((frameCount+i*2000.0)/120.0 )-0.51)*(150.0+i/40.0)));
 
 
//alteração da cor em "lerpcolor"
  
    stroke(lerpColor(#845741,#FEFCA3,norm(i,ang.length,0)), (sin((i*1000.0+frameCount/4.1)/30.0)+1.0)*12.0 );
 
    ang[i]+=speed[i];  
    rotate(ang[i]);

//alteração do centro da forma em "line"
   
    line(80,100,l,0);
    translate(2,0);
 
  
    }
 
    popMatrix();
 }
     popMatrix();
 
}

Antes de chegar ao final esta foi uma das experiências que mais gostei mas não se identifica com o que eu procurava.

EXPERIÊNCIA

EXPERIÊNCIA – CÓDIGO

 

//http://www.openprocessing.org/sketch/45356


float[] ang,L,speed;
int num = 10;
 
 
float speedUP;
 
void setup(){
 
//alteração do tamanho de tela em "size"
    size(400,400,P2D);
    noiseSeed(19);
     ang = new float[num];
    L = new float[num];
    speed = new float[num];
     for(int i = 0 ; i < ang.length;i++){
        ang[i] = i;
        L[i] = (400.0)/(4.0+i/100.0);
        speed[i] = 0.1-i/(200.0);
     }
     noSmooth();
 
     background(0);
    stroke(255,100);
     
    speedUP = HALF_PI * 1000.3;
 
}
 
 
void draw(){
 
     
    pushStyle();
//alteração das linhas dando um efeito mais escuro em "strokeweight"
    strokeWeight(1500);
        stroke(0);
    fill(0,45);
        rect(0,50,width,height);
        popStyle();
 
    pushMatrix();
    translate(noise(frameCount/1.5)*5,noise(frameCount/1.21)*5);
 
 
    if(frameRate < 30)
    speedUP --;
 
    for(int q = 0;q< speedUP ;q++){
 
    pushMatrix();
    translate(width/2,height/2);
    for(int i = 0 ; i < ang.length;i++){
 
 
    translate((noise(i*14530.0+frameCount/333.17)-0.5)*500.0/(i+400.0),(noise(i*3459.9231+frameCount/330.0)-0.5)*500.0/(i+1.0));
 
    float l = L[i]+((noise(((frameCount+i*5000.0)/30.0 )-0.51)*(15.0+i/40.0)));
 
    stroke(lerpColor(#222B38,#FFF5CD,norm(i,ang.length,0)), (sin((i*3993.3+frameCount/30.131)*3.02)+1.0)*12.0 );
 
    ang[i]+=speed[i];  
    rotate(ang[i]);
//alteração em "line" criando um buraco negro no centro do circulo
    line(50,0,l,0);
    translate(l,20);
  
    }
 
    popMatrix();
 
}
     popMatrix();
  
}

 

 

BOLAS

Para este exercício, decidi fazer uma composição muito sintética e simplista.  Evidenciando os quadrados e as bolas.

 

Parado:

void setup ( ) {
size (300,300);
background (0);
stroke (255);
rect (20,20,110,110);
rect (170,170,110,110);
fill(255,0,0);
stroke (255,0,0);
ellipse (150,150,150,150);
}

 

Movimento:

 

int b;
int f;
void setup() {
size (300,300);
b=0;
f=255;
}

void draw () {
background (b);
fill(f);
ellipse(width/2,height/2,100,100);
}
void mousePressed () {
if(b==0) {
b=255;
f=0;
}
else{
b=0;
f=255;
}
if (mousePressed)
ellipseMode (CENTER);
fill(255,0,0);
ellipse(mouseX,mouseY,15,15);
}

Bitmap | Vectorial | Pixel

Trabalhei esta imagem porque gostei de como as cores condizem com a ideia de sórdido.

Bitmap |

Vectorial |

Pixel |

Cubos

Para o primeiro exercício procurei explorar o 3D para obter uma vista de um figura geométrica, o cubo.

 

 

void setup() {
size(500, 500, P3D);
noFill();
smooth();
background(#5EAFAA);
}

void draw() {
float fov = PI/3.10;
noFill();
stroke(255);
float cameraZ = (height/10.0) / tan(fov/10.0);
perspective(fov, float(width)/float(height),
cameraZ/10.0, cameraZ*15.0);

//coordenadas do cubo
translate(250, 230, 0);
//rotação
rotateX(-PI/4.5);
rotateY(PI/5);
//tamanho do cubo
box(250);
}

 

Na sequência desta experiência decidi explorar os códigos que me permitissem não só animar uma figura geométrica como criar algum tipo de interactividade com outras. Dai surgiram várias experiências das quais se destaca a seguinte:

float r;
float g;
float b;
float backgroundMousea;
float backgroundMouseb;
float backgroundMousec=67;
float locX;
float locY;

// 10000 pequenos cubos
Cube[] cubies = new Cube[10000]; 

// Cubo 
float bounds = 300;

void setup() {
  size(500, 500, P3D);

  for (int i = 0; i < cubies.length; i++) {
    // Cubies are randomly sized
    float cubieSize = random(5, 15);
    cubies[i] =  new Cube(cubieSize, cubieSize, cubieSize);
  }

}

void draw() {
//variaveis 
r=random(255);
g=random(255);
b=random(255);
//fundo
background(#5EAFAA);
  lights();

  // definir a tranlação central 
  translate(width/2, height/2, -130);

  // rodar tudo inclusive o cubo grande
  rotateX(frameCount * 0.001);
  rotateY(frameCount * 0.002);
  rotateZ(frameCount * 0.001);
  stroke(255);


  // Usar box para o cubo transparente
  noFill(); 
  box(bounds);

  // Mover e rodar Cubos
  for (Cube c : cubies) {
    c.update();
    c.display();
  }
}





// Criação do Cubo transparente 

class Cube {
  // Posição e velocidade dos vectores
  PVector position;
  PVector velocity;
  //Usar PVector para permitir a rotação 
  PVector rotation;

  // Vertices do Cubo
  PVector[] vertices = new PVector[24];
  // width, height, depth
  float w, h, d;

  // Cores das faces dos cubos (6 faces)
  color[] quadBG = new color[6];

  Cube(float w, float h, float d) {
    this.w = w;
    this.h = h;
    this.d = d;
    
    // Cores das 6 faces dos cubos
    quadBG[0] = color(#FFFFFF);
    quadBG[1] = color(#5EAFAA);
    quadBG[2] = color(#5EAFAA);
    quadBG[3] = color(#FFFFFF);
    quadBG[4] = color(#000000);
    quadBG[5] = color(#000000);
   
   
    // Começar no centro
    position = new PVector();
    // Velocidade aleatoria 
    velocity = PVector.random3D();
    // Rotação aleatoria
    rotation = new PVector(random(40, 100), random(40, 100), random(40, 100));

    // 6 quadrantes do cubo
    //front
    vertices[0] = new PVector(-w/10, -h/10, d/10);
    vertices[1] = new PVector(w/10, -h/10, d/10);
    vertices[2] = new PVector(w/10, h/10, d/10);
    vertices[3] = new PVector(-w/10, h/10, d/10);
    //left
    vertices[4] = new PVector(-w/10, -h/10, d/10);
    vertices[5] = new PVector(-w/10, -h/10, -d/10);
    vertices[6] = new PVector(-w/10, h/10, -d/10);
    vertices[7] = new PVector(-w/10, h/10, d/10);
    //right
    vertices[8] = new PVector(w/10, -h/10, d/10);
    vertices[9] = new PVector(w/10, -h/10, -d/10);
    vertices[10] = new PVector(w/10, h/10, -d/10);
    vertices[11] = new PVector(w/10, h/10, d/10);
    //back
    vertices[12] = new PVector(-w/10, -h/10, -d/10); 
    vertices[13] = new PVector(w/10, -h/10, -d/10);
    vertices[14] = new PVector(w/10, h/10, -d/10);
    vertices[15] = new PVector(-w/10, h/10, -d/10);
    //top
    vertices[16] = new PVector(-w/10, -h/10, d/10);
    vertices[17] = new PVector(-w/10, -h/10, -d/10);
    vertices[18] = new PVector(w/10, -h/10, -d/10);
    vertices[19] = new PVector(w/10, -h/10, d/10);
    //bottom
    vertices[20] = new PVector(-w/10, h/10, d/10);
    vertices[21] = new PVector(-w/10, h/10, -d/10);
    vertices[22] = new PVector(w/10, h/10, -d/10);
    vertices[23] = new PVector(w/10, h/10, d/10);
  } 


  void drawCube() {
    // desenho do cubo
    for (int i=0; i<6; i++) {
      fill(quadBG[i]);
      beginShape(QUADS);
      for (int j=0; j<4; j++) {
        vertex(vertices[j+4*i].x, vertices[j+4*i].y, vertices[j+4*i].z);
      }
      endShape();
    }
  }
  
  
 
  void display() {
    pushMatrix();
    translate(position.x, position.y, position.z);
    rotateX(frameCount*PI/rotation.x);
    rotateY(frameCount*PI/rotation.y);
    rotateZ(frameCount*PI/rotation.z);
    noStroke();
    drawCube(); // outro método
    popMatrix();
  }
}

Sessões de Pré-Avaliação

Balanço final dos conhecimentos adquiridos ao longo do semestre em sessões de pré-avaliação.

Sessão 2
26 Maio, Segunda, 9:30-14:30
09:30 Vasco Martins Casula
09:45 Tatiana São Marcos Dias
10:00 Sofia Marques Espadinha Catana Martins
10:15 Sérgio Carlos Conde Lamego
10:30 Rita de Almeida) Trindade
10:45 Ricardo Ramos de Oliveira
11:00 Cláudio André Dantas da Cruz
11:15 Pedro Miguel Coelho Moço
11:30 Mariana Santos de Azevedo
11:45 Marta Filipa Évora Fernandes
12:00 Mariana Carolina Rodrigues Romão
12:15 Maria Miguel
12:30 (Maria) Isabel Orta Oliveira de Herédia Cordovil
12:45 Maria Dias Marau Jordão
13:00 Margarida Lestra Chaves Salvador
13:15 Margarida de Sousa Morais
13:30 Mafalda Sousa Lopes de Almeida Monteiro
13:45 João de Goes Vicente
14:00 Peter Raday

Sessão 3
26 Maio, Segunda, 15:00-16:30
15:00 Lucas Alves Esteves
15:15 Lourenço Pereira Caldas Penaguião Soares
15:30 Leonor dos Santos Antunes Domingues Lopes
15:45 João Miguel Faria de Abreu
16:00 João Maria Oom Ralão Duarte
16:15 Isabel Sofia Moisão Lopes

Sessão 4
27 Maio, Terça, 17:00-18:30
17:00 Inês Maria Tomé Silva
17:15 Inês da Luz Moleiro Lourenço Branco
17:30 Hugo Abreu
17:45 Gustavo Filipe Pereira de Sousa
18:00 Gonçalo Sebastião Martins Alves Ferrera Regalado
18:15 Gabriel Filipe Duarte Gonçalves

Sessão 5
28 Maio, Quarta, 16:30-20:30
16:45  Carolina Sofia Murca Cardoso
17:00  Francisca de Almeida Botelho Roseiro
17:15  Filipe Almeida Pinto
17:30  Filipa Alexandra Teixeira Brás
17:45  Eugénia Burnay Pinto Coelho
18:00  Diogo Miguel Monteiro Alexandre
18:15  Diana Maria Silva Gomes
18:30 Diogo Guarda David Rodrigues
18:45  Daniel Alves Carvalho
19:00  Catarina Romão Coroado
19:15  Catarina Lopes Abrantes
19:30  Carolina de Assunção Mendonça
19:45 Carolina Cardoso Barbosa
20:00 Carla Maria Benevides Lima

Sessão 6
29 Maio, Quinta, 9:30-13:30
09:30 Camila Beatriz Almaguer Barros
09:45 Beatriz Matos Lourenço
10:00 António Mesquita Branquinho dos Santos
10:15 Antim Evtimov Batchev
10:30 André Filipe Baptista de Jesus
10:45 Ana Sofia Sá Costa
11:00 (Ana) Rita Santiago Corceiro
11:15  Ana Marta Pereira Moreira
11:30  Ana Filipa Ribeiro Paiva
11:45  Ana Dias Ventura
12:00  Ana Luisa de Freitas Aguiar
12:15  Ana Filipa Seixas Nascimento de Sousa
12:30  Alice Lourenço dos Reis Correia
12:45  Alice Afonso Coelho
13:00 Afonso Tavares Amaro

..………………………………………………………………………………………………

Exercício de Código

 

 

 

Para o exercício estático tentei recriar um pedal de efeitos de guitarra, o “Big Muff”, usando vários dos processos que aprendemos em aula.

 

código:

//tela
size (500, 570);
colorMode (RGB);

//caixa
stroke (110, 110, 110);

rect (64, 24, 368, 480);

//zona preta
fill (0, 0, 0);
rect (74, 254, 348, 221);

//zona do logo
noStroke();

fill (255, 255, 255);
ellipse (248.5, 250, 154, 154);

fill (240, 17, 17);
rect (74, 244, 349, 5);

fill (255, 255, 255);
ellipse (248.5, 250, 131, 131);

//letras e logo
PImage img = loadImage("muff3.png");
image (img, 65, 25, 367, 301);

//botões
stroke (110, 110, 110);
fill (0, 0, 0);
ellipse (126, 85, 60, 60);
ellipse (250, 85, 60, 60);
ellipse (371, 85, 60, 60);

//área do logo
stroke (110, 110, 110);
fill (255, 255, 255);
ellipse (250, 410, 60, 60);

fill (235, 235, 235);
ellipse (250, 410, 49, 49);

//botão
quad (225, 410, 237.5, 389, 262.5, 389, 274, 410);
quad (225, 410, 237.5, 431, 262.5, 431, 274, 410);

ellipse (250, 410, 35, 35);

//primeira linha
noStroke ();
fill (240, 17, 17);
rect (74, 146, 349, 8);

</pre>

No segundo exercício criei um “relógio psicadélico”, interactivo, que joga aleatoriamente com cores que piscam e com o clique do utilizador. (As imagens abaixo não ilustram com precisão o efeito óptico real)

código:

<pre>
//elipses que aparecem aleatoriamente
float px;
float py;
float jump = 5000;

//tela e tamanho de elipses aleatórias
void setup() {
  size (700, 700);
  frameRate (3);
  px = random (width);
  py = random (height);
}


//
void draw() {

//cor de fundo
  colorMode(RGB);
  background (random(255), random(255), random (255));
  
//relógio
  fill(random(255), random(255), random(255));
  strokeWeight(10);

  fill(random(255), random(255), random(255));
  ellipse (350, 350, 450, 450);
  fill(random(255), random(255), random(255));
  ellipse (350, 350, 300, 300);
 
//ponteiro 
  strokeWeight (random(55));
  stroke (random(255));
  line (width/2, height/2, random(width), random(height));
  
 
//clique do rato 
  if (mousePressed) {
//mudança na cor de fundo
    background (random(255));
//mudança na taxa de frames
    frameRate(50);
//elipse fixa1
    fill(random(255), random(255), random(255), 100);
    ellipse (350, 350, random(height), random(width));
    
//elipse fixa2
    noFill();
    strokeWeight(50);
    stroke (random(255), random(255), random(255));
    ellipse (350, 350, random(height), random(width));
   
//elipses aleatórias
    ellipse (random(700), random(700), random(250), random(250));
    
    float npx = constrain (px + random (-jump, jump), 0, height);
    float npy = constrain (py + random (-jump, jump), 0, width);
    
    strokeWeight(random(100));
    line (px, py, npx, npy);
    px = npx;
    py = npy;
  
    
    
  }
}

Exercício Código

Composição estática

Para este exercício decidi fazer uma composição muito simples: uma cara com dois olhos e duas pestanas e uma linha perpendicular a boca. Joguei com a dualidade no fundo, alternando as cores preto e branco no fundo e nos olhos, pois uma pessoa tem sempre dois lados, duas faces.

size (500, 400);
background (#000000);
rect (0, 0, 500, 10);
rect (0, 35, 500, 10);
rect (0, 70, 500, 10);
rect (0, 105, 500, 10);
rect (0, 145, 500, 10);
rect (0, 180, 500, 10);
rect (0, 215, 500, 10);
rect (0, 250, 500, 10);
rect (0, 285, 500, 10);
rect (0, 320, 500, 10);
rect (0, 355, 500, 10);
rect (0, 390, 500, 10);

fill (#FF170A);
ellipse(250, 200, 300, 300);
fill (#1507F0);
rect(245, 40, 10, 240);
fill (#000000);
stroke (#000000);
rect (170, 150, 10, 30);
fill (#FCFFFF);
stroke (#FCFFFF);
rect (300, 150, 10, 30);
fill (#000000);
stroke (#000000);
rect (195, 150, 10, 30);
fill (#FCFFFF);
stroke (#FCFFFF);
rect (325, 150, 10, 30);
fill (#000000);
stroke (#000000);
ellipse(190, 200, 70, 70);
fill (#FCFFFF);
stroke (#FCFFFF);
ellipse (315, 200, 70, 70);

fill (#1507F0);
stroke (#000000);
rect (200, 280, 100, 10);

fill (#000000);
stroke (#000000);
rect (170, 120, 40, 10);
fill (#FCFFFF);
stroke (#FCFFFF);
rect (300, 120, 40, 10);

 

Composição Dinâmica

Para a Composição Dinâmica decidi escolher o ficheiro “aleatoriadade” e coloquei a condição “if(moussePressed)”, o fundo ficava branco e a composição era repetida. Porém, depois de apresentar o meu trabalho fui aconselhada pelo Professor Pedro Ângelo a experimentar fazer outras mudanças. Sendo assim, decidi pôr o fundo em cor “random” com a condição anteriomente mencionada.

<pre>

float px;
float py;

float jump = 20;

void setup() {
size(300, 300);

background(255);

px = random (width);
py = random (height);
}

void draw() {
if (mousePressed) {
background( random(255), random(255), random(255), random(255));
}
float npx = constrain (px + random (-jump, jump), 0, width);
float npy = constrain (py + random (-jump, jump), 0, height);

line (px, py, npx, npy);

px = npx;
py = npy;

}

 

</pre>

Exercício de Código

Composição Estática

Para a composição estática decidi criar uma série de círculos que fizessem alvos e conjugá-los com elementos rectos, numa figura reminescente das mandalas.

size (300,300);
background (#FFAF00);

ellipseMode (CENTER);
noStroke ();
fill (#CB0000);
ellipse (150, 150, 300, 300);
noStroke ();
fill (#CB004E);
ellipse (150, 150, 250, 250);
noStroke ();
fill (#B000CB);
ellipse (150, 150, 200, 200);
noStroke ();
fill (#891683);
ellipse (150, 150, 150, 150);
noStroke ();
fill (#A50749);
ellipse (150, 150, 100, 100);
//noStroke ();
//fill (#CB0000);
//ellipse (150, 150, 50, 50);

noStroke ();
fill (#FFAF00);
ellipse (150, 12.5, 25, 25);
ellipse (150,287.5, 25, 25);
ellipse (12.5, 150, 25, 25);
ellipse (287.5,150, 25, 25);

ellipse (70, 70, 25, 25);
ellipse (230,230, 25, 25);
ellipse (70, 230, 25, 25);
ellipse (230,70, 25, 25);

ellipse (150, 62.5, 25, 25);
ellipse (150,237.5, 25, 25);
ellipse (62.5, 150, 25, 25);
ellipse (237.5,150, 25, 25);

ellipse (106, 106, 25, 25);
ellipse (194, 194, 25, 25);
ellipse (106, 194, 25, 25);
ellipse (194, 106, 25, 25);

ellipse (150, 112.5, 25, 25);
ellipse (150, 187.5, 25, 25);
ellipse (112.5, 150, 25, 25);
ellipse (187.5,150, 25, 25);

noStroke ();
fill (#FFAF00);
ellipse (150, 150, 25, 25);

stroke (#7ECB77);
noFill ();
triangle (150, 0, 0, 150, 150, 300);
triangle (300, 150, 150, 300, 150, 0);
triangle (0, 150, 150, 0, 300, 150);

stroke (#7ECB77);
noFill ();
ellipse (150, 150, 300, 300);
stroke (#FFDD17);
noFill ();
ellipse (150, 150, 200, 200);
ellipse (150, 150, 100, 100);

stroke (#CB0000);
noFill ();
ellipse (25, 25, 50, 50);
ellipse (274, 274, 50, 50);
ellipse (25, 274, 50, 50);
ellipse (274, 25, 50, 50);

ellipse (25, 25, 40, 40);
ellipse (274, 274, 40, 40);
ellipse (25, 274, 40, 40);
ellipse (274, 25, 40, 40);

ellipse (25, 25, 25, 25);
ellipse (274, 274, 25, 25);
ellipse (25, 274, 25, 25);
ellipse (274, 25, 25, 25);

noStroke ();
fill (#CB0000);
ellipse (25, 25, 12.5, 12.5);
ellipse (274, 274, 12.5, 12.5);
ellipse (25, 274, 12.5, 12.5);
ellipse (274, 25, 12.5, 12.5);

noStroke ();
fill (#CB0000);
ellipse (150, 150, 12.5, 12.5);

Animação

Para a animação, decidi fazer algo em que usasse a função de aleatoriedade e interacção. O programa cria elipses de tamanhos e cores aleatórios e durante o tempo que se clicar no rato, o fundo muda de cor muito rapidamente, causando um glitch.

//quando se clica no rato, o fundo muda de cor.
    //e se manter pressionado, o fundo continua a mudar de cor,
    //causando um glitch.

void setup () {
  size (500, 500);
  background (#C96378);
  
}

void draw () {
  

    if (mousePressed) {
  background ( random(255), random(255), random(255), random(255));
  
   } else {
   noFill();
  stroke ( random(255), random(255), random(255), random(255)); 
  ellipse (random (500), random (500), random (500), random (500) );
   }
}

 

Exercício Código

Reflexão 

//o meu conceito apresenta que o mundo que nós vemos, uma bola bonita e simples. Mas esse ponto de vista engana-se a todos, é como não julgar a capa pelo livro.

//baseei-me nestes exemplos que foi criado pelo Simon Greenwold (Reflection), fiz algumas mudanças nesse exemplo: tirei a luz e cortei a base para esquadrar a bola.

void setup() {
size(500, 500, P3D);
noStroke();
colorMode(RGB, 1);
fill(0.4);
}

void draw() {
background(0);
translate(width / 2, height / 2);
directionalLight(0.8, 0.8, 0.8, 0, 0, -1);
float s = mouseX / float(width);
specular(s, s, s);
sphere(150);
}

 

 

RotatingArcs

//o meu conceito transmite que o mundo pode ser simples mas é complexo, cheia de surpresas e mistério. Nós, humanos, vivemos no mundo que parece simples como a Terra mas quando aproximamos mais e, de repente, é grande e vasto para explorarmos. Parecia que não conseguimos ver onde está o fim. É como o mundo nos enganasse.

//baseei-me nestes exemplos que foi criado pelo Marius Watz (o RotatingArcs). E fiz algumas mudanças: mudei a velocidade e cortei as bases para esquadrar à volta dos arcos. Graças à ele, pude mostrar o que o mundo é feito: uma caixa de surpresas.

float sinLUT[];
float cosLUT[];
float SINCOS_PRECISION=1.0;
int SINCOS_LENGTH= int((360.0/SINCOS_PRECISION));

boolean dosave=false;
int num;
float pt[];
int style[];
void setup() {
size(780, 650, P3D);
background(255);

// Fill the tables
sinLUT=new float[SINCOS_LENGTH];
cosLUT=new float[SINCOS_LENGTH];
for (int i = 0; i < SINCOS_LENGTH; i++) {
sinLUT[i]= (float)Math.sin(i*DEG_TO_RAD*SINCOS_PRECISION);
cosLUT[i]= (float)Math.cos(i*DEG_TO_RAD*SINCOS_PRECISION);
}

num = 150;
pt = new float[6*num];
style = new int[2*num];

// Set up arc shapes
int index=0;
float prob;
for (int i=0; i<num; i++) {
pt[index++] = random(PI*2);
pt[index++] = random(PI*2);

pt[index++] = random(60,80);
if(random(100)>90) pt[index]=(int)random(8,27)*10;

pt[index++] = int(random(2,50)*5);

pt[index++] = random(4,32);
if(random(100)>90) pt[index]=random(40,60);

pt[index++] = radians(random(5,30))/1;

prob = random(100);
if(prob<30) style[i*2]=colorBlended(random(1), 255,0,100, 255,0,0, 210);
else if(prob<70) style[i*2]=colorBlended(random(1), 0,153,500, 170,225,255, 210);
else if(prob<90) style[i*2]=colorBlended(random(1), 200,255,0, 150,255,0, 210);
else style[i*2]=color(255,255,255, 220);

if(prob<50) style[i*2]=colorBlended(random(1), 200,255,0, 50,120,0, 210);
else if(prob<90) style[i*2]=colorBlended(random(1), 255,100,0, 255,255,0, 210);
else style[i*2]=color(255,255,255, 220);

style[i*2+1]=(int)(random(100))%3;
}
}

void draw() {

background(0);

int index=0;
translate(width/2, height/2, 0);
rotateX(PI/6);
rotateY(PI/6);

for (int i = 0; i < num; i++) {
pushMatrix();

rotateX(pt[index++]);
rotateY(pt[index++]);

if(style[i*2+1]==0) {
stroke(style[i*2]);
noFill();
strokeWeight(1);
arcLine(0,0, pt[index++],pt[index++],pt[index++]);
}
else if(style[i*2+1]==1) {
fill(style[i*2]);
noStroke();
arcLineBars(0,0, pt[index++],pt[index++],pt[index++]);
}
else {
fill(style[i*2]);
noStroke();
arc(0,0, pt[index++],pt[index++],pt[index++]);
}

pt[index-5]+=pt[index]/10;
pt[index-4]+=pt[index++]/20;

popMatrix();
}
}

int colorBlended(float fract,
float r, float g, float b,
float r2, float g2, float b2, float a) {

r2 = (r2 – r);
g2 = (g2 – g);
b2 = (b2 – b);
return color(r + r2 * fract, g + g2 * fract, b + b2 * fract, a);
}

void arcLine(float x,float y,float deg,float rad,float w) {
int a=(int)(min (deg/SINCOS_PRECISION,SINCOS_LENGTH-1));
int numlines=(int)(w/2);

for (int j=0; j<numlines; j++) {
beginShape();
for (int i=0; i<a; i++) {
vertex(cosLUT[i]*rad+x,sinLUT[i]*rad+y);
}
endShape();
rad += 2;
}
}

void arcLineBars(float x,float y,float deg,float rad,float w) {
int a = int((min (deg/SINCOS_PRECISION,SINCOS_LENGTH-1)));
a /= 2;

beginShape(QUADS);
for (int i=0; i<a; i+=4) {
vertex(cosLUT[i]*(rad)+x,sinLUT[i]*(rad)+y);
vertex(cosLUT[i]*(rad+w)+x,sinLUT[i]*(rad+w)+y);
vertex(cosLUT[i+2]*(rad+w)+x,sinLUT[i+2]*(rad+w)+y);
vertex(cosLUT[i+2]*(rad)+x,sinLUT[i+2]*(rad)+y);
}
endShape();
}

void arc(float x,float y,float deg,float rad,float w) {
int a = int(min (deg/SINCOS_PRECISION,SINCOS_LENGTH-1));
beginShape(QUAD_STRIP);
for (int i = 0; i < a; i++) {
vertex(cosLUT[i]*(rad)+x,sinLUT[i]*(rad)+y);
vertex(cosLUT[i]*(rad+w)+x,sinLUT[i]*(rad+w)+y);
}
endShape();
}

Exercício de Código – Sofia Espadinha

Para o primeiro exercício, o estático, criei uma imagem que incorpora-se elementos e códigos que aprendi nas aulas e quiz experimentar também “brincar” com a tipografia e ladainhas do país. No segundo exercício tive um pouco mais de dificuldade mas gosto do resultado, apesar de não ter conseguido criar um efeito que pretendia. O exercício interativo funciona com o rato. Ao clicar no botão esquerdo os quadrados mudam de cor contrastando com os outros.

Estático

size (300, 300);
background (83, 177, 143);
line (50, 0, 50, 300);
line (120, 0, 120, 300);
line (200, 0, 200, 300);
line (250, 0, 250, 300);
line (300, 0, 300, 500);
ellipseMode (CENTER);
noStroke ();
fill (198, 231, 219);
ellipse (width/2, height/2, 50, 50);
noStroke ();
ellipse (width/4, height/4, 80, 80);
noStroke ();
ellipse (width/1, height/1, 40, 40);
noStroke ();
fill (71, 110, 96);
ellipse (width/6, height/6, 50, 50);
textSize (30);
text ("Quem conta", 100, 100);
textSize (25);
text ("Um conto", 150, 150);
textSize (20);
text ("Acrescenta", 180, 180);
textSize (40);
fill (255, 255, 255);
text ("Um ponto", 60, 250);



 

Dinâmico

float px[];
float py[];

int num_particles = 20;

void setup() {
size(300, 300);

background(0);

px = new float[num_particles];
py = new float[num_particles];

for (int i = 0; i < num_particles; i++) {
px[i] = random (width);
py[i] = random (height);
}
}

void draw() {
background(135, 137, 206);
for (int i = 0; i < num_particles; i = i+1) {
px[i] = constrain (px[i] + random (-30, 30), 10, width);
py[i] = constrain (py[i] + random (-30, 30), 10, height);

ellipse (px[i], py[i], 10, 10);
fill(0);
rectMode(CENTER);
float sz = frameCount % 50;
rect(width/2, height/2, 20 + sz, 20 + sz);
if (mousePressed) {
fill(222, 109, 178);
rectMode(CENTER);
rect(mouseX, mouseY, 30, 30);
}

}
}

 

 

Exercício de Código

 

 

 

 

Estático

 

void setup () {;

size (900, 600);

background (249, 250, 15);

}
void draw () {;

fill (237, 12, 87);

ellipse (450, 300, 400, 400);
stroke (0);

strokeWeight (20);
line (390, 300, 390, 200);

line (510, 300, 510, 200);

arc (450, 350, 200, 200, 0, PI);

//line (350, 350, 550, 350);
fill (5, 240, 218);

ellipse (50, 50, 50, 50);

//fill (247, 12, 87);

ellipse (150, 50, 50, 50);

ellipse (250, 50, 50, 50);

ellipse (650, 50, 50, 50);

ellipse (750, 50, 50, 50);

ellipse (850, 50, 50, 50);

ellipse (350, 50, 30, 30);

ellipse (450, 50, 30, 30);

ellipse (550, 50, 30, 30);
ellipse (50, 550, 50, 50);

ellipse (150, 550, 50, 50);

ellipse (250, 550, 50, 50);

ellipse (650, 550, 50, 50);

ellipse (750, 550, 50, 50);

ellipse (850, 550, 50, 50);

ellipse (350, 550, 30, 30);

ellipse (450, 550, 30, 30);

ellipse (550, 550, 30, 30);
}

 

 

 

 

Dinâmico

 

void setup () {;

background (0, 0, 0);

size (900, 600);

frameRate (200);

}
void draw () {;

fill (random (255), random (0), random (0));

rectMode(CENTER);

float sz = (frameCount % 5000) / 300.0;

translate (width/2, height/2);

rotate (PI/2 * sz);

ellipse (100, 100, 100 * sz, 100 * sz);
fill (random (0), random (255), random (0));

rectMode (CORNER);

translate (39, 39);

rotate (PI * sz);

ellipse (75, 75, 75 * sz, 75 * sz);
fill (random (0), random (0), random (255));

rectMode (CORNER);

translate (20, 20);

rotate (TWO_PI * sz);

ellipse (50, 50, 50 * sz, 50 * sz);
fill (random (255), random (255), random (255));

rectMode (CENTER);

translate (300, 200);

rotate (TWO_PI * sz);

ellipse (40, 40, 20 * sz, 20 * sz);

}

 

 

 

Processing

Para a imagem estática decidi fazer uma reprodução da capa do álbum Dark Side of the Moon dos Pink Floyd.

void setup() {
size(800, 505);
noLoop();
smooth();
}

void draw() {
background(0);
colorMode(RGB);
color a = color(255, 255, 255);//branco
color b = color(255, 29, 30);//vermelho
color c = color(255, 171, 29);//laranja
color d = color(255, 252, 30);//amarelo
color e = color(60, 200, 30);//verde
color f = color(31, 150, 193);//azul
color g = color(91, 54, 185);//roxo

//raio de luz
stroke(a);
strokeWeight(3);
line(0, 318, 340, 225);
//raios de luz
//vermelho
stroke(b);
strokeWeight(10);
line(460, 206, 800, 259);
//laranja
stroke(c);
strokeWeight(10);
line(466, 216, 800, 268);
//amarelo
stroke(d);
strokeWeight(10);
line(470, 226, 800, 277);
//verde
stroke(e);
strokeWeight(10);
line(477, 236, 800, 286);
//azul
stroke(f);
strokeWeight(10);
line(483, 246, 800, 295);
//roxo
stroke(g);
strokeWeight(10);
line(489, 256, 800, 304);
//triangulo
noFill();
stroke(a);
strokeWeight(10);
triangle(265, 355, 543, 355, 402, 118);
}

 

Para a composição dinâmica criei uma composição interactiva psicadélica fazendo uso dos exemplos disponibilizados.

// Variável para guardar o tempo em que a ultima frame foi criada
long last_update = 0;
 
// Variável para guardar o tempo da animação
long anim_time = 0;
 
// tempo total de animação (em milissegundos)
long max_anim_time = 100;

void setup() {
  size(1280, 720);
  // tempo desde que o sketch começou;
 last_update = millis();
}
  
void draw() {
  colorMode(RGB);
  background(random(0, 255), random(0, 255), random (0, 255));
    // tempo actual
   long now = millis();
    // tempo desde a ultima frame
     long delta = millis() - last_update;
       last_update = now;
       // objecto que pulsa a cada 2 segundos
       anim_time = (anim_time + delta) % max_anim_time;
     //cor da elipse(amarelo)
       fill(255, 255, 0);
       //elipse
       ellipse (width/2, height/2, anim_time * 7, anim_time * 7);
   //função interativa com o rato, criação de 3 elipses quando o rato é pressiondo
   if (mousePressed){
     //cor da elipse
     fill(255, 0, 255);
     //elipse posicionada aleatoriamente
     ellipse (random(1280), random(720), anim_time * 2, anim_time * 2);
     //cor da elipse
     fill(0, 255, 0);
     //elipse posicionada aleatoriamente
     ellipse (random(1280), random(720), anim_time * 2, anim_time * 2);
    //cor da elipse
     fill(0, 255, 255);
     //elipse posicionada aleatoriamente
     ellipse (random(1280), random(720), anim_time * 2, anim_time * 2);
   }
} 

 

 

Exercício de código

Composição estática:

 

 

 

//Para a composição estática criei uma imagem com alguma simplicidade
//de forma a experimentar as bases de código tendo por base a ideia de simetreia
//nao esquecendo a parte estética. Surpreendentemente, obtive uma
//composição não só visualmente apelativa mas tambem que transmite
//uma certa ilusão óptica.

size (500,500);
background (#0B1B43);
fill (#F7F007);
ellipse( 250,250,450,450);
fill (#0B1B43);
ellipse (250,250, 425,425);
fill (#F7F007);
ellipse( 250,250,375,375);
fill (#0B1B43);
ellipse (250,250,325,325);

fill (#FFFFFF);
ellipse (375,250,25,25);
fill (#FFFFFF);
ellipse (250,375,25,25);
fill (#FFFFFF);
ellipse (125,250,25,25);
fill (#FFFFFF);
ellipse (250,125,25,25);
fill (#FFFFFF);
ellipse (162.5,162.5,25,25);
fill (#FFFFFF);
ellipse (337.5,337.5,25,25);
fill (#FFFFFF);
ellipse (337.5,162.5,25,25);
fill (#FFFFFF);
ellipse (162.5,337.5,25,25);

stroke (255);
strokeWeight (5);
line (375,250,250,375);
stroke (255);
strokeWeight (5);
line (375,250,125,250);
stroke (255);
strokeWeight (5);
line (375,250,250,125);
stroke (255);
strokeWeight (5);
line (375,250,162.5,162.5);
stroke (255);
strokeWeight (5);
line (375,250,337.5,337.5);
stroke (255);
strokeWeight (5);
line (375,250,337.5,162.5);
stroke (255);
strokeWeight (5);
line (375,250,162.5,337.5);

stroke (255);
strokeWeight (5);
line (250,375,125,250);
stroke (255);
strokeWeight (5);
line (250,375,250,125);
stroke (255);
strokeWeight (5);
line (250,375,162.5,162.5);
stroke (255);
strokeWeight (5);
line (250,375,337.5,337.5);
stroke (255);
strokeWeight (5);
line (250,375,337.5,162.5);
stroke (255);
strokeWeight (5);
line (250,375,162.5,337.5);

stroke (255);
strokeWeight (5);
line (125,250,250,125);
stroke (255);
strokeWeight (5);
line (125,250,162.5,162.5);
stroke (255);
strokeWeight (5);
line (125,250,337.5,162.5);
stroke (255);
strokeWeight (5);
line (125,250,162.5,337.5);

stroke (255);
strokeWeight (5);
line (250,125,162.5,162.5);
stroke (255);
strokeWeight (5);
line (250,125,337.5,162.5);
stroke (255);
strokeWeight (5);
line (250,125,162.5,337.5);

stroke (255);
strokeWeight (5);
line (162.5,162.5,337.5,162.5);
stroke (255);
strokeWeight (5);
line (162.5,162.5,162.5,337.5);

stroke (255);
strokeWeight (5);
line (337.5,162.5,162.5,337.5);

stroke (255);
strokeWeight (5);
line (337.5,337.5,162.5,337.5);
stroke (255);
strokeWeight (5);
line (337.5,337.5,125,250);
stroke (255);
strokeWeight (5);
line (337.5,337.5,162.5,162.5);
stroke (255);
strokeWeight (5);
line (337.5,337.5,250,125);
stroke (255);
strokeWeight (5);
line (337.5,337.5,337.5,162.5);

 

Composição Dinâmica:

 

 

 

 

 

 

 

 

 

 

 

 
//para o exercicio de composição dinâmica parti do trabalho de John Baldessari
//que é possivel vizulisar no seguinte link: https://www.youtube.com/watch?v=MOF3qhM6vIA
//A animação consiste num texto com um fundo com cores a alterar
//rapidamente de forma aleatória acompanhado com o mesmo tipo de
//efeito no texto. A simplicidade do trabalho é propositada,
//no seguimento do trabalho de John Baldessari

PFont f;  
void setup (){
  size (500,500);
  frameRate (70);
f = createFont("Arial",300,true);
}
void draw() {
  background (random (256), random (256), random (256));
fill(51);
  textAlign(CENTER);
  textFont(f,40);               
  fill(random (256), random (256), random (256));  
  text("I AM MAKING #ART",250,250);  
  }

EXERCÍCIO DE CÓDIGO

Estático

size(500,400); 
background(#000000);
stroke(#FFFFFF);
line (0,0,400,500);
line (0,0,300,500);
line (0,0,500,500);
line (0,0,500,400);
line (0,0,100,500);
line (0,0,200,500);
stroke(0);
fill(#F0BDBA,65);
ellipse (200,200,170,170); //lua
stroke(#D68E8A);
fill(#F59B97,20);
ellipse (230,170,60,60); //cratera da lua
stroke(#C48B88);
fill(#C48B88);
ellipse (230,170,25,25); //bolinha dentro picotcha
stroke(#747579);
fill(#D7D8DE);
size(500,400); 
stroke (0);
fill(#C43114);
rect(260,110,15,15);
stroke (0);
fill(#F0A7E8);
rect(300,80,20,20);
stroke (0);
fill(#A7C6F0);
rect(330,40,25,25);
stroke (0);
fill(#AFF0A7);
rect(380,30,30,30);
//fundo giro
stroke(#FFFFFF);
line(500,-80,330,400);
line(500,-60,310,400);
line(500,-40,290,400);
line(500,-20,270,400);
line(500,0,250,400);
line(500,20,230,400);
line(500,40,210,400);
line(500,60,190,400);
line(500,80,170,400);
line(500,100,150,400);
line(500,120,130,400);
line(500,140,110,400);
line(500,160,90,400);
line(500,180,70,400);
line(500,200,50,400);
line(500,220,30,400);
line(500,240,10,400);
line(500,260,-10,400);
line(500,280,-30,400);
line(500,300,-50,400);
line(500,320,-70,400);

 

Dinamico

O conceito para este trabalho explorar elementos visuais relacionados com a cor e com a combinação de várias cores permitindo ao espectador visualizar que cores cruzam melhor.

 

O código para fazer o fundo  dinamico em que alterei alguns dados é este:

int x,y,i,w=512;

void setup(){

for(i=0;++i<w*w;)set(i%w,i/w,-1^r(1<<24));}

void draw(){

for(i=0;++i<w;){x=y;y=r(w);

set(x+r(3)-1,y+r(3)-1,get(x,y,r(99),r(99)));}}

int r(int a){return int(random(a));}

http://www.openprocessing.org/sketch/3694

int x,y,i,w=800;
void setup() {
  size(600, 600);
  frameRate(20);
  background(0);
  for(i=0;++i<w*w;)set(i%w,i/w,-1^r(1<<100));//codigo a derreter pt.1
}
void draw() {
  for(i=0;++i<w;){x=y;y=r(w); //codigo a derreter pt.2
set(x+r(3)-1,y+r(3)-1,get(x,y,r(99),r(99)));} //codigo a derreter pt.3
  noStroke();
  fill(random(256), random(256), random(256)); //quadrados
  rect(500, 500, random(600), random(600));
  rect(20, 20, 20, 20);
  fill(random(256), random(256), random(256));
  rect(70, 70, 30, 30);
  fill(random(256), random(256), random(256));
  rect(120, 120, 60, 60);
  fill(random(256), random(256), random(256));
  rect(160, 160, 90, 90);
  line(1, 1, random(600), random(600));
   fill(random(256), random(256), random(256));
  rect(245, 245, 120, 120);
  stroke(random(256), random(256), random(256));
   line(1, 1, random(600), random(600));
}
int r(int a){return int(random(a));} //codigo a derreter pt.4

 

Exercícios de código/processing: dando os primeiros passos

Para o primeiro exercício fiz uma composição muito simples, com formas básicas e jogando com cores e transparências. Vejo o resultado como podendo fazer parte dalgum tipo de sensibilização para o perigo de brincar com fósforos…

No segundo exercício (dinâmico) re-utilizei código de dois exemplos, um retirado do site oficial do processing e o outro constando nos exemplos que nos foram disponibilizados aqui no blogue. A ideia central consistiu na tentativa de imitação da visão dum explorador que, com a sua lanterna, explora uma construção soterrada e cheia de bicharada…

A imagem original  – a “construção soterrada” – é esta aqui:

EXERCÍCIO ESTÁTICO

//exercicio simples, com formas basicas e gradação de tons.
//tamanho da tela e cor de fundo:
size(430,400);
background (40,0,100);
//estrutura dos montes (esquerda, centro, direita):
noStroke();
fill(150,55,155);
ellipse(0,730,900,900);
noStroke();
fill(150,55,155,127); //opacidade 50%
ellipse(200,690,900,900);
stroke(50);
fill(170,55,155);
ellipse(400,670,900,900);
//estrutura pau do fosforo (3 linhas):
stroke(0,0,255);
strokeWeight(20);
line(50,100,270,320);
stroke(0,0,205);
strokeWeight(15);
line(55,105,270,320);
stroke(0,0,155);
strokeWeight(5);
line(60,110,270,320);
//estrutura cabeça do fosforo (3 elipses/circunferencias):
noStroke();
fill(50,255,0);
ellipse(50,100,50,50);
noStroke();
fill(30,205,0);
ellipse(50,100,40,40);
noStroke();
fill(150,205,55);
ellipse(50,100,30,30);
//estrutura da chama (5 triangulos);
//valores de opacidade aproximados, excepto nos 100%:
fill(255,50,0); //opacidade 100%
triangle(120,110,350,60,350,160);
fill(255,50,0,191); //opacidade 75% 
triangle(130,120,365,70,370,170);
fill(255,50,0,127); //opacidade 50%
triangle(140,130,385,80,395,180);
fill(255,50,0,63); //opacidade 25%
triangle(150,140,405,90,420,190);
fill(255,50,0,31); //opacidade 12%
triangle(160,150,425,100,445,200);

EXERCÍCIO DINÂMICO

//este exercicio reutilizou codigo de dois exemplo, alterando parametros;
//para o foco de luz:
//http://www.processing.org/examples/brightness.html;
//para as particulas ("mosquitos"):
//http://void.io/static/exemplos_animacao_processing.zip, exercicio de nome "ex_09_interacao";

PImage img; //para a imagem;
float px[]; //para as particulas
float py[]; //para as particulas
int num_particles = 10000; //para as particulas

void setup() {
  size(1000, 655);
  frameRate(30);
  img = loadImage("interaccao5.png");  
  //proximo bloco faz setup do foco de luz:
  img.loadPixels();
  loadPixels();
  //proximo bloco faz setup das particulas:
  px = new float[num_particles];
  py = new float[num_particles];
    for (int i = 0; i < num_particles; i++) {
      px[i] = random (width);
      py[i] = random (height);
    }
}
void draw() { 
  //proximo bloco desenha o foco de luz, com rgb completo:
  for (int x = 0; x < img.width; x++) {
    for (int y = 0; y < img.height; y++ ) {
      // Calculate the 1D location from a 2D grid
      int loc = x + y*img.width;
      // Get the R,G,B values from image
      float r,g,b;
      r = red (img.pixels[loc]);
      g = green (img.pixels[loc]);
      b = blue (img.pixels[loc]);
      // Calculate an amount to change brightness based on proximity to the mouse
      float maxdist = 100;//dist(0,0,width,height);
      float d = dist(x, y, mouseX, mouseY);
      float adjustbrightness = 191*(maxdist-d)/maxdist; //luminosidade ajustada para 75%
      r += adjustbrightness;
      g += adjustbrightness;
      b += adjustbrightness;
      // Constrain RGB to make sure they are within 0-255 color range
      r = constrain(r, 0, 255);
      g = constrain(g, 0, 255);
      b = constrain(b, 0, 255);
      // Make a new color and set pixel in the window
      color c = color(r, g, b);
      //color c = color(r);
      pixels[y*width + x] = c;
    }
  }
  updatePixels();
  //proximo bloco desenha as particulas
  for (int i = 0; i < num_particles; i = i+1) {
        px[i] = constrain (px[i] + random (-25, 25), 0, width);
        py[i] = constrain (py[i] + random (-25, 25), 0, height);        
        if (dist (px[i], py[i], mouseX, mouseY) < 30) { //distancia a que as particulas "fogem" do rato
            float vx = (px[i] - mouseX);
            float vy = (py[i] - mouseY);
            px[i] = px[i] + vx;
            py[i] = py[i] + vy;
        }
        fill (0,127); //opacidade das particulas a 50%
        noStroke(); 
        ellipse (px[i], py[i], 5, 5); //tamanho das particulas
  }          
}

EXERCÍCIOS DE CODIGO

Para esta primeira parte do trabalho desenvolvi vários exercícios mas para não sobrecarregar o post vou só apresentar o código de Processing da  primeira. O código das outras encontra-se na pasta partilhada da disciplina. – Composição estática:

size (500, 500);
background (188,242,245);

//és tao linda como o sol
fill (245, 225, 0);
stroke (255, 183, 26);
strokeWeight (3);
ellipse (500, 0, 250, 250);

// chutas raios de sol
stroke (255, 183, 26);
line (350, 20, 300, 20);
line (360, 50, 310, 60);
line (370, 80, 330, 100);
line (390, 110, 350, 140);
line (420, 140, 390, 180);
line (450, 160, 440, 210);
line (480, 170, 480, 220);

//nuvens de algodão
fill (252, 252, 252);
stroke  (252);
//nuvemzona
ellipse (50, 100, 80, 80);
ellipse (100, 100, 100, 100);
ellipse (150, 100, 100, 120);
ellipse (200, 100, 100, 100);
ellipse (250, 100, 80, 80);
//nuvenzinha
ellipse (220, 200, 20, 20);
ellipse (240, 200, 30, 30);
ellipse (260, 200, 30, 40);
ellipse (280, 200, 30, 30);
ellipse (300, 200, 20, 20);

//chão que fofinho
fill (111, 219, 66);
stroke (94, 188, 55);
strokeWeight (3);
rect (0, 350, 500, 350);

//casita dos tres porquinhos
//paredes
fill (255, 252, 152);
stroke (214, 210, 106);
rect (50, 250, 200, 200);
//chamine
fill (230);
stroke (200);
rect (70, 120, 40, 130); 
//telhado
fill (255, 0, 0);
stroke (147, 0, 0);
triangle (50, 250, 150, 150, 250, 250);
//porta
fill (165, 83, 20);
stroke (93, 48, 13);
rect (70, 350, 50, 100);
//maçaneta
fill (245, 225, 0);
stroke (255, 183, 26);
ellipse (110, 400, 10, 10);
//janela
fill (250, 250, 250);
stroke (0,0,0);
rect (150, 300, 80, 80);
line (190, 300, 190, 380);
line (150, 340, 230, 340);

//maldita arvore
//tronco
fill (165, 83, 20);
stroke (93, 48, 13);
rect (340, 250, 20, 200);
//folhas
fill (46, 183, 37);
stroke (24, 108, 19);
ellipse (350, 200, 170, 170);
ellipse (390, 250, 120, 120);
ellipse (300, 250, 100, 100);

Para a segunda parte fiz também dois exercícios mas irei apenas postar o que ainda pedia a existência de alguma interactividade. O outro encontra-se também na pasta partilhada da disciplina – Composição dinâmica: 

float decay = 5;
int value = 255;
ArrayList circles = new ArrayList();

void setup() {  
    size(500, 500); 
    background(0);
    frameRate (50);
    smooth();
  }

void draw() {
  background (0);  
  for (int i=0; i<circles.size(); i++) {
    ExpandingCircle ec = (ExpandingCircle) circles.get(i);
    ec.update();
    ec.display();
    if (ec.transparency = 20 && transparency > 0) { transparency--; }
  }
 
  void display() {
//para que não tenha preenchimento
    noFill ();
    ellipseMode (CENTER);
//para que a cor mude de forma aleatória entre todas as cores existentes
    stroke (random(255), random(255), random(255), transparency);
//para que a apressura do círculo mude aleatoriamente entre 0 e 20
    strokeWeight (random (20)); 
    ellipse(x,y,radius,radius);
    
  }
}
//PAra que quando clicarmos num botao do rato apareça um círculo
void mousePressed() {
  if (mouseButton == RIGHT) { circles.add(new ExpandingCircle(mouseX,mouseY,false));
  } else { circles.add(new ExpandingCircle(mouseX,mouseY,true)); }
}
//Ao clicarmos espaço os círculos desaparecem e voltamos a ter uma tela limpa
void keyPressed() {
  if (key == ' ') { circles.clear(); }
}

Exercícios de Código

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

Para as composições estáticas criei formas simples, utilizando transparências e introduzindo uma imagem no segundo exemplo.

size (200, 200);
background (5, 137, 250);
fill (255);
noStroke ();
ellipse (42, 30, 22, 24);
ellipse (38, 8, 35, 35);
ellipse (28, 15, 25, 30);
ellipse (10, 10, 40, 30);
fill (121, 71, 23);
quad (30, 30, 55, 30, 55, 70, 30, 70);
fill (250, 5, 26);
triangle (100, 0, 0, 100, 100, 100);
triangle (100, 0, 100, 100, 200, 100);
fill (250, 222, 5);
quad (0, 100, 200, 100, 220, 200, 0, 200);
fill (121, 71, 23);
quad (80, 140, 120, 140, 120, 200, 80, 200);
fill (222, 25, 245);
ellipse (85, 175, 3, 3);
strokeWeight (4);
stroke (121, 71, 23);
fill (112, 217, 247);
quad (25, 140, 70, 140, 70, 160, 25, 160);
quad (130, 140, 175, 140, 175, 160, 130, 160);

noStroke ();
fill (10, 129, 29);
ellipse (15, 200, 40, 25);
ellipse (28, 200, 30, 28);
ellipse (35, 200, 40, 24);
ellipse (50, 200, 30, 34);
ellipse (150, 200, 30, 35);
ellipse (164, 200, 30, 25);
ellipse (190, 200, 40, 36);
fill (232, 89, 142);
ellipse (6, 193, 3, 3);
ellipse (12, 196, 4, 4);
ellipse (17, 192, 3, 3);
ellipse (25, 192, 3, 3);
ellipse (29, 195, 3, 3);
ellipse (38, 193, 4, 4);
ellipse (47, 194, 3, 3);
ellipse (55, 192, 3, 3);
ellipse (147, 193, 3, 3);
ellipse (155, 190, 4, 4);
ellipse (160, 195, 3, 3);
ellipse (170, 193, 3, 3);
ellipse (175, 194, 4, 4);
ellipse (184, 198, 3, 3);
ellipse (188, 189, 4, 4);
ellipse (193, 191, 3, 3);
ellipse (198, 190, 3, 3);

 

size (400, 400);
background (255);
stroke (232, 47, 47);
strokeWeight(3);
fill (32, 90, 245, 60);
rect (200, 200, 198, 198);
fill (32, 245, 97, 60);
rect (0, 0, 200, 200);
fill (245, 174, 32, 60);
rect (100, 100, 200, 200);
fill (255, 248, 23, 60);
rect (0, 200, 198, 198);
fill (212, 23, 255, 60);
rect (200, 0, 200, 200);
line (200, 0, 400, 0);
line (398, 0, 398, 200);

PImage img =
loadImage ("yin yang.gif");
image (img, 100, 100, 200, 200);

 

Exercício 2 – Composição Dinâmica:

Para a primeira composição dinâmica utilizei os códigos do exemplo "Loop", que fui buscar ao site do Processig, e alterei-o de modo a obter não só uma linha recta mas várias, movendo-se a diferentes velocidades, sobre um fundo que vai mudando de cor aleatoriamente.

Já na segunda composição utilizei o exemplo "onion skin" mas alterei-o de forma a fazer o quadrado girar em várias cores, adicionando várias elipses a aumentar de tamanho por cima.

                              

 

float x = 100;
float y = 100;
float a = 100;
float b = 100;
float c = 100;
float d = 100;
float e = 100;
float f = 100;
float g = 100;

void setup () {
size (1000, 600);
strokeWeight (3);
background (0);
frameRate (100);
}

void draw () {
background (random (255), random (255), random (255));
x = x - 5;
if (x < 0) {
x = height;
}
y = y - 8;
if (y < 0) {
y = height;
}
a = a - 7;
if (a < 0) {
a = height;
}
b = b - 9;
if (b < 0) {
b = height;
}
c = c - 1;
if (c < 0) {
c = height;
}
d = d - 2;
if (d < 0) {
d = height;
}
e = e - 4;
if (e < 0) {
e = height;
}
f = f - 7;
if (f < 0) {
f = height;
}
g = g - 6;
if (g < 0) {
g = height;
}

stroke (0, 0, 255);
line (0, x, width, x);
stroke (255, 0, 0);
line (width, y, 0, y);
stroke (201, 8, 155);
line (0, a, width, a);
stroke (255, 243, 8);
line (0, b, width, b);
stroke (255, 157, 8);
line (0, c, width, c);
stroke (8, 255, 174);
line (0, d, width, d);
stroke (255, 8, 210);
line (0, e, width, e);
stroke (255);
line (0, f, width, f);
stroke (178, 172, 177);
line (0, g, width, g);
}

 

                                   

void setup() {
size(500, 500);
background(0);
frameRate(70);
}

void draw() {
fill(random (255), random (255), random (255));
stroke(255);
strokeWeight(4);
rectMode(200);
float sz = (frameCount % 100) / 50.0;
translate (width/2, height/2);
rotate (TWO_PI * sz);
rect (0, 0, 300 * sz, 300 * sz);
fill (0);
ellipse (0, 0, 400 * sz, 400 * sz);
fill (255);
ellipse (0, 0, 370 * sz, 370 * sz);
fill (0);
ellipse (0, 0, 350 * sz, 350 * sz);
fill (255);
ellipse (0, 0, 320 * sz, 320 * sz);
fill (0);
ellipse (0, 0, 300 * sz, 300 * sz);
fill (255);
ellipse (0, 0, 270 * sz, 270 * sz);
fill (0);
ellipse (0, 0, 250 * sz, 250 * sz);
fill (255);
ellipse (0, 0, 220 * sz, 220 * sz);
fill (0);
ellipse (0, 0, 200 * sz, 200 * sz);
fill (255);
ellipse (0, 0, 170 * sz, 170 * sz);
fill (0);
ellipse (0, 0, 150 * sz, 150 * sz);
fill (255);
ellipse (0, 0, 120 * sz, 120 * sz);
fill (0);
ellipse (0, 0, 100 * sz, 100 * sz);
fill (255);
ellipse (0, 0, 70 * sz, 70 * sz);
fill (0);
ellipse (0, 0, 50 * sz, 50 * sz);
fill (255);
ellipse (0, 0, 20 * sz, 20 * sz);
fill (0);
ellipse (0, 0, 0 * sz, 0 * sz);

}

EXERCÍCIO DE CÓDIGO

Para este projeto, desenvolvi as composições estática e dinâmica utilizando o Processing e as suas funções, aprendidas em aula.

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

Para a composição estática optei por criar uma forma em 3D, visto que queria explorar a construção de formas, tendo utilizado também a introdução de imagem, como se a girafa estivesse a vigiar ou espreitar.

//Comecei por estipular o tamanho da tela e a cor do fundo
size(500,500);
background (#EA6161);

//String s = ("I'm Watching you");

//Usei o nostroke, para evitar os contornos das figuras

noStroke ();

//Escrevo as cores pretendidas e depois escolho as coordenadas para o primeiro triângulo

fill (201,181,181);
triangle (100,200,150,150,200,200);

//Este segundo triângulo corresponde ao do primeiro plano

fill (255,255,255);
triangle (135,175,185,125,235,175);

//As seguintes linhas correspondem às formas por trás da imagem da girafa

line (100,200, 135,175);
line (150,150, 185,125);
line (200,200, 235,175);

//Este rectângulo corresponde ao rectângulo superior, cujo preenchimento é feito pelo "fill" e o rectângulo é construído através do "quad"
fill (201,181,181);
quad (100,200, 150,150,185,125,135,175);

//Este segundo rectângulo corresponde ao rectângulo inferior
fill (162,148,148);
quad (100,200, 135,175, 235,175, 200,200);
line (0, 500, 500,0); 

//Aqui utilizei o "nostroke" para retirar os contornos e o rectângulo corresponde ao grande rectângulo branco
noStroke();
fill (255,255,255);
quad (0, 500, 500, 0, 100,500, 500, 100);

//Aqui construí o triângulo inferior através do "triangle"
noStroke ();
fill (201,181,181);
triangle (0,500,276,279, 100,500);

//Aqui, o triângulo superior, através de "triangle" também.
noStroke ();
fill (201,181,181);
triangle (277, 278, 500,0, 500,100);

//Agora, o grande rectângulo cinzento, através do "quad"
fill (162,148,148);
quad (100,500, 500,100, 500,200,200, 500);

//E por fim, o triângulo por detrás da girafa
fill (85,77,77);
triangle (200,500, 500,200, 500,500);

//Inserir imagem

PImage img = loadImage ("6.jpg");
image (img, 300, 200, 500, 500);

 

Exercício 2 – Composição Dinâmica:

    

Para a composição dinâmica, baseei-me num dos exemplos apresentados, tendo acrescentado mais formas para criar um efeito crescente, como se fosse transbordar do ecrã. Utilizei também códigos para alterar as cores das bolinhas quando clicamos nas teclas, daí ter colocado três imagens, para ilustrar a mudança de cor.

//Comecei por colocar a duração da minha animação

long last_update = 0;
long anim_time = 0;
long max_anim_time = 8000;

int rectWidth;

 //depois por colocar o tamanho da tela e a cor do fundo
void setup() {  
    size(500, 500); 
    background(245,108,22);
    last_update = millis();
     rectWidth = width/4;
} 
 
void draw() {
    background(245,108,22);
    long now = millis();
    long delta = millis() - last_update;
    
    last_update = now;
    
//Aqui coloquei as coordenadas das elipses com os respetivos tempos
    anim_time = (anim_time + delta) % max_anim_time;
    ellipse (width/495, height/495, anim_time/40, anim_time/40);
    ellipse (width/5, height/5, anim_time / 50, anim_time / 50);
 
    ellipse (width/2, height/2, anim_time/20, anim_time/20);
    ellipse (width/1, height/1, anim_time/10, anim_time/10);
}

//E por fim utilizei este código para mudar de cor das elipses quando o "espectador toca nas teclas do teclado

void keyPressed() {
  int keyIndex = -1;
  if (key >= 'A' && key = 'a' && key <= 'z') {
    keyIndex = key - 'a';
  }
  if (keyIndex == -1) {
    background(0);
  } else { 
    // It's a letter key, fill a rectangle
    fill(millis() % 255);
    float x = map(keyIndex, 0, 25, 0, width - rectWidth);
    rect(x, 0, rectWidth, height);
  }
}

 

Exercícios de Código

Imagem

size(800, 800);
background(75);

//Layout

fill (250, 201, 93);

beginShape ();

vertex (150, 440);
vertex (160, 420);
vertex (155, 170);
vertex (160, 50);
vertex (170, 25);
vertex (190, 30);
vertex (215, 70);
vertex (240, 170);
vertex (245, 320);
vertex (250, 300);
vertex (275, 295);
vertex (300, 290);
vertex (350, 300);
vertex (360, 300);
vertex (395, 290);
vertex (440, 300);
vertex (450, 315);
vertex (450, 330);
vertex (520, 360);
vertex (530, 480);
vertex (520, 520);
vertex (525, 595);
vertex (500, 650);
vertex (450, 660);
vertex (400, 675);
vertex (375, 660);
vertex (350, 650);
vertex (300, 670);
vertex (250, 675);
vertex (200, 675);
vertex (150, 650);
vertex (130, 600);
vertex (125, 550);
vertex (100, 500);
vertex (110, 480);

endShape (CLOSE);

//Thumb
line (150, 450, 350, 450);
line (170, 550, 250, 550);
line (350, 450, 350, 490);
line (350, 490, 250, 550);
line (300, 520, 350, 600);

//Fingers
line (260, 440, 250, 320);
line (340, 448, 350, 320);
line (450, 450, 450, 320);
line (350, 510, 410, 500);
line (410, 500, 450, 450);

 

Animação

int circleX;
int circleY;
int directionX = 2;

void setup()
{
size(200, 100);

circleX = width/2;
circleY = height/2;
}

void draw()
{
background(0);
fill(255, 10, 10);
ellipse(circleX, circleY, 100, 100);

if( circleX > width || circleX < 0){
directionX = -1 * directionX;
}
circleX = circleX + directionX;
}

 

Exercícios de Código

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

 

Após alguma exploração das funcionalidades do programa apresentado, criei esta composição com base em ideias de equilíbrio/desequilíbrio e ao mesmo tempo harmonia. Tentei usar diversas figuras geométricas e opções de cor dinâmicas.

Códigos:

 

//tamanho da tela
size (600, 600);
// cor da tela
colorMode (RGB, 100);
background (#5AA798);

//circulos dos cantos
fill (#4D253D, 100);
stroke (0, 0, 0);
strokeWeight (0);
ellipse (0, 0, 150, 150);
ellipse (600, 600, 150, 150);
ellipse (600, 0, 150, 150);
ellipse (0, 600, 150, 150);
//hexagono base central
fill (0, 0, 0, 30);
stroke (0, 0, 0);
strokeWeight (0);
beginShape ();
vertex (300, 60);
vertex (540, 160);
vertex (540, 440);
vertex (300, 540);
vertex (60, 440);
vertex (60, 160);
endShape (CLOSE);

//hexagonos diagonal
fill (#275A50, 30);
stroke (0, 0, 0);
strokeWeight (0);
beginShape ();
vertex (55, -5);
vertex (115, 20);
vertex (115, 90);
vertex (55, 115);
vertex (-5, 90);
vertex (-5, 20);
endShape (CLOSE);

fill (#275A50, 30);
stroke (0, 0, 0);
strokeWeight (0);
beginShape ();
vertex (75, 15);
vertex (135, 40);
vertex (135, 110);
vertex (75, 135);
vertex (15, 110);
vertex (15, 40);
endShape (CLOSE);

fill (#275A50, 30);
stroke (0, 0, 0);
strokeWeight (0);
beginShape ();
vertex (150, 30);
vertex (270, 80);
vertex (270, 220);
vertex (150, 270);
vertex (30, 220);
vertex (30, 80);
endShape (CLOSE);

fill (#275A51, 30);
stroke (0, 0, 0);
strokeWeight (0);
beginShape ();
vertex (250, 10);
vertex (490,110 );
vertex (490, 390);
vertex (250, 490);
vertex (10, 390);
vertex (10, 110);
endShape (CLOSE);

fill (#275A53, 30);
stroke (0, 0, 0);
strokeWeight (0);
beginShape ();
vertex (175, 55);
vertex (295, 105);
vertex (295, 245);
vertex (175, 295);
vertex (55, 245);
vertex (55, 105);
endShape (CLOSE);

fill (#275A52, 30);
stroke (0, 0, 0);
strokeWeight (0);
beginShape ();
vertex (350, 110);
vertex (590, 210);
vertex (590, 490);
vertex (350, 590);
vertex (110, 490);
vertex (110, 210);
endShape (CLOSE);

fill (#275A52, 50);
stroke (0, 0, 0);
strokeWeight (0);
beginShape ();
vertex (600, 220);
vertex (1180, 420);
vertex (1180, 980);
vertex (700, 1180);
vertex (220, 980);
vertex (220, 420);
endShape (CLOSE);
//circulo do centro
fill (#45CEB4, 10);
ellipse (300, 300, 150, 150);
fill (#4D253D);
ellipse (300, 300, 40, 40);

//triangulos centro
stroke (#4D253D);
strokeWeight (1);
noFill ();
triangle (300, 0, 0, 300, 300, 600);
triangle (600, 300, 300, 600, 300, 0);
triangle (0, 300, 300, 0, 600, 300);

// cruzamento de linhas
stroke(#4D253D);
strokeWeight (2);
line(600,80,-330,600);
line(600,60,-310,600);
line(600,40,-290,600);
line(600,20,-270,600);
line(600,0,-250,600);
line(600,-20,-230,600);
line(600,-40,-210,600);
line(600,-60,-190,600);
line(600,-80,-170,600);
line(600,-100,-150,600);
line(600,-120,-130,600);
line(600,-140,-110,600);
line(600,-160,-90,600);
line(600,-180,-70,600);
line(600,-200,-50,600);
line(600,-220,-30,600);
line(600,-240,-10,600);
line(600,-260,10,600);
line(600,-280,30,600);
line(600,-300,50,600);
line(600,-320,70,600);

//linhas cruzadas
strokeWeight (1);
line (0, 0, 600, 600);
line (600, 0, 0, 600);

 

 

 

Exercício 2.
Composição Dinâmica 

 

 

A composição dinâmica que criei é animada no sentido em que os quadrados organizados numa linha vertical se movem, da esquerda para a direita consecutivamente em loop. Mas também interactiva pois, como ilustra a segunda imagem, a cor de fundo é modificada aquando o clique do rato, ou seja, quando este é premido, surge um quadrado no centro que cresce e volta a diminuir, igualmente sem parar, desde que o rato esteja premido, modificando toda a composição.

Códigos:

 

// posição inicial
float x = 0;
float y = 0;

// posição final
float end_x = 610;
float end_y = 150;
// vector de deslocamento
float vx= 5;
float vy= 1;

void setup() {
size(620, 620);
}

void draw() {

background(#5AA798);
fill (random (250),60);
rect (0 ,0, 620, 620);
fill (random (150), 60);
rect (50, 50, 520,520);
fill (random (50),60);
rect (100, 100, 420,420);
fill (random (0), 60);
rect (150, 150, 320, 320);

// aplicar vector de deslocamento
x = x + vx;
y = y + vy;

fill(0);
rect(x, y, 20, 20);

if (dist (x,y, end_x, end_y) < 5)
x = 0;
y = 150;

rect(x, y, 20, 20);

if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 200;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 250;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 300;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 350;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 400;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 450;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 450;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 500;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 100;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 50;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 550;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 00;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 600;

// posição inicial
float x = 0;
float y = 10;

// posição final
float end_x = 610;
float end_y = 150;

// vector de deslocamento
float vx = 0;
float vy = 590;

 

// aplicar vector de deslocamento
x = x + vx;
y = y + vy;

fill(0);
rect(x, y, 20, 20);

if (dist (x,y, end_x, end_y) < 5)
x = 0;
y = 150;

rect(x, y, 20, 20);

if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 200;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 250;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 300;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 350;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 400;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 450;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 450;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 500;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 100;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 50;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 550;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 00;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 600;

fill(0);
rect(x, y, 20, 20);

if (dist (x,y, end_x, end_y) < 5)
x = 0;
y = 150;

rect(x, y, 20, 20);

if (dist (x,y, end_x, end_y) < 5)
x = 50;
y = 200;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 100;
y = 250;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 150;
y = 350;

rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 200;
y = 400;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 250;
y = 450;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 300;
y = 450;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 350;
y = 500;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 400;
y = 100;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 550;
y = 50;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 600;
y = 550;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 650;
y = 00;
rect(x, y, 20, 20);
if (dist (x,y, end_x, end_y) < 5)
x = 700;
y = 600;

if (mousePressed) {
frameRate (60);
float sz = frameCount % 100;
quad (260-sz, 260-sz, 360+sz, 260-sz, 360+sz, 360+sz, 260-sz, 360+sz);

}
}

 

EXERCÍCIO DE CÓDIGOS

COMPOSIÇÃO ESTÁTICA

Como primeira experiência no programa Processing, quis criar uma composição equilibrada, jogar com elementos geométricos e com funcionalidades de cor e transparências. Achei interessante como consegui criar uma terceira cor apenas na junção de duas escolhidas inicialmente e como isso influenciou positivamente o meu trabalho, concedendo o tal equilíbrio cromático.

 

 

Código:

background (#010005);
size (600, 600);

// triangulos azul

fill (#2703FF, 120);
noStroke ();
triangle (0, 0, 300, 0, 300, 600);
fill (#2CBFE5, 120);
noStroke();
triangle (600, 0, 300, 0, 300, 600);

fill (#2703FF, 120);
noStroke ();
triangle (300, 0, 600, 600, 300, 600);
fill (#2CBFE5, 120);
noStroke();
triangle (300, 0, 300, 600, 0, 600);



// triangulos laranja
fill (#E88121, 120);
noStroke ();
triangle (0, 0, 600, 300, 0, 300);
fill (#E8B483, 120);
noStroke();
triangle (0, 600, 600, 300, 0, 300);

fill (#E88121, 120);
noStroke ();
triangle (600, 0, 0, 300, 600, 300);
fill (#E8B483, 120);
noStroke();
triangle (600, 600, 600, 300, 0, 300);

// círculo central

fill (#B9EDFF);
ellipse (300, 300, 120, 120);
fill(#2CBFE5);
ellipse (300, 300, 110, 110);
fill (#2703FF);
ellipse (300, 300, 100, 100);

fill (#FFFFFF);
triangle (300, 265, 270, 323, 332, 323);

 

 

COMPOSIÇÃO DINÂMICA

A composição dinâmica que apresento foi criada com base na aleatoriedade que achei interessante explorar porque criava uma verdadeira animação apoiada na espontaneidade e imprevisibilidade, o que faz com que nunca estejamos à espera das linhas que vão surgindo. Para além deste desafio, achei interessante explorar a interacção espectador/animação através do ‘clique’. O triângulo é um elemento de que gosto especialmente e por isso aliei-o à cor vermelha que traduz expressividade e contraste em relação aos tons cinzentos base das linhas anteriores.

 

 

 

 

Código:

float px;
float py;
 
float jump = 200;
 
void setup() {  
    size(1000, 500); 
    
    
    px = random (width);
    py = random (height);
} 

void draw() {
    float npx = constrain (px + random (-jump, jump), 0, width);
    float npy = constrain (py + random (-jump, jump), 0, height);
    stroke (random (255));
    strokeWeight (random (20));
    line (px, py, npx, npy);
    
    px = npx;
    py = npy;

   if (mousePressed) {
    rectMode (CENTER);
    fill(#CB110A, 40);
    stroke (255);
   triangle (mouseX, mouseY-100, mouseX+100, mouseY, mouseX-100, mouseY);
  }
}

 

 

EXERCÍCIO DE CÓDIGOS

Para a composição estática procurei explorar um relógio de Sol. Um relógio de sol mede a passagem do tempo pela observação da posição do Sol. Desde os tempos remotos os homens egípcios e babilônicos, ao observar o Sol, perceberam que este provocava a sombra dos objetos. Ao fazer estas observações notaram que ao longo do dia o tamanho destas sombras variavam. O homem primitivo, primeiramente, usou sua própria sombra para estimar as horas (sombras moventes). Logo depois viu que podia, através de uma vareta fincada no chão na posição vertical, fazer estas mesmas estimativas. Estava criado o pai de todos os relógios de Sol, o famoso Gnômon. As rectas oblíquas que partem do mesmo ponto são os raios de Sol e a linha recta com um círculo representa a vareta.

COMPOSIÇÃO ESTÁTICA

 

Código:

 
//cor e tamanho do fundo
background(#0F0C03);
size(800, 350);
//cor de fundo
stroke(#53CEC3);
strokeWeight(3);  
fill (#53CEC3, 70);
//linhas rectas oblíquas
line (800,0,800,800);
line (800,0,700,800);
line (800,0,600,800);
line (800,0,500,800);
line (800,0,400,800);
line (800,0,300,800);
line (800,0,200,800);
line (800,0,100,800);
line (800,0,0,800);
line (0,0,800,800);
line (0,0,700,800);
line (0,0,600,800);
line (0,0,500,800);
line (0,0,400,800);
line (0,0,300,800);
line (0,0,200,800);
line (0,0,100,800);
line (0,0,00,800);
line (800,800,0,800);
line (800,800,700,800);
line (800,800,600,800);
line (800,800,500,800);
line (800,800,400,800);
line (800,800,300,800);
line (800,800,200,800);
line (800,800,100,800);
line (800,800,0,800);
line (0,800,800,800);
line (0,800,700,800);
line (0,800,600,800);
line (0,800,500,800);
line (0,800,400,800);
line (0,800,300,800);
line (0,800,200,800);
line (0,800,100,800);
line (0,800,00,800);
//elipse 
ellipse (400, 200, 100, 100);
//linha que 'agarra' a elipse 
line (400, 0, 400, 150);

 

COMPOSIÇÃO DINÂMICA

Para a composição dinâmica fiz uso dos exemplos disponibilizados, sem ter algo em concreto. Foi um resultado das experiências que fiz.

 

 

 

Código:

//posição das partículas
float px[];
float py[];
 
int num_particles = 200;
 
void setup() {  
  //tamanho da tela
    size(800, 300); 
    // cor da tela
    background(#FFDB4B);
    //paticulas
   
    px = new float[num_particles];
    py = new float[num_particles];
    
    for (int i = 0; i < num_particles; i++) {
        px[i] = random (width);
        py[i] = random (height);
    }
} 
//tamanho e velocidade das partículas
void draw() {
   frameRate (70);
   fill (random (255), 15);
    rect (0, 0, 800, 300);
   
    for (int i = 0; i < num_particles; i = i+1) {
        px[i] = constrain (px[i] + random (-5, 5), 0, width);
        py[i] = constrain (py[i] + random (-5, 5), 0, height);
        
        if (dist (px[i], py[i], mouseX, mouseY) < 70) {
            float vx = (px[i] - mouseX);
            float vy = (py[i] - mouseY);
            
            px[i] = px[i] + vx;
            py[i] = py[i] + vy;
        }
        
        //localização da elipse
 
        ellipse (px[i], py[i], 5, 5);
    }
}

Simplicidade d’Inverno

//A geometria, abstracção e acaso do floco de neve e da tempestade d'Inverno. Num estudo intensivo na tentativa de aprendizagem e habituação ao sistema de coordenadas acabei por usar tudo o que aprendi nesta construção abstracta, que partiu de uma ideia figurativa.

size (450,450);
background (170);

int d = 70;
int p1 = d;
int p2 = p1+d;
int p3 = p2+d;
int p4 = p3+d;


stroke(255);
strokeWeight (7);
point(p1, p1);
point(p1, p3); 
point(p2, p4);
point(p3, p1); 
point(p4, p2);
point(p4, p4);

stroke (255, 100);
strokeWeight (7);
line (0, 0, 400, 400);
line (0, 400, 400, 0);
noFill ();
triangle ( 200, 200, 200, 100, 165, 0);
triangle ( 200, 200, 300, 150, 60, 30);
triangle ( 200, 200, 200, 126, 12, 45);
triangle ( 200, 200, 300, 350, 400, 320);
triangle ( 200, 200, 350, 250, 123, 156);

stroke (255, 100);
strokeWeight (1);
fill (#0AFA4C);
triangle (200, 200, 24, 250, 100, 250);
triangle (200, 200, 95, 250, 95, 400);

stroke (255);
strokeWeight (7);
fill (#29ED5E);
rect (25,250, 70, 150);
fill (#B00FD1);
rect (300, 60, 70, 70);

//A tela inicial está totalmente branca. Apenas com a interacção observador, com o rato, este começa a fazer uma carreira de círculos semi transparentes a cores fortuitas. O observador começa a aperceber-se que o seu desenho/rasto está a ser impetuosamente apagado por linhas fortes, quebradas. É uma batalha contra a tecnologia na tentativa do Homem deixar a sua marca mas eventualmente, aquando a desistência do observador, a tela volta novamente ao seu estado inicial.


int num = 10;
int range = 100;

float[] ax = new float[num];
float[] ay = new float[num]; 


void setup() 
{
  background(255);
  size(300, 300);
  for(int i = 0; i < num; i++) {
    ax[i] = width/2;
    ay[i] = height/2;
  }
  frameRate(30);
}

void draw() 
{
  for(int i = 1; i < num; i++) {
    ax[i-1] = ax[i];
    ay[i-1] = ay[i];
  }


  ax[num-1] += random(-range, range);
  ay[num-1] += random(-range, range);


  ax[num-1] = constrain(ax[num-1], 0, width);
  ay[num-1] = constrain(ay[num-1], 0, height);
  

  for(int i=1; i<num; i++) {    
    float val = float(i)/num * 204.0 + 51;
    stroke(255);
    line(ax[i-1], ay[i-1], ax[i], ay[i]);
 }
 
 variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
 if (mousePressed) {
 fill(random(256), random (256) , random (256), 50);
 } else {
 fill(random(256), random (256) , random (256), 50);}}

 void variableEllipse(int x, int y, int px, int py) {
 float speed = abs(x-px) + abs(y-py);
 stroke(speed);
 strokeWeight (25);
 fill(random(256), random (256) , random (256), 100);
 ellipse(x, y, speed, speed);
 
}

 

Exercícios de Código

Exercício 1: Imagem Fixa

size(300,650);
background(49,9,121);

noStroke();
fill(224,5,122,30);

rect(0,0,300,50);
rect(0,0,300,100);
rect(0,0,300,150);
rect(0,0,300,200);
rect(0,0,300,250);
rect(0,0,300,300);
rect(0,0,300,350);
rect(0,0,300,400);
rect(0,0,300,450);
rect(0,0,300,500);
rect(0,0,300,550);
rect(0,0,300,600);

noFill();
stroke(255);
strokeWeight(3);

line(300,0, 0,650);

ellipse(150,550, 150,150);

ellipse(50,325, 20,20);
ellipse(250,325, 40,40);

noStroke();
fill(255,255,255,50);

ellipse(150,100, 150,150);
ellipse(150,100, 100,100);
ellipse(150,100, 50,50);

arc(150,550, 50,50, 0,TWO_PI);
arc(150,550, 100,100, 1,TWO_PI);
arc(150,550, 150,150, 2,TWO_PI);
arc(150,550, 200,200, 3,TWO_PI);
arc(150,550, 250,250, 4,TWO_PI);

ellipse(50,325, 40,40);
ellipse(250,325, 20,20);

stroke(255,255,255,50);
strokeWeight(3);

line(0,0, 150,325);

Exercício 2: Animação

void setup(){
 
  size(300,200);
  background(77,53,34);
  frameRate(40);
  
  noStroke();
  
  noStroke();
  fill(5,5,5,50);

  beginShape();
  
  vertex(0,0);
  vertex(300,0);
  vertex(300,13);
  vertex(13,13);
  vertex(13,193);
  vertex(300,193);
  vertex(300,200);
  vertex(0,200);

  endShape(CLOSE);
  
  fill(5,5,5,50);

  beginShape();
  
  vertex(230,20);
  vertex(290,20);
  vertex(290,180);
  vertex(230,180);
  vertex(233,183);
  vertex(293,183);
  vertex(293,23);
  
  endShape(CLOSE);

  fill(90,76,50);

  beginShape();
  
  vertex(230,20);
  vertex(290,20);
  vertex(290,180);
  vertex(230,180);
  
  endShape(CLOSE);
  
  noStroke();
  fill(20);

  beginShape();
  
  vertex(0,0);
  vertex(300,0);
  vertex(300,10);
  vertex(10,10);
  vertex(10,190);
  vertex(300,190);
  vertex(300,200);
  vertex(0,200);

  endShape(CLOSE);
  
  fill(150);
  
  beginShape();
  
  vertex(240,40);
  vertex(240,80);
  vertex(253,80);
  vertex(253,40);
  
  endShape(CLOSE);
  
  strokeWeight(2);
  stroke(15);
  
  line(273,150, 273,110);
  
  noStroke();
  fill(30);
  
  ellipse(265,149, 4,4);
  ellipse(265,140, 3,3);
  ellipse(265,132, 4,4);
  ellipse(265,122, 3,3);
  ellipse(265,112, 4,4);
  
  strokeWeight(2);
  stroke(5,5,5,50);
  
  line(271,149, 271,109);
  
  noStroke();
  
  fill(5,5,5,50);
  rect(266,122 ,19,10);
  
  fill(13);
  rect(265,121 ,17,8);
  
  fill(5,5,5,50);

  ellipse(110,110,170,170);

  fill(80);

  ellipse(100,100,170,170);
  
  fill(50);

  ellipse(100,100,160,160);
  
  fill(20);

  ellipse(100,100,150,150);
  
  fill(25);

  ellipse(100,100,135,135);
  
  fill(20);

  ellipse(100,100,130,130);
  
  fill(25);

  ellipse(100,100,120,120);
  
  fill(20);

  ellipse(100,100,115,115);
  
  fill(25);

  ellipse(100,100,105,105);
  
  fill(20);

  ellipse(100,100,100,100);
  
  fill(20,20,66);

  ellipse(100,100,75,75);

  fill(80);

  ellipse(197,35,40,40);

  fill(50);

  ellipse(197,35,30,30);

  fill(5,5,5,50);

  ellipse(202,40,25,25);

  fill(5,5,5,50);
  stroke(5,5,5,50);
  strokeWeight(8);

  line(202,40,180,105);

  strokeWeight(5);

  line(177,103,143,138);

  strokeWeight(15);

  line(139,144,143,138);

  stroke(60);

  strokeWeight(5);

  line(175,100,140,135);
  
  stroke(100);
  
  strokeWeight(8);

  line(197,35,175,100);

  strokeWeight(15);

  line(135,140,140,135);
  
  stroke(80);
  strokeWeight(2);

  line(197,35,175,100);

  stroke(90);
  strokeWeight(8);

  line(135,140,143,132);
  
  stroke(75);
  strokeWeight(4);
  
  line(138,137,143,132);

  strokeWeight(1);
  stroke(70);
  fill(100);

  ellipse(197,35,20,20);

  noStroke();

  fill(57,40,28);

  beginShape();
  vertex(220,180);
  vertex(220,100);
  vertex(205,100);
  vertex(205,180);
  endShape(CLOSE);
  
  fill(70,55,36);
  
  ellipse(273,45,25,25);
  
  fill(5,5,5,80);
  
  ellipse(276,48,15,15);
  
  fill(25);
  
  ellipse(273,45,15,15);
  
  fill(70,55,36);
  
  ellipse(273,80,25,25);
  
  fill(5,5,5,80);
  
  ellipse(277,83,15,15);
  
  fill(25);
  
  ellipse(273,80,15,15);
  
  fill(5);
  ellipse(248,92, 3,3);
  
  ellipse(248,100, 3,3);
  
  fill(0,255,0);
  ellipse(248,108, 4,4);
  
  fill(0,255,0, 50);
  ellipse(248,108, 8,8);
  
  fill (20);
  ellipse(284,26,5,5);
  
  ellipse(284,174,5,5);
  
  ellipse(237,26,5,5);
  
  ellipse(237,174,5,5);
  
  fill (5,5,5,50);
  ellipse(283,25,8,8);
  
  ellipse(283,173,8,8);
  
  ellipse(236,25,8,8);
  
  ellipse(236,173,8,8);
  
  fill(70,55,36);
  
  rect(238,142,18,18);
  
  fill(5,5,5,50);
  
  rect(242,146,16,16);
  
  fill(90,76,50);
  
  rect(241,145,12,12);
  
  fill(80,66,40);
  
  rect(241,145,12,6);
  
  fill(70,55,36);
  
  rect(239,121,12,12);
  
  fill(5,5,5,50);
  
  rect(241,123,12,12);
  
  fill(90,76,50);
  
  rect(241,123,8,8);
  
  strokeWeight(2);
  stroke(50);
  line(275,45, 279,45);
  
  strokeWeight(2);
  stroke(50);
  line(274,78, 276,75);
  
}

void draw(){
  
  noStroke();
  
  pushMatrix();
  translate(100,100);
  
  rotate(frameCount % 360);
  
  fill(20,20,66);

  ellipse(0,0,75,75);
  
  fill(39,41,90,60);

  arc(0,0,75,75,1,TWO_PI);
  arc(0,0,75,75,2,TWO_PI);
  arc(0,0,75,75,3,TWO_PI);
  arc(0,0,75,75,4,TWO_PI);
  arc(0,0,75,75,5,TWO_PI);
  
  popMatrix();
  
  

  fill(5,5,5,50);
  ellipse(105,105,25,25);
  
  

  fill(20);

  ellipse(100,100,25,25);
  
  
}

Exercícios de Código

Exercício I – Composição Geométrica

Neste primeiro exercício decidi fazer uma composição que envolve-se alguma ilusão de óptica, e portanto fui juntando os vários elementos e as cores que me permitissem demonstrar essa ilusão.

Tenho duas imagens, uma sem contornos e a outra com contornos, porque me foi sugerido por uma colega que experimentasse ver como a imagem ficava das duas maneiras.

 

Imagem Final Sem Contornos

//tamanho da tela
size(400,400);

//cor do fundo
colorMode(RGB);
background(0,1,3);

//sem contorno
noStroke();

//elipses e rectângulos
fill(3,244,255);
ellipse(50,50,120,120);
ellipse(360,50,120,120);
fill(3,109,255);
rect(75,75,250,250,7);
fill(2,215,224);
ellipse(69,69,110,110);
ellipse(340,69,110,110);
fill(31,126,255);
rect(85,85,230,230,7);
fill(4,198,206);
ellipse(88,88,100,100);
ellipse(322,88,100,100);
fill(59,142,255);
rect(100,100,200,200,7);
fill(2,175,183);
ellipse(105,105,90,90);
ellipse(304,105,90,90);
fill(87,157,252);
rect(110,110,180,180,7);
fill(2,153,160);
ellipse(120,120,80,80);
ellipse(287,120,80,80);
fill(116,175,255);
rect(120,120,160,160,7);
fill(1,126,131);
ellipse(134,134,70,70);
ellipse(272,134,70,70);
fill(137,187,255);
rect(130,130,140,140,7);
fill(2,99,103);
ellipse(145,145,60,60);
ellipse(261,145,60,60);
fill(157,199,255);
rect(140,140,120,120,7);
fill(0,79,82);
ellipse(157,157,50,50);
ellipse(248,157,50,50);
fill(180,212,255);
rect(150,150,100,100,7);
fill(1,67,70);
ellipse(165,165,40,40);
ellipse(238,165,40,40);
fill(206,227,255);
rect(160,160,80,80,7);
fill(1,49,52);
ellipse(172,172,30,30);
ellipse(229,172,30,30);
fill(229,240,255);
rect(167,167,63,63,7);
fill(1,32,33);
ellipse(176,176,20,20);
ellipse(222,176,20,20);
fill(245,248,252);
rect(174,174,49,49,7);
fill(0,20,21);
ellipse(179,179,10,10);
ellipse(217,179,10,10);
fill(250,251,252);
rect(181,181,35,35,7);
fill(0,2,3);
ellipse(183,183,5,5);
ellipse(215,183,5,5);

//linhas verticais e horizontais
stroke(255,255,255);
strokeWeight(6.0);
line(220,0,220,420);
stroke(255,255,255);
strokeWeight(6.0);
line(320,0,320,420);
stroke(255,255,255);
strokeWeight(6.0);
line(120,0,120,420);
stroke(255,255,255);
strokeWeight(6.0);
line(20,0,20,420);
stroke(255,255,255);
strokeWeight(6.0);
line(0,220,2000,220);
stroke(255,255,255);
strokeWeight(6.0);
line(0,120,2000,120);
stroke(255,255,255);
strokeWeight(6.0);
line(0,20,2000,20);
stroke(255,255,255);
strokeWeight(6.0);
line(0,320,2000,320);

Imagem Final com Contornos

//tamanho da tela
size(400,400);

//cor do fundo
colorMode(RGB);
background(0,1,3);

//elipses e rectângulos
fill(3,244,255);
ellipse(50,50,120,120);
ellipse(360,50,120,120);
fill(3,109,255);
rect(75,75,250,250,7);
fill(2,215,224);
ellipse(69,69,110,110);
ellipse(340,69,110,110);
fill(31,126,255);
rect(85,85,230,230,7);
fill(4,198,206);
ellipse(88,88,100,100);
ellipse(322,88,100,100);
fill(59,142,255);
rect(100,100,200,200,7);
fill(2,175,183);
ellipse(105,105,90,90);
ellipse(304,105,90,90);
fill(87,157,252);
rect(110,110,180,180,7);
fill(2,153,160);
ellipse(120,120,80,80);
ellipse(287,120,80,80);
fill(116,175,255);
rect(120,120,160,160,7);
fill(1,126,131);
ellipse(134,134,70,70);
ellipse(272,134,70,70);
fill(137,187,255);
rect(130,130,140,140,7);
fill(2,99,103);
ellipse(145,145,60,60);
ellipse(261,145,60,60);
fill(157,199,255);
rect(140,140,120,120,7);
fill(0,79,82);
ellipse(157,157,50,50);
ellipse(248,157,50,50);
fill(180,212,255);
rect(150,150,100,100,7);
fill(1,67,70);
ellipse(165,165,40,40);
ellipse(238,165,40,40);
fill(206,227,255);
rect(160,160,80,80,7);
fill(1,49,52);
ellipse(172,172,30,30);
ellipse(229,172,30,30);
fill(229,240,255);
rect(167,167,63,63,7);
fill(1,32,33);
ellipse(176,176,20,20);
ellipse(222,176,20,20);
fill(245,248,252);
rect(174,174,49,49,7);
fill(0,20,21);
ellipse(179,179,10,10);
ellipse(217,179,10,10);
fill(250,251,252);
rect(181,181,35,35,7);
fill(0,2,3);
ellipse(183,183,5,5);
ellipse(215,183,5,5);
stroke(255,255,255);
strokeWeight(6.0);
line(220,0,220,420);
stroke(255,255,255);

//linhas verticais e horizontais
strokeWeight(6.0);
line(320,0,320,420);
stroke(255,255,255);
strokeWeight(6.0);
line(120,0,120,420);
stroke(255,255,255);
strokeWeight(6.0);
line(20,0,20,420);
stroke(255,255,255);
strokeWeight(6.0);
line(0,220,2000,220);
stroke(255,255,255);
strokeWeight(6.0);
line(0,120,2000,120);
stroke(255,255,255);
strokeWeight(6.0);
line(0,20,2000,20);
stroke(255,255,255);
strokeWeight(6.0);
line(0,320,2000,320);

Exercício II – Imagem estática com interacção com o rato

Neste segundo exercício eu tinha uma ideia muito clara do que queria fazer, e com alguma ajuda do professor consegui concretizar exactamente aquilo que queria, que era ter uma imagem estática e depois cada pessoa conseguir pintar a imagem como quiser.

Tenho também neste dois exercícios, sendo apenas o segundo o final, porque me foi sugerido na apresentação em aula, pelo professor que mudasse a opacidade das cores para que se visse parte da imagem mesmo quando esta já estava pintada.

1ª tentativa (Cores com 0% de opacidade)

//teclas a que correspondem as cores
//r-vermelho (red)
//g-verde (green)
//y-amarelo (yellow)
//b-azul (blue)
//p-rosa (pink)
//o-laranja (orange)
//w-branco (white)
//d-preto (dark)
//a-azul claro
//s-verde muito claro
//f-rosa escuro
//u-roxo

//imagem estática do fundo
PImage img;

void setup() {
  size(600,600);
  img = loadImage("lady.jpg");
}

void draw() {
  if (frameCount == 1) {
    image(img,0,0,600,600);
  }
  
  //expressão que faz com que apenas pintemos enquanto estivermos a pressionar o botão esquerdo do rato
  if (mousePressed) { 
   
 //propriedades do pincel
  strokeWeight(15);
  
  //teclas e cores
  if (key == 'r') {
    stroke(255,0,0);
     
  }
  if (key == 'g') {
    stroke(0,255,0);
  }
  
  if (key == 'y') {
    stroke (254,255,5);
  }
  
  if (key == 'b') {
    stroke (5,32,255);
  }
  
  if (key == 'p') {
    stroke (255,0,170);
  }
  
  if (key == 'o') {
    stroke (255,135,5);
  }
  
  if (key == 'u') {
    stroke (121,5,255);
  }
  
  if (key == 'w') {
    stroke (250,250,250);
  }
  
  if (key == 'd') {
    stroke (0,0,0);
  }
  
  if (key == 'a') {
    stroke (32,221,229);
  }
  
  if (key == 's') {
    stroke (32,229,155);
  }
  
  if (key == 'f') {
    stroke (144,12,100); 
  }
  
//localização do rato na tela
  point(mouseX, mouseY);
  }
  
}

Trabalho Final (opacidade das cores 30%)

//teclas a que correspondem as cores
//r-vermelho (red)
//g-verde (green)
//y-amarelo (yellow)
//b-azul (blue)
//p-rosa (pink)
//o-laranja (orange)
//w-branco (white)
//d-preto (dark)
//a-azul claro
//s-verde muito claro
//f-rosa escuro
//u-roxo

//imagem estática do fundo
PImage img;

void setup() {
  size(600,600);
  img = loadImage("lady.jpg");
}

void draw() {
  if (frameCount == 1) {
    image(img,0,0,600,600);
  }
  
  //expressão que faz com que apenas pintemos enquanto estivermos a pressionar o botão esquerdo do rato
  if (mousePressed) { 
   
 //propriedades do pincel
  strokeWeight(15);
  
  //teclas e cores
  if (key == 'r') {
    stroke(255,0,0,30);
     
  }
  if (key == 'g') {
    stroke(0,255,0,30);
  }
  
  if (key == 'y') {
    stroke (254,255,5,30);
  }
  
  if (key == 'b') {
    stroke (5,32,255,30);
  }
  
  if (key == 'p') {
    stroke (255,0,170,30);
  }
  
  if (key == 'o') {
    stroke (255,135,5,30);
  }
  
  if (key == 'u') {
    stroke (121,5,255,30);
  }
  
  if (key == 'w') {
    stroke (250,250,250,30);
  }
  
  if (key == 'd') {
    stroke (0,0,0,30);
  }
  
  if (key == 'a') {
    stroke (32,221,229,30);
  }
  
  if (key == 's') {
    stroke (32,229,155,30);
  }
  
  if (key == 'f') {
    stroke (144,12,100,30); 
  }
  
//localização do rato na tela
  point(mouseX, mouseY);
  }
  
}

Esta foi a imagem que usei para imagem de fundo:

Exercício 1 e 2

Exercício 1

Para este primeiro exercício de Processing e depois de algumas experiências, optei por esta composição estética, com recurso a uma pintura de Francesco de Goya, que representa uma família da aristocracia espanhola e adicionei-lhe três formas geométricas simples na tentativa de brincar com a imagem, transportar-lhe um pouco de contemporaneidade em cores pastel inspiradas nos tons dos vestidos das personagens numa composição divertida e irónica.

PImage photo;

void setup() {
size(440, 590);
photo = loadImage("GOYA.jpg");
}

void draw() {
image(photo, 0, 0, 440, 590);

stroke(#9EE3DC);
strokeWeight(3);
fill(#9EE3DC, 50);
ellipse(200, 170, 100, 100);
 
stroke(#8A3EB4);
strokeWeight(3);
fill(#8A3EB4, 50);
triangle(75, 370, 140, 470, 200, 370);

stroke(#F7B47D);
strokeWeight(3);
fill(#F7B47D, 50);
rect(300, 318, 100, 200);
}

Exercício 2

Neste segundo exercício usei uma imagem da Guernica de Pablo Picasso, e numa tentativa de brincar com o dramatismo da pintura, criando um brinquedo no qual ao pressionar uma tecla de 1 a 8 surgem formas geométricas que interagem com as da pintura original.

– exemplos do produto final

– imagem utilizada

PImage photo;

void setup() {
size(1000, 450);
photo = loadImage("la-guernica-pablo-picasso-b.jpg");
}

void draw() {
image(photo, 0, 0, 1000, 450);

if(keyPressed) {
if(key == '1') {
fill(222, 36, 36);
noStroke();
rect(72, 20, 100, 130);
}
}

if(keyPressed) {
if(key == '2') {
fill(119, 183, 250);
noStroke();
triangle(310, 80, 330, 155, 450, 120);
}
}

if(keyPressed) {
if(key == '3') {
fill(242, 227, 59);
noStroke();
ellipse(620, 220, 90, 90);
}
}

if(keyPressed) {
if(key == '4') {
fill(71, 147, 31);
noStroke();
quad(840, 0, 900, 0, 430, 350, 300, 450);
}
}

if(keyPressed) {
if(key == '5') {
fill(170, 24, 153);
noStroke();
rect(0, 330, 1000, 40);
}
}

if(keyPressed) {
if(key == '6') {
fill(255, 147, 5);
noStroke();
rect(887, 41, 30, 39);
}
}

if(keyPressed) {
if(key == '7') {
stroke(11, 30, 149);
strokeWeight(7);
line(270, 70, 120, 300);
stroke(11, 30, 149);
strokeWeight(7);
line(360, 90, 360, 370);
stroke(11, 30, 149);
strokeWeight(7);
line(450, 70, 600, 300);
}
}

if(keyPressed) {
if(key == '8') {
fill(0);
noStroke();
rect(0, 0, 800, 450);
}
}
}

Exercício Código

Para este exercício, na imagem estáctica, explorei as formas básicas do processing e conjuguei-as de forma a obter formas novas, jogando com a opacidade assim como os fills e strokes. Nada demasiado complexo, mas suficiente para perceber as mecânicas do programa.

 

void setup() {
  size (800, 800);
  background(160,196,227);
  strokeWeight(4);
 stroke(109,49,139);
fill(171,93,224,73);
rect(100,100,600,600);
  stroke(232,244,255);
  fill(89,140,190);
  ellipse(400,400, 600,600);
  noStroke();
  fill(255,90);
  ellipse(400,400, 610,610);
  noStroke();
  fill(255,75);
  ellipse(400,550,250,250);
  noStroke();
  fill(255,90);
  ellipse(400,550,300,300);
  strokeWeight(7);
  stroke(160,91,34);
  fill(232,170,54,66);
  triangle(50,50,100,200,200,100);
  strokeWeight(7);
  stroke(160,91,34);
  fill(232,170,54,66);
  triangle(750,750,700,600,600,700);
  strokeWeight(7);
  stroke(160,91,34);
  fill(232,170,54,66);
  triangle(750,50,700,200,600,100);
  strokeWeight(7);
  stroke(160,91,34);
  fill(232,170,54,66);
  triangle(50,750,100,600,200,700);
}

_______________________________________________________________________________________________

Enquanto à composição dinamica, criei uma simples animação onde começa do branco para o preto e  se o rato estiver a não ser clicado, haverá uma elipse na localização do rato em que o stroke estará a brilhar em cores random e o fill será transparente. Caso o rato seja clicado, os stroke fica branco e o fill e preenchido com cores random. Quando isto acontece, o cursor deixa um rasto que desvanece.

 

 

float decay = 10; 
void setup() {  
    size(800, 800); 
    background(255);
    frameRate(30);
}   
void draw() {    
 strokeWeight(5);
 stroke(random(230),random(230),random(230),80);
 noFill();
 ellipse(mouseX,mouseY,175,175);   
  if (mousePressed) {
        strokeWeight(5);
  stroke(255);
  fill(random(230),random(230),random(230),80);
 ellipse(mouseX,mouseY,175,175); 
    }    
    loadPixels();
    
    for (int i = 0; i < width*height; i++) {
        color c = pixels[i];
        color nc = color(red(c) - decay, green(c) - decay, blue(c) - decay);
        pixels[i] = nc;
    }
 
    updatePixels();
}

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.

     

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);

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.

        

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);
      }
  } 
}

Processing

EXERCÍCIO DE IMAGEM

Para o exercício de imagem no processing, comecei por fazer as formas realizadas nas aulas, e os primeiros exercícios que realizei resultavam em imagens figurativas que achei pouco interessantes, portanto a minha imagem final é um padrão, com as formas apreendidas nas aulas, onde inseri uma imagem de relva retirada da internet:

 

 

CÓDIGO:

//tamanho do fundo
size (600, 600);

//cor do fundo
//colorMode (RGB, 0.1);
background (245, 200, 200);
noStroke ();

//circulos coloridos
fill (185, 232, 188);
ellipse (0, 0, 200, 200);

ellipse (0, 200, 200, 200);
ellipse (0, 400, 200, 200);
ellipse (0, 600, 200, 200);
ellipse (200, 400, 200, 200);
ellipse (400, 400, 200, 200);
ellipse (600, 400, 200, 200);
ellipse (200, 0, 200, 200);
ellipse (400, 0, 200, 200);
ellipse (600, 0, 200, 200);
ellipse (200, 200, 200, 200);
ellipse (200, 400, 200, 200);
ellipse (200, 600, 200, 200);
ellipse (400, 200, 200, 200);
ellipse (400, 600, 200, 200);
ellipse (600, 200, 200, 200);
ellipse (600, 600, 200, 200);

fill (0, 0, 0);
ellipse (400, 200, 130, 130);
ellipse (200, 0, 130, 130);
ellipse (0, 200, 130, 130);
ellipse (0, 600, 130, 130);
ellipse (200, 400, 130, 130);
ellipse (400, 600, 130, 130);
ellipse (600, 0, 130, 130);
ellipse (600, 400, 130, 130);


fill (150, 216, 232);
ellipse (0, 200, 100, 100);
ellipse (0, 0, 50, 50);
ellipse (200, 200, 50, 50);
ellipse (200, 0, 100, 100);
ellipse (200, 400, 100, 100);
ellipse (200, 200, 50, 50);
ellipse (600, 200, 50, 50);
ellipse (200, 600, 50, 50);
ellipse (0, 600, 100, 100);
ellipse (0, 400, 50, 50);
ellipse (400, 200, 100, 100);
ellipse (400, 0, 50, 50);
ellipse (400, 400, 50, 50);
ellipse (400, 200, 100, 100);
ellipse (600, 200, 50, 50);
ellipse (600, 0, 100, 100);
ellipse (600, 400, 100, 100);
ellipse (600, 600, 50, 50);
ellipse (400, 600, 100, 100);

fill (240, 242, 122);
ellipse (0, 200, 50, 50);
ellipse (0, 0, 100, 100);
ellipse (200, 200, 100, 100);
ellipse (200, 0, 50, 50);
ellipse (200, 400, 50, 50);
ellipse (200, 200, 100, 100);
ellipse (600, 200, 100, 100);
ellipse (200, 600, 100, 100);
ellipse (0, 600, 50, 50);
ellipse (0, 400, 100, 100);
ellipse (400, 200, 50, 50);
ellipse (400, 0, 100, 100);
ellipse (400, 400, 100, 100);
ellipse (400, 200, 50, 50);
ellipse (600, 200, 100, 100);
ellipse (600, 0, 50, 50);
ellipse (600, 400, 50, 50);
ellipse (600, 600, 100, 100);
ellipse (400, 600, 50, 50);

//quadrados (sombra da imagem)
fill (0, 0, 0);
rect (100, 100, 50, 50);
rect (500, 100, 50, 50);
rect (100, 500, 50, 50);
rect (250, 100, 50, 50);
rect (250, 250, 50, 50);
rect (250, 500, 50, 50);
rect (100, 250, 50, 50);
rect (500, 250, 50, 50);
rect (500, 500, 50, 50);



//inserção da imagem
PImage img = loadImage ("imagem.jpg");
image (img, 275, 275, 50, 50);
image (img, 475, 475, 50, 50);
image (img, 75, 75, 50, 50);
image (img, 275, 75, 50, 50);
image (img, 475, 75, 50, 50);
image (img, 75, 275, 50, 50);
image (img, 75, 475, 50, 50);
image (img, 475, 275, 50, 50);
image (img, 275, 475, 50, 50);

fill (0, 0, 0);
ellipse (400, 400, 25, 25);
ellipse (200, 200, 25, 25);
ellipse (0, 0, 25, 25);
ellipse (200, 600, 25, 25);
ellipse (600, 600, 25, 25);
ellipse (0, 400, 25, 25);
ellipse (400, 0, 25, 25);
ellipse (600, 200, 25, 25);

Resultado Final:

EXERCÍCIO DE ANIMAÇÃO

Originalmente a minha ideia para a animação era que apenas as linhas que aparecem no resultado final interagissem com o rato, mudando de cor enquanto se movimentavam. À medida que fui fazendo a animação não estava a conseguir desenvolver esta ideia inicial então comecei por fazer os quadrados coloridos e de diferentes tamanhos a aparecerem de maneira aleatória. Posteriormente consegui fazer com que as linhas interagissem com os próprios quadrados, consistindo no resultado final.

CÓDIGO:

void setup() {  
    
    // tamanho da tela
    size(600, 600); 
 
    // cor de fundo
    background(0, 0, 0);
} 

     void draw() {
       //animação quadrados
      
      //em interacção com o rato
      variableRect(mouseX, mouseY, pmouseX, pmouseY);
if (mousePressed) {
      fill(random(256), random (256) , random (256), 50);
} else {
fill(random(256), random (256) , random (256), 50);}}
  
      //ponto de partida e velocidade de acordo com as variáveis    
void variableRect(int x, int y, int px, int py) {
float speed = abs(x-px) + abs(y-py);

      //cores do preenchimento e da linha aleatórias
      stroke(speed);
strokeWeight (1);
fill(random(420), random (244) , random (345));
rect(x, y, speed, speed); 
       
       
       // animação linhas em interação com o rato
       stroke(255);
       strokeWeight (1.5);
       line(100, 50, mouseX, mouseY);
       stroke(255, 234, 0);
       strokeWeight (1.5);
       line(250, 300, mouseX, mouseY);
      


}

 

Resultado Final:

Exercício Código

Imagem Fixa:

 

 

size (300, 300);
background (78, 91, 93);

noStroke ();
fill (13, 225, 225, 40);
ellipse (150, 150, 400, 400);
ellipse (150, 150, 350, 350);
ellipse (150, 150, 300, 300);
ellipse (150, 150, 290, 290);
ellipse (150, 150, 280, 280);
ellipse (150, 150, 270, 270);
ellipse (150, 150, 260, 260);
ellipse (150, 150, 250, 250);
ellipse (150, 150, 240, 240);
ellipse (150, 150, 230, 230);
ellipse (150, 150, 220, 220);
ellipse (150, 150, 210, 210);
ellipse (150, 150, 200, 200);
ellipse (150, 150, 190, 190);
ellipse (150, 150, 180, 180);
ellipse (150, 150, 170, 170);
ellipse (150, 150, 160, 160);
ellipse (150, 150, 150, 150);

fill (0, 0, 0);
noStroke ();
triangle (150, 20, 30, 230, 270, 230);

stroke (255, 255, 255, 80);
strokeWeight (2);
triangle (150, 30, 40, 225, 260, 225);

stroke (255, 255, 255);
line (150, 0, 150, 300);
line (0, 150, 300, 150);

stroke (255, 255, 255, 100);
strokeWeight (5);
ellipse (150, 150, 50, 50);


strokeWeight (0.5);
line (0, 146, 300, 146);
line (0, 154, 300, 154);
line (146, 0, 146, 300);
line (154, 0, 154, 300);
line (0, 0, 300, 300);
line (300, 0, 0, 300);

Animação:

 

//Referências para a rotação de uma linha
//http://www.learningprocessing.com/exercises/chapter-14/exercise-14-6/

//Efeito jitter
//https://www.processing.org/examples/rotate.html

float angle = 0.0;
float jitter;

void setup () {
  size (500, 500);
  frameRate (50);
  background (0);
}
void draw () {

 //Linha Circular Preta e Circulo de Fundo Azul 
stroke (0);  
  fill (56, 200, 242, 5);
  ellipseMode(CENTER);
  float sz = frameCount %300 + jitter;
  ellipse (width/2, height/2, 10+ sz, 10+sz);
  
  //Jitter
  if (second () % 2 == 0) {
    jitter = random (-10, 10);
  }
  
  //Ponteiros Brancos
     stroke (255);
translate(width/2,height/2);
  rotate(angle);
  line(-75, 0, 75, 0);
  angle += 0.05;
  
}
  

Processing – Exercícios

ESTÁTICO

A minha composição estática consiste num primeiro padrão em que os círculos estão inseridos em quadrados, com as cores destes sempre alternadas. Os quadrados teem espaços entre si por isso é que se observa riscas pretas, estas são a cor do fundo. Por cima deste padrão existe uma composição de triângulos brancos sobrepostos o que resulta visualmente em vários pentágonos.

 

 

Código:

size (425, 425);
colorMode (RGB);
background (10, 10, 10);



noStroke ();



//rectangulos verdes e laranjas alternados

fill (78, 222, 194);
rect (5, 5, 100, 100);
fill (252, 187, 133);
rect (110, 5, 100, 100);
fill (78, 222, 194);
rect (215, 5, 100, 100);
fill (252, 187, 133);
rect (320, 5, 100, 100);

fill (252, 187, 133);
rect (5, 110, 100, 100);
fill (78, 222, 194);
rect (110, 110, 100, 100);
fill (252, 187, 133);
rect (215, 110, 100, 100);
fill (78, 222, 194);
rect (320, 110, 100, 100);

fill (78, 222, 194);
rect (5, 215, 100, 100);
fill (252, 187, 133);
rect (110, 215, 100, 100);
fill (78, 222, 194);
rect (215, 215, 100, 100);
fill (252, 187, 133);
rect (320, 215, 100, 100);

fill (252, 187, 133);
rect (5, 320, 100, 100);
fill (78, 222, 194);
rect (110, 320, 100, 100);
fill (252, 187, 133);
rect (215, 320, 100, 100);
fill (78, 222, 194);
rect (320, 320, 100, 100);

//elipses verdes e laranjas alternadas

fill (252, 187, 133);
ellipse (55, 55, 100, 100);
fill (78, 222, 194);
ellipse (160, 55, 100, 100);
fill (252, 187, 133);
ellipse (265, 55, 100, 100);
fill (78, 222, 194);
ellipse (370, 55, 100, 100);

fill (78, 222, 194);
ellipse (55, 160, 100, 100);
fill (252, 187, 133);
ellipse (160, 160, 100, 100);
fill (78, 222, 194);
ellipse (265, 160, 100, 100);
fill (252, 187, 133);
ellipse (370, 160, 100, 100);

fill (252, 187, 133);
ellipse (55, 265, 100, 100);
fill (78, 222, 194);
ellipse (160, 265, 100, 100);
fill (252, 187, 133);
ellipse (265, 265, 100, 100);
fill (78, 222, 194);
ellipse (370, 265, 100, 100);

fill (78, 222, 194);
ellipse (55, 370, 100, 100);
fill (252, 187, 133);
ellipse (160, 370, 100, 100);
fill (78, 222, 194);
ellipse (265, 370, 100, 100);
fill (252, 187, 133);
ellipse (370, 370, 100, 100);



//triangulos brancos

noStroke ();

fill (250, 250, 250);
triangle (160, 55, 265, 55, 212, 0);
triangle (160, 55, 265, 55, 212, 160);
triangle (160, 160, 265, 160, 212 ,55);
triangle (160, 160, 265, 160, 212, 265);
triangle (265, 265, 160, 265, 212, 160);
triangle (265, 265, 160, 265, 212, 370);
triangle (160, 370, 265, 370, 212, 265);
triangle (160, 370, 265, 370, 212, 425);


triangle (55, 55, 160, 55, 107, 0);
triangle (55, 55, 160, 55, 107, 160);
triangle (55, 160, 160, 160, 107 ,55);
triangle (55, 160, 160, 160, 107, 265);
triangle (55, 265, 160, 265, 107, 160);
triangle (55, 265, 160, 265, 107, 370);
triangle (55, 370, 160, 370, 107, 265);
triangle (55, 370, 160, 370, 107, 425);

triangle (0, 55, 55, 55, 0, 0);
triangle (0, 55, 55, 55, 0, 160);
triangle (0, 160, 55, 160, 0 ,55);
triangle (0, 160, 55, 160, 0, 265);
triangle (0, 265, 55, 265, 0, 160);
triangle (0, 265, 55, 265, 0, 370);
triangle (0, 370, 55, 370, 0, 265);
triangle (0, 370, 55, 370, 0, 425);

triangle (265, 55, 370, 55, 317, 0);
triangle (265, 55, 370, 55, 317, 160);
triangle (265, 160, 370, 160, 317 ,55);
triangle (265, 160, 370, 160, 317, 265);
triangle (370, 265, 265, 265, 317, 160);
triangle (370, 265, 265, 265, 317, 370);
triangle (265, 370, 370, 370, 317, 265);
triangle (265, 370, 370, 370, 317, 425);

triangle (370, 55, 425, 55, 425, 0);
triangle (370, 55, 425, 55, 425, 160);
triangle (370, 160, 425, 160, 425 ,55);
triangle (370, 160, 425, 160, 425, 265);
triangle (425, 265, 370, 265, 425, 160);
triangle (425, 265, 370, 265, 425, 370);
triangle (370, 370, 425, 370, 425, 265);
triangle (370, 370, 425, 370, 425, 425);

 

 

 

 

ANIMAÇÃO

A minha animação consiste em três espirais: uma primeira com elipses, outra com triângulos, e outra com rectângulos, sempre com cores alternadas. Se clicar com o rato na animação esta começa de onde clicou ou seja, tudo o que já estava antes de clicar desaparece. Se premir com o rato obtém-se apenas a forma a mover-se sem o arrastamento e com alternância de cores nestas e no padrão.

 

    

 

Código:

boolean growing = true;
float sz = 0.0;
color c = color(237, 26,153);


void setup() {  
    size(300, 300); 
    colorMode (RGB);
    background (random(255), random(255), random(255))  ;
    frameRate(10);

float R = 139;
float G = 210;
float B = 229;
float bChange = 1;
background(R, G, B);

  if (mouseX > 0 && mouseX  0 && mouseY  1.0) { 
      growing = false; 
      c = color(random(255), random(255), random(255));
 
  }
    else if (sz < 0.0) {growing = true; } 
    
    translate (width/2, height/2);
    rotate (TWO_PI * sz);    
    
    stroke(c);
    
    if (growing == true) {
      ellipse (100, 100, random (100) * sz, 100 * sz);
    }
    else {
      
      triangle (30, 75, 58, 20, 86, 75);
      c = color(random(255), random(255), random(255));
      rectMode (CENTER);
      rect (random (20), 20, 20 * sz, 100 * sz);
    }

 

  
}

 

Exercício 3 – Código

Exercício I  – Imagem Estática

 

 

Imagem para possível download:

 

 

Código:

//Neste exercício,  criei uma imagem abstracta em que tentei aplicar as noções básicas do processing que foram aprendidas em aula. Temos como exemplos disso, e bastante facilmente de percepcionar na imagem, diferentes cores com diferentes níveis da transparências, formas distintas como elipses/circunferências, triângulos e quadrados, diferentes espessuras de linha, ausência da mesma e também uma imagem central criada por mim próprio e seguidamente colocada na composição como nos foi ensinado.

//Fundo e tamanha da tela
size (300,300);
background (237,171,84);
strokeWeight(1);
fill (234,19,19,125);
ellipse (150,150,285,285);
strokeWeight(2);
fill (234,19,19,150);
ellipse (150,150,250,250);
fill (234,19,19);
strokeWeight(3);
ellipse (150,150,215,215);
//Imagem inserida
PImage img = loadImage("Logo finalesssss2.jpg");
image (img,100,100,100,100);
noFill ();
strokeWeight (7);
//Quadrado central
beginShape ();
vertex (100,100);
vertex (200,100);
vertex (200,200);
vertex (100,200);
endShape (CLOSE);
strokeWeight (4);
fill (184,245,44);
triangle (150,50,100,90,200,90);
triangle (90,100,90,200,50,150);
triangle (210,100,210,200,250,150);
triangle (100,210,200,210,150,250);
fill (57,100,11);
triangle (150,50,100,90,150,90);
triangle (210,100,210,150,250,150);
triangle (90,150,90,200,50,150);
triangle (150,210,200,210,150,250);
strokeWeight (0);
fill (21,12,121,150);
ellipse (50,50,90,90);
strokeWeight (1);
fill (21,12,121,125);
ellipse (50,50,60,60);
fill (21,12,121);
strokeWeight (2);
ellipse (50,50,30,30);
fill (21,12,121,150);
strokeWeight (0);
ellipse (250,50,90,90);
fill (21,12,121,125);
strokeWeight (1);
ellipse (250,50,60,60);
fill (21,12,121);
strokeWeight (2);
ellipse (250,50,30,30);
fill (21,12,121,150);
strokeWeight (0);
ellipse (250,250,90,90);
fill (21,12,121,125);
strokeWeight (1);
ellipse (250,250,60,60);
fill (21,12,121);
strokeWeight (2);
ellipse (250,250,30,30);
fill (21,12,121,150);
strokeWeight (0);
ellipse (50,250,90,90);
fill (21,12,121,125);
strokeWeight (1);
ellipse (50,250,60,60);
fill (21,12,121);
strokeWeight (2);
ellipse (50,250,30,30);

Exercício II – Imagem Dinâmica

 

Código:

//Neste exercício, tentei criar uma composição dinâmica a tombar para o lado psicadélico e implementei uma enorme variedade de cores na composição através da função random. Além disso, se passarmos o rato por cima da composição, irá existir interactividade e as partículas que estão em constante movimento e alteração de cor irão-se afastar à medida que o rato se desloca. Usei como base alguns exemplos enviados por e-mail, tais como: onion skin, loop e partículas.

color c;

float px[];
float py[];

//Número de partículas
int num_particles = 100;

void setup() {
size(300, 300);
background(random(255));
frameRate(80);
c = color(random(255),random(255), random(255));

//Partículas
px = new float[num_particles];
py = new float[num_particles];

for (int i = 0; i < num_particles; i++) {
px[i] = random (width);
py[i] = random (height);
}
}

void draw() {
background (random(255));
fill(random (255),random(255),random(255));
rectMode(CENTER);
float sz = (frameCount % 100) / 100.0;
pushMatrix();
translate (width/2, height/2);
rotate (TWO_PI * sz);
if ((1.0 - sz) < 0.01) {
c = color(random(255),random(255), random(255), 100);
}
stroke(c);
rect (0, 0, 300 * sz, 300 * sz);
popMatrix();
strokeWeight (0);
fill(random(255),random(255),random(255));
rectMode(CENTER);
float tu = frameCount % 100;
rect(width/2, height/2, 20 + tu, 20 + tu);

fill (255);
strokeWeight (2);
for (int i = 0; i < num_particles; i = i+1) {
px[i] = constrain (px[i] + random (-5, 5), 0, width);
py[i] = constrain (py[i] + random (-5, 5), 0, height);

//Interacção com as partículas
if (dist (px[i], py[i], mouseX, mouseY) < 40) {
float vx = (px[i] - mouseX);
float vy = (py[i] - mouseY);

px[i] = px[i] + vx;
py[i] = py[i] + vy;
}

ellipse (px[i], py[i], 5, 5);
}
}

exercício código

Para este trabalho tive a mexer no processing e a experimentar com formas geométricas e diferentes cores para criar composições interessantes, concentrando-me mais em fazer figuras, em vez de composições mais abstractas.

Primeira experiência

 

void setup () {
size(500,500);
background(0);
}
void draw () {

stroke(0);
fill(247,227,72);
rect(245,105,5,50);

stroke(0);
fill( 22,171,178);
ellipse(250, 300, 300, 300);

stroke(247,227,72);
fill(247,227,72);
ellipse(250,100,50,50);
stroke(0);
fill(232,67,52);
rect(250,350, 100, 20);

stroke(0);
fill(255);
ellipse(390, 300, 70, 70);
ellipse(190, 300, 70, 70);

}

 

Trabalho final

size(500,500);
background(0);

//orelhas
ellipse(150,150,70,70);
ellipse(350,150,70,70);

//interior das orelhas
stroke(255);
fill(0);
ellipse(150,150,50,50);

stroke(255);
fill(0);
ellipse(350,150,50,50);

//cara
stroke(255);
fill(255);
rect(150,150,200,150);

//olhos
stroke(0);
strokeWeight(2);
fill(255);
ellipse(200,200,60,50);

stroke(0);
strokeWeight(2);
fill(0);
ellipse(200,200,40,30);

stroke(0);
strokeWeight(2);
fill(255);
ellipse(300,200,60,50);

stroke(0);
strokeWeight(2);
fill(0);
ellipse(300,200,40,30);

//focinho
stroke(0);
fill(0);
ellipse(250,250,70,60);

stroke(0);
fill(0);
ellipse(250,290,15,3);

//corpo
stroke(255);
fill(255);
rect(95,300,300,300);

stroke(0);
fill(0);
ellipse(245,500,400,300);

 

 
 

Dinâmico

float px[];
float py[];

int num_particles = 50;

void setup() {
size(500, 500);

background(0);

px = new float[num_particles];
py = new float[num_particles];

for (int i = 0; i < num_particles; i++) {
px[i] = random (width);
py[i] = random (height);
}
}

void draw() {
if (mousePressed){
background(0);
}
for (int i = 0; i < num_particles; i = i+1) {
px[i] = constrain (px[i] + random (-10, 10), 0, width);
py[i] = constrain (py[i] + random (-10, 10), 0, height);
stroke(255);
fill( random(255), random(255), random(255), random(255));
ellipse (px[i], py[i], 50, 50);
}
}

 

Exercício código

 

 

 

 

 

 

 

void setup() {
    size( 500, 500);
    background (255);
    noLoop();
    smooth();
    
}
 
void draw() {
    
    
    noStroke();
    fill(5, 199, 170, 170);
    triangle (40, 300, 100, 20, 360, 360);
    
    fill(5, 19, 170, 170);
    triangle (90, 100, 100, 20, 360, 360);
    
    fill(5, 19, 70, 170);
    triangle (140, 200, 200, 20, 360, 360);

    fill(175, 19, 170, 70);
    triangle (140, 200, 200, 90, 460, 60);
    
    fill(250, 205, 90, 240);
    triangle (140, 300, 900, 90, 460, 60);
  
    fill(5, 255, 40, 100);
    triangle (100, 200, 900, 290, 400, 360);
 
 
}

// exercício realizado a partir dos exemplos disponibilizados pelo professor: exercício das particulas.

float px[];
float py[];
 
int num_particles = 200;
 
void setup() {  
    size(300, 300); //tamanho da tela
 
    background(255); //cor do fundo
    
    px = new float[num_particles];
    py = new float[num_particles];
    
    for (int i = 0; i < num_particles; i++) {
        px[i] = random (width);
        py[i] = random (height);
    }
} 
 
void draw() {
    background(255, 0, 0); //cor do fundo
           
       for (int i = 0; i < num_particles; i = i+1) {
        px[i] = constrain (px[i] + random (-10, 10), 0, width);
        py[i] = constrain (py[i] + random (-10, 10), 0, height);
 
        triangle (px[i], py[i], px[i]+py[i], py[i]+py[i], px[i]+px[i]+px[i], py[i]-px[i]+py[i]); //coordenadas aleatórias dos triângulos
    }

    for (int i = 0; i < num_particles; i = i+1) {
        px[i] = constrain (px[i] + random (-10, 10), 0, width);
        py[i] = constrain (py[i] + random (-10, 10), 0, height);
 
        triangle (px[i], py[i], px[i]+5, py[i]+5, px[i]+15, py[i]);
        fill (240);
        
    }
       
    }

Exercício de Código (Processing)

Imagem estática:

Para o exercício da imagem estática, decidi jogar essencialmente com as transparências das formas. Comecei por colocar uma imagem no fundo da tela, e a partir daí fui criando as formas triangulares, de maneira a alcançar a cor branca no centro, onde todos os triângulos se sobrepõem. Depois, criei os círculos que estão colocados sobre a imagem de fundo, e por trás dos triângulos,  para dar uma noção de profundidade à imagem. Por último, criei o pequeno círculo que está no centro, que coloquei sobre todas as outras formas, tal como os losangos sugerem a dilatação dos triângulos.

Neste exercício, tentei também utilizar as diferentes formas que fomos aprendendo ao longo do curso das aulas, e explorá-las de uma forma mais criativa.

size (500, 500);
colorMode (RGB);
background (0, 0, 0);

PImage img = loadImage ("18317074-red-glitter-texture-for-background.jpg");
image (img, 0, 0, 500, 500);

//círculos
noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 700, 700);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 650, 650);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 600, 600);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 550, 550);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 500, 500);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 450, 450);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 400, 400);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 350, 350);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 300, 300);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 250, 250);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 200, 200);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 150, 150);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 100, 100);

noFill();
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 50, 50);


//triângulos
fill(255, 70);
noStroke ();
triangle (50, 350, 450, 350, 250, 0);

fill(255, 70);
noStroke ();
triangle (50, 400, 450, 400, 250, 50);

fill(255, 70);
noStroke ();
triangle (50, 450, 450, 450, 250, 100);

fill(255, 70);
noStroke ();
triangle (50, 500, 450, 500, 250, 150);

fill(255, 70);
noStroke ();
triangle (50, 550, 450, 550, 250, 200);

fill(255, 70);
noStroke ();
triangle (50, 0, 250, 350, 450, 0);

fill(255, 70);
noStroke ();
triangle (50, 50, 250, 400, 450, 50);

fill(255, 70);
noStroke ();
triangle (50, 100, 250, 450, 450, 100);

fill(255, 70);
noStroke ();
triangle (50, 150, 250, 500, 450, 150);

fill(255, 70);
noStroke ();
triangle (50, 200, 250, 550, 450, 200);


//círculo central
fill(0, 90);
strokeWeight (20);
stroke (0, 99);
ellipse (250, 250, 45, 45);


//losangos
noFill ();
stroke (#051E5F, 60);
strokeWeight (5);
beginShape ();
vertex (0, 250);
vertex (50, 0);
vertex (100, 250);
vertex (50, 550);
endShape (CLOSE);

noFill ();
stroke (#051E5F, 60);
strokeWeight (5);
beginShape ();
vertex (50, 250);
vertex (100, 0);
vertex (150, 250);
vertex (100, 500);
endShape (CLOSE);

noFill ();
stroke (#051E5F, 60);
strokeWeight (5);
beginShape ();
vertex (100, 250);
vertex (150, 50);
vertex (200, 250);
vertex (150, 450);
endShape (CLOSE);

noFill ();
stroke (#051E5F, 60);
strokeWeight (5);
beginShape ();
vertex (150, 250);
vertex (200, 100);
vertex (250, 250);
vertex (200, 400);
endShape (CLOSE);

noFill ();
stroke (#051E5F, 60);
strokeWeight (5);
beginShape ();
vertex (200, 250);
vertex (250, 150);
vertex (300, 250);
vertex (250, 350);
endShape (CLOSE);

noFill ();
stroke (#051E5F, 60);
strokeWeight (5);
beginShape ();
vertex (250, 250);
vertex (300, 100);
vertex (350, 250);
vertex (300, 400);
endShape (CLOSE);

noFill ();
stroke (#051E5F, 60);
strokeWeight (5);
beginShape ();
vertex (300, 250);
vertex (350, 50);
vertex (400, 250);
vertex (350, 450);
endShape (CLOSE);

noFill ();
stroke (#051E5F, 60);
strokeWeight (5);
beginShape ();
vertex (350, 250);
vertex (400, 0);
vertex (450, 250);
vertex (400, 500);
endShape (CLOSE);

noFill ();
stroke (#051E5F, 60);
strokeWeight (5);
beginShape ();
vertex (400, 250);
vertex (450, 0);
vertex (500, 250);
vertex (450, 550);
endShape (CLOSE);

Imagem dinâmica:

Para o exercício da imagem dinâmica, eu utilizei o pontilhismo, uma técnica que aprendi no site do Processing.

A animação consiste na criação de uma imagem, à medida que círculos de vários tamanhos vão aparecendo na tela. Vão aparecendo círculos de tamanhos diferentes, consoante a posição onde o rato se encontra. A velocidade com que aparecem os círculos, depende também da velocidade com que o rato é movido, por cima da imagem.

     

PImage img;
int smallPoint, largePoint;

void setup() {
  size(500, 500);
  img = loadImage("625474_4380491563960_1765036948_n.jpg");
  smallPoint = 10;
  largePoint = 50;
  imageMode(CENTER);
  noStroke();
  background(0);
}

void draw() { 
  float pointillize = map(mouseX, mouseY, width, smallPoint, largePoint);
  int x = int(random(img.width));
  int y = int(random(img.height));
  color pix = img.get(x, y);
  fill(pix, 150);
  ellipse(x, y, pointillize, pointillize);
}

PROCESSING

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

código

// FORMA GEOMETRICA
// (fundo)
size (400, 400);
background (#FFFFFF);

// Prisma Quadrangular
// (frente)
stroke (155, 0, 0);
line (100, 95, 200, 200);
line (120, 90, 200, 200);
line (140, 86, 200, 200);
line (160, 82, 200, 200); 
line (180, 78, 200, 200); 
line (200, 72, 200, 200); line (100, 95, 210, 70);

// (face direita)
line (210, 70, 200, 200);
line (215, 78, 200, 200);
line (220, 86, 200, 200);
line (224, 94, 200, 200);
line (228, 98, 200, 200); line (210, 70, 228, 98);

// (linhas invisiveis - face esquerda)
stroke (0, 0, 0, 100);
line (110, 102, 200, 200);
line (120, 108, 200, 200);
line (130, 114, 200, 200);
line (140, 120, 200, 200); line (100, 95, 140, 120);

// (linhas invisiveis - fundo)
line (156, 116, 200, 200); 
line (174, 112, 200, 200); 
line (192, 108, 200, 200); 
line (210, 102, 200, 200); 
line (228, 98, 200, 200); line (228, 98, 140, 120);

// Prisma Conico
// (frente)
stroke (155, 0, 0);
line (200, 200, 294, 294);
line (200, 200, 270, 280);
line (200, 200, 230, 275);
line (200, 200, 200, 280); 
line (200, 200, 184, 288); 
line (200, 200, 171, 306); 

fill (0, 0, 0, 0);

ellipse (236, 310, 130, 70);

———–

2º exercício – Composição Dinâmica

 

código

// ELIPSES COM CINTILAÇAO EM LOOP
// Tempo da animação
long anim_time = 10;
 
// tempo total de animação (em milissegundos)
long max_anim_time = 10000;
long last_update = 100;
 
void setup() {  
    size(300, 300); 
    background(255);
 
// tempo em milissegundos desde o inicio do sketch
    last_update = millis();
} 
 
void draw() {
    background(200);
// tempo actual
    long now = millis();
    
// tempo desde a ultima frame
    long delta = millis() - last_update;
    last_update = now;
    
// objecto que pulsa a cada 2 segundos
    anim_time = (anim_time + delta) % max_anim_time;


// ELIPSES
   noFill ();
   stroke (150, 100, 50);

// (cima)
ellipse (width/3, height/3., anim_time / 20, anim_time / 20);
ellipse (width/2, height/3, anim_time / 20, anim_time / 20);
ellipse (width/1.5, height/3, anim_time / 20, anim_time / 20);

// (centro - cima)
ellipse (width/2.5, height/2.5, anim_time / 20, anim_time / 20);
ellipse (width/2, height/2.5, anim_time / 20, anim_time / 20);
ellipse (width/1.65, height/2.5, anim_time / 20, anim_time / 20);   
      
// (centro)
ellipse (width/2, height/2, anim_time / 20, anim_time / 20);

// (centro - baixo)
ellipse (width/2.5, height/1.75, anim_time / 20, anim_time / 20);
ellipse (width/2, height/1.75, anim_time / 20, anim_time / 20);
ellipse (width/1.65, height/1.75, anim_time / 20, anim_time / 20);
   
// (baixo)
ellipse (width/3, height/1.5, anim_time / 20, anim_time / 20);
ellipse (width/2, height/1.5, anim_time / 20, anim_time / 20);
ellipse (width/1.5, height/1.5, anim_time / 20, anim_time / 20);

      
//PARTICULAS EM FORMA DE LINHA - RISCO
float px[];
float py[];

// (densidade)
int num_particles = 100;
    px = new float[num_particles];
    py = new float[num_particles];

// (riscos)
    for (int i = 0; i < num_particles; i++) {
       px[i] = random (width);
       py[i] = random (height);
          stroke (80, 80, 10);
    }
 
// (posicionamento)
    for (int i = 0; i < num_particles; i = i+1) {
        
      px[i] = constrain (px[i] + random (-100, 200), 100, width);
        noFill ();
      py[i] = constrain (py[i] + random (-10, 10), 0, height);
 
        ellipse (px[10], py[i], 10, 10);
    }
}
float px[];
float py[];

int num_particles = 100;

Visita de estudo ao FabLab Lisboa | 22 Maio 2014 às 11:00

É já na próxima Quinta-feira, dia 22 de Maio, a visita de estudo ao FabLab EDP, onde iremos fabricar a colecção de ícones que criaram como 1º exercício da disciplina de Meios Digitais!

A visita será das 11:00 às 13:00 e recomenda-se chegarem 15 min. antes. O ponto de encontro será directamente no local da visita – Mercado do Forno Tijolo.

Como preparação, explorem o site do fabLab Lisboa e os projectos que têm sido concretizados por lá!

Processing – exercícios

Exercício I

Ao construir esta composição procurei aplicar os conhecimentos básicos que aprendemos nas aulas de códigos.

 

código

size (500, 500);

background (#FFF0F0);

noStroke ();

fill (#FFFFFF);

quad (0, 0, 500, 0, 465, 200, 45, 229);

fill (#6C0193);

quad (320, 235, 395, 295, 320, 355, 240, 285);

fill (#FFA615);

quad (380, 100, 465, 200, 380, 290, 285, 200);

fill (#D39309);

beginShape ();

vertex (378,100);

vertex (355, 125);

vertex (335, 115);

endShape (CLOSE);

fill (230, 250, 15, 100);

quad (290, 125, 350, 200, 290, 265, 230, 200);

fill (#E8E7E5);

quad (294, 130, 330, 110, 355, 125, 320, 162);

fill (#03831F);

quad (210, 170, 234, 195, 262, 158, 245, 142);

fill(#C60A9E);

quad (130, 290, 160, 330, 255, 228, 230, 200);

fill (#C6C6C6);

quad (140, 229, 170, 258, 235, 193, 210, 171);

fill (#20AEC9);

quad (45, 229, 100, 318, 170, 258, 110, 185);

fill (#0F7183);

beginShape ();

vertex (110,185);

vertex (143, 225);

vertex (175, 200);

endShape (CLOSE);

beginShape ();

vertex (101,317);

vertex (130, 292);

vertex (137,300);

endShape (CLOSE);
fill (196, 196, 196, 60);

ellipse (250, 400, 400, 20);

 

Exercício II

A partir dos exemplos cedidos pelos professores e alterando algumas das variáveis e seus valores procurei explorar texturas criadas com base na sobreposição de elementos/movimentos circulares.

 

código

// Exploração de texturas com a acumulação de elementos circulares

void setup() {

    size(500, 500);

    background(0);

  frameRate(200);

} 
  void draw() {

    ellipseMode(150);

    float sz = (frameCount % 5000) / 100.0;

    translate (width/2, height/2);

    rotate (TWO_PI * sz);

    fill (random(255), random(255), random(255));

    ellipse (0, 0, 15 * sz, 500 * sz);
}

fim

Exercício Processing

 

 

 

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

No primeiro exercício pretendi criar uma imagem ilustrativa de um 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

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.

 

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

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

 

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);
  }
}

 

Exercício Processing

Exercício 1 imagem estática:

A Minha Imagem Estática foi baseada numa das criaturas trabalhador , ou minion, do filme Gru – O mal disposto. Usando Formas simples no processing e manipulação de cor obtive uma imagem geométrica da criatura.

Minion:

 

//Construção de uma imagem estática com base uma das criaturas trabalhadores 
//(minions) do filme Gru-O Mal Disposto:
void setup() {
size (1000, 1000);
background (252,169,13);
}
void draw() {
noStroke();
fill (252,225,13);
ellipse (300,550,100,100); //Ombro E
ellipse (700,550,100,100); //Ombro D
fill (0,0,0);
quad (250,800,300,800,300,850,250,850); //Mão E
quad (700,800,750,800,750,850,700,850); //Mão D
fill (252,225,13);
quad (250,550,300,550,300,800,250,800); //Braço E
quad (700,550,750,550,750,800,700,800); //Braço D
fill (8,91,203);
stroke (2);
quad (400,800,450,800,450,950,400,950); //Perna E
quad (550,800,600,800,600,950,550,950); //Perna D
noStroke ();
fill (0,0,0);
quad (375,950,475,950,475,1000,375,1000); //Pé E
quad (525,950,625,950,625,1000,525,1000); //Pé D
stroke (2);
line (500,65,500,150); // Cabelo 3
line (400,100,450,150); // Cabelo 3
line (450,75,475,150); // Cabelo 2
line (550,75,525,150); //Cabelo 4
line (600,100,550,150); // Cabelo 5
noStroke ();
fill (252,225,13);
ellipse (500,300,400,400); //Cabeça Minion
fill (8,91,203);
smooth ();
stroke (2);
ellipse (500,650,400,400); //Bottom
noStroke ();
fill (252,225,13);
quad (300,300,700,300,700,650,300,650); // Corpo Minion
fill (100,100,100);
quad (300,250,700,250,700,350,300,350); //Oculos parte 1
fill (0,0,0);
quad (375,250,625,250,625,350,375,350); //Oculos parte 2
stroke (2);
line (300,300,700,300); //Oculos parte 3
fill (188,188,188);
ellipse (500,300,200,200); //Oculos grande
fill (252,252,252);
ellipse (500,300,100,100); //Oculos pequenos
fill (113,51,48);
ellipse (500,300,50,50); //Olho
fill (0,0,0);
ellipse (500,300,25,25); //Olho 2
fill (252,252,252);
ellipse (505,295,5,5); //Olho brilho
fill (0,0,0);
ellipse (500,475,50,50); //Boca
fill (8,91,203);
quad (350,550,650,550,650,650,350,650); //roupa1
fill (0,0,0);
ellipse (375,575,25,25); //Botão1
ellipse (625,575,25,25); //Botão2
fill (8,91,203);
quad (600,500,650,500,650,550,600,550); //1p Alça D
triangle (650,450,650,500,600,500); //2p Alça D
quad (650,450,700,450,700,500,650,500); //3p Alça D
quad (300,450,350,450,350,500,300,500); //1p Alça E
triangle (350,450,400,500,350,500); //2p Alça E
quad (350,500,400,500,400,550,350,550); //3p Alça E
stroke(3,47,106);
fill (3,67,155);
ellipse (500,700,100,100); //Bolso circulo
quad (450,650,550,650,550,700,450,700); //Bolso quadrado

}

Exercício 1- Minion Stencil

 

//Construção de uma imagem estática com base uma das criaturas trabalhadores 
//(minions) do filme Gru-O Mal Disposto - Stencil:
void setup() {
size (1000, 1000);
background (252,169,13);
}
void draw() {
noStroke();
ellipse (300,550,100,100);
ellipse (700,550,100,100);
quad (250,800,300,800,300,850,250,850);
quad (700,800,750,800,750,850,700,850);
quad (250,550,300,550,300,800,250,800);
quad (700,550,750,550,750,800,700,800);
quad (400,800,450,800,450,950,400,950);
quad (550,800,600,800,600,950,550,950);
noStroke ();
quad (375,950,475,950,475,1000,375,1000);
quad (525,950,625,950,625,1000,525,1000);
line (500,65,500,150);
line (400,100,450,150);
line (450,75,475,150);
line (550,75,525,150);
line (600,100,550,150);
ellipse (500,300,400,400);
smooth ();
ellipse (500,650,400,400);
noStroke ();
quad (300,300,700,300,700,650,300,650);
quad (300,250,700,250,700,350,300,350);
quad (375,250,625,250,625,350,375,350);
line (300,300,700,300);
ellipse (500,300,200,200);
ellipse (500,300,100,100);
ellipse (500,300,50,50);
ellipse (500,300,25,25);
ellipse (505,295,5,5);
ellipse (500,475,50,50);
quad (350,550,650,550,650,650,350,650);
ellipse (375,575,25,25);
ellipse (625,575,25,25);
quad (600,500,650,500,650,550,600,550);
triangle (650,450,650,500,600,500);
quad (650,450,700,450,700,500,650,500);
quad (300,450,350,450,350,500,300,500);
triangle (350,450,400,500,350,500);
quad (350,500,400,500,400,550,350,550);
ellipse (500,700,100,100);
quad (450,650,550,650,550,700,450,700);

}

Exercício 2 – Composição com Movimento:

Jarro de luz:

O trabalho: http://www.openprocessing.org/sketch/148991

O meu exercício de movimento visa buscar o movimento na construção de uma forma, neste caso um vaso vermelho e amarelo com uma flor geométrica ornamental. Foi baseado num trabalho online desenvolvido em Java com o Processing, link para o trabalho:

Exercício 2 baseado em: http://www.openprocessing.org/sketch/148797

//Exercício de movimento: O movimento em busca da forma- Vaso com flor ornamental.
// O exercício foi baseado no trabalho: http://www.openprocessing.org/sketch/148797 
float raggio1 = 100; // Variável Float modificada de 250 para 100
float raggio2 = 200; // Variável Float modificada de 180 para 200
float raggio3 = 115; // Variável Float modificada de 110 para 150
float passoRad1 = PI/88;
float passoRad2 = PI/61;
float passoRad3 = PI/40;
void setup(){
background(0);
size(600,600);
stroke(255,255,255); // Stroke mudado de (255,0,0,50) para (255,255,255)
frameRate(60);
smooth();
}

void draw(){
float c5x= 300; // Variável e coordenadas modificadas
float c5y= 400; // Variável e coordenadas modificadas
float c6x= 300; // Variável e coordenadas modificadas
float c6y= 300; // Variável e coordenadas modificadas
float rad1 = frameCount*passoRad1; // Raio Modificado
float c1x = c5x + cos(rad1)*raggio1;
float c1y = c5y + sin(rad1)*raggio1;
float rad2 = frameCount*passoRad2; // Raio Modificado
float c2x = c6x + cos(rad2)*raggio2;
float c2y = c6y + sin(rad2)*raggio2;
float rad3 = frameCount*passoRad3; // Raio Modificado
stroke(#C6991A); // Cores Modificadas
line(c2x,c2y,c1x,c2y); // Modificado de Elipse para linha
stroke(255,0,0,50); // Cores Modificadas
line(c1x,c1y,c2x,c2y); // Modificado de Elipse para linha

}

 

Exercício de código 1 e 2

Exercício 1- composição estática

Neste exercício trabalhei com elementos geométricos formando um padrão que lembrasse o azulejo, dando dinamismo usando o mesmo verde mas com saturações diferentes.
size (500, 500);
colorMode (RGB);
background (92, 121, 60);
ellipse (250, 250,635, 530);
ellipse (250, 250,530, 635);
ellipse (250, 250,615, 510);
ellipse (250, 250,510, 615);
fill (104, 137, 68);
ellipse (250, 250,595, 490);
ellipse (250, 250,490, 595);
fill (255);
ellipse (250, 250,545, 440);
ellipse (250, 250,440, 545);
ellipse (250, 250,525, 420);
ellipse (250, 250,420, 525);
ellipse (250, 250,505, 400);
ellipse (250, 250,400, 505);
ellipse (250, 250,485, 380);
ellipse (250, 250,380, 485);
ellipse (250, 250,465, 360);
ellipse (250, 250,360, 465);
fill (120, 157, 78);
ellipse (250, 250,445, 340);
ellipse (250, 250,340, 445);
fill (255);
ellipse (250, 250,395, 290);
ellipse (250, 250,290, 395);
ellipse (250, 250,375, 270);
ellipse (250, 250,270, 375);
ellipse (250, 250,355, 250);
ellipse (250, 250,250, 355);
ellipse (250, 250,335, 230);
ellipse (250, 250,230, 335);
fill (134, 175, 88);
ellipse (250, 250,315, 210);
ellipse (250, 250,210, 315);
fill (255);
ellipse (250, 250,265, 160);
ellipse (250, 250,160, 265);
ellipse (250, 250,245, 140);
ellipse (250, 250,140, 245);
ellipse (250, 250,225, 120);
ellipse (250, 250,120, 225);
ellipse (250, 250,205, 100);
ellipse (250, 250,100, 205);
ellipse (250, 250,195, 80);
ellipse (250, 250, 80, 195);
fill (153, 198, 102);
ellipse (250, 250, 175, 60);
ellipse (250, 250, 60, 175);
fill (255);
ellipse (250, 250,10, 125);
ellipse (250, 250,125, 10);

Exercício 2- composição com movimento

 No segundo exercício, trabalhei com um exemplo mostrado na aula, skin onion, desenvolvendo e explorando realizando um resultado mais elaborado e mais dinâmico. Meti o fundo com animação dando a ideia de mais movimento ao resultado final.

void setup() {  
    size(400, 400); 
    background(#F7F005);
    frameRate(40);
 
} 
 
void draw() {
   fill (random (255), 15);
   rect (0 ,0, 800, 800);
    noFill();
    rectMode(CENTER);
    float sz = (frameCount %100) / 100.0;
    translate (width/4, height/2);
    rotate (PI * 35 * sz);    
    
    ellipse (0,0,150* sz, 350 *sz);
    ellipse (0,0, 350 *sz, 150* sz);
     translate (width/2, height/6);
      ellipse (0,0,350* sz, 350 *sz);
    ellipse (0,0,150* sz, 350 *sz);
    ellipse (0,0, 350 *sz, 350* sz);
      
   }

 
   

Exercício de Código 1 e 2

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

//exercício de experimentação das funcionalidades do processing.
//tamanho da tela
size (300, 300);

// criação de diferentes formas (rectângulo, triângulo e elipse) de modo a compor uma composição.
// experimentação de diferentes cores e localizações das formas.

background (10, 158, 247);
smooth ();
fill (50, 91, 155);
rect (0, 140, 300, 250);
fill (240, 218, 148);
rect (0, 210, 300, 250);
fill (49, 39, 4);
rect (92, 150, 7, 300);
fill (240, 186, 7);
triangle (170, 180, 30, 180, 95, 100);
fill (250, 241, 86);
ellipse (250, 50, 70, 70);
fill (209, 208, 204);
rect (120, 240, 70, 8);
rect (120, 250, 70, 8);
rect (120, 260, 70, 8);
rect (120, 270, 70, 8);
rect (120, 280, 10, 15);
rect (180, 280, 10, 15);

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

                    

//Partindo de um dos exemplos dado pela professora, onde um quadrado se deslocava do centro da página para o lado direito, repetindo o movimento continuamente, optei por fazer o mesmo com algumas alterações.
//O quadrado foi substituido por 4 imagens em movimento, não só para a direita como em diversos sentido, alterei a velocidade de deslocação e o background.

PImage img;
PImage img1;
PImage img2;
PImage img3;

//local inicial das imagens
float x1;
float x2 = 400;
float x3 = 200;
float x4 = 0;
float y1 = 0;
float y2 = 400;
float y3 = 00;
float y4 = 400;

//velocidade da deslocação das imagens
float vx1 = 0.5;
float vy1 = 0;
float vx2 = - 0.5;
float vy2 = 0;
float vx3 = 0;
float vy3 = 0.5;
float vx4 = 0;
float vy4 = - 0.5;

//tamanho da tela e download das imagens
void setup(){
size(600,600);
img=loadImage("DSCN9144 - Cópia.png");
img1=loadImage("SAM_0400 - Cópia.png");
img2=loadImage("260420091023.png");
img3=loadImage("DSCN9953 - Cópia-cópia.png");
}

//criação e cores de background
void draw(){
background(255);
fill (250, 129, 96);
rect (0, 400, 200, 200);
fill (250, 82, 35);
rect (200, 400, 200, 400);
fill (250, 8, 3);
rect (400, 400, 200, 200);
fill (178, 98, 75);
rect (0, 200, 200, 200);
fill (178, 68, 38);
rect (200, 200, 200, 200);
fill (178, 44, 7);
rect (400, 200, 200, 200);
fill (118, 67, 53);
rect (0, 0, 200, 200);
fill (118, 49, 30);
rect (200, 0, 200, 200);
fill (118, 30, 6);
rect (400, 0, 200, 200);

//deslocamento das imagens segundo um eixo
x1 = x1 + vx1;
y1 = y1 + vy1;
x2 = x2 + vx2;
y2 = y2 + vy2;
x3 = x3 + vx3;
y3 = y3 + vy3;
x4 = x4 + vx4;
y4 = y4 + vy4;

image(img, x1, y1, 200,200);
image(img1, x3, y3, 200,200);
image(img2, x2, y2, 200,200);
image(img3, x4, y4, 200,200);

//repetição do processo, de modo a repetitir sistematicamente a animação
if (x1 > width) { x1 = 0; }
if (x2 < -200) { x2 = 400; }
if (y3 > height) { y3 = 0; }
if (y4 < -200) { y4 = 400; }
}

Exercício 1 

 Código:

//Para este exercício peguei na imagem de Visakh Menon e tentei representá-la. Não o consegui totalmente nem de forma igual mas penso que foi uma boa referência para o exercício pedido uma vez que me permitia explorar todas as funções aprendidas em aula.
//fundo
size (300 , 500);
background (#F5F3B9);
// canto azul
beginShape ();
strokeWeight (1/10);
fill (168, 198, 173);
vertex (300, 350);
vertex (300, 500);
vertex (50, 500);
endShape (CLOSE);
// forma superior
beginShape ();
strokeWeight (1/10);
fill (227, 208, 133);
vertex (0,0);
vertex (300, 0);
vertex (300, 200);
vertex (200, 250);
vertex (0, 100);
endShape ();
// primeiro "cubo"
beginShape ();
noStroke ();
// cor topo
fill (216, 66, 93);
vertex (300, 250);
vertex (300, 280);
vertex (280, 265);
endShape ();
beginShape ();
noStroke ();
// cor frente
fill (147, 21, 44);
vertex (280, 265);
vertex (300, 280);
vertex (300, 330);
vertex (280, 310);
endShape (CLOSE);
// segundo "cubo"
beginShape ();
noStroke ();
fill (216, 66, 93);
vertex (260, 290);
vertex (300, 320);
vertex (300, 335);
vertex (260, 370);
vertex (210, 330);
endShape (CLOSE);
beginShape ();
noStroke();
// cor lateral
fill (206, 44, 82);
vertex (300, 335);
vertex (300, 350);
vertex (260, 375);
vertex (260, 370);
endShape ();
beginShape ();
noStroke ();
fill (147, 21, 44);
vertex (210, 330);
vertex (260, 370);
vertex (260, 375);
vertex (225, 395);
vertex (210, 383);
endShape ();
// figura lado esquerdo
rectMode (CENTER);
strokeWeight (1);
stroke (#030001);
noFill();
rect (50, 375, 50, 50);
line (75, 350, 0, 300);
line (25, 350, 0, 333);
line (75, 400, 0, 352);
line (25, 400, 0, 384);
//linhas por cima do azul
strokeWeight (2);
line (300, 380, 100, 500);
line (300, 440, 200, 500);
strokeWeight (1/2);
line (300, 390, 118, 500);
line (300, 392, 121, 500);
line (300, 425, 175, 500);
line (300, 427, 178, 500);
line (300, 362, 71, 500);
line (300, 382, 103, 500);
line (300, 442, 203, 500);
line (300, 446, 209, 500);
line (300, 474, 251, 500);
strokeWeight (1);
line (300, 360, 68, 500);
line (300, 458, 224, 500);
// triangulos
strokeWeight (1/2);
triangle (100, 145, 170, 200, 145, 95);
line (100, 145, 300, 50);
line (170, 200, 300, 135);
line (145, 95, 300, 25);
line (124, 118, 300, 38);
line (140, 176, 300, 97);
strokeWeight (1);
line (120, 161, 300, 75);
line (157, 190, 300, 118);
line (155, 135, 300, 67);
// triangulo interior
beginShape ();
fill (55, 100, 60, 127);
vertex (210, 118);
vertex (234, 98);
vertex (300, 67);
vertex (300, 75);
endShape ();
beginShape ();
noStroke ();
fill (55, 100, 60);
vertex (234, 98);
vertex (210, 118);
vertex (250, 145);
endShape();
beginShape ();
fill (55, 100, 60, 127);
vertex (234, 98);
vertex (300, 67);
vertex (300, 118);
vertex (250, 145);
endShape ();

 

Exercício 2

Código:

//Para este exercício tinha uma ideia em mente que não concretizei pois não consegui explorar as novas aprendizagens como gostava de ter feito. No entanto, dessas experiências obtive este resultado que apesar de simples me pareceu resultar favoravelmente.
long last_update = 0;
long anim_time = 0;
long max_anim_time = 30000;
void setup() {
size(500, 500);

background(255);
frameRate (100);
last_update = millis();
}

void draw() {

long now = millis();
long delta = millis() - last_update;
last_update = now;
anim_time = (anim_time + delta) % max_anim_time;

noFill();
rectMode(CENTER);
float sz = (frameCount % 100) / 100.0;
translate (width/2, height/2);
rotate (TWO_PI*sz);
rect (width/2, height/2, anim_time / 10, anim_time / 10);

fill(255);
ellipse (width/2, height/2, anim_time / 20, anim_time / 20);

}

Processing- Código

Exercício 1:
Para este exercício decidi criar algo mais figurativo para que me obrigasse a utilizar a maior parte das funções apreendidas.

size (500,500);
background (255);

noStroke();
fill(#FFD8F5);
ellipse(250,125,150,150);

fill(#F0BD72);
stroke(#D19A4E);
strokeWeight(4);
triangle (175,140,250,375,325,140);

noStroke();
fill(#FFD8F5);
ellipse(180,140,60,40);
ellipse(185,130,45,50);
ellipse(250,140,100,40);
ellipse(310,140,40,40);
ellipse(320,130,50,50);

fill(255,216,245,230);
ellipse(260,150,25,190);

strokeWeight (3);
line(250,50,200,45);

 

Exercício 2:
Neste exercício decidi fazer algo interactivo que deixasse rasto. Para ver o desenho feito anteriormente, decidi por transparência na cor para ver a cor que se encontra por baixo.
Para interagir, basta mover o rato.

float px;
float py;
color col;
float jump = 30;
//função que determina o estado do programa, só é excutada uma vez 
void setup(){
  //tamanho da janela
  size (500,500);
  //cor de fundo
  background(0);
  //cor defenida aleatóriamente
  col = color(int(random(230)),int(random(230)), int(random(230)));
  //localização da forma
    px = random (width);
    py = random (height);
}
//função que actualiza o estado do ecrã a cada iteração(frame)
void draw() {
 
   float npx = constrain (px + random (-jump, jump), 0, width);
    float npy = constrain (py + random (-jump, jump), 0, height);
    col = color(int(random(300)),int(random(200)), int(random(200)));
 
 //composição da forma circulo
  fill(col,80);
stroke(255);
strokeWeight(7);
  ellipse(mouseX,mouseY, 100, 100);
 
}