Registos da visita de estudo ao FabLab Lisboa

20140522_visitaFBA_FabLab_vinilJanelaFBAUL_web

Viva, já está publicada no site do FabLab Lisboa a reportagem fotográfica da visita de estudo da turma no passado dia 22 de Maio – para recordarem e para voltarem em qualquer dia aberto – fica a sugestão já para as férias ou para concretizarem os vossos protótipos no próximo ano lectivo.

Um agradecimento muito especial ao Bernardo Gaeiras, ao Rafael Calado e ao Rui Sequeira do FabLab Lisboa, que nos orientaram e ajudaram a produzir as nossas experiências nesta visita! Obrigada também ao Sr. Guilherme da caixotaria Duran, à Maria Boavida do projecto de upcycling, e aos utilizadores que nesse dia partilharam os seus trabalhos que se encontravam a realizar no FabLab :) :) :)

DSC00226

 

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

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

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á!

Exercício de Código: Programação Criativa [Interacção e comportamentos]

Início: 5 Maio | Apresentação na aula: 19 Maio | Publicação online até 23 Maio


CONCEITO
Exploração do código como matéria-prima para expressão artística. Introdução ao Processing como ferramenta de desenho, animação e interacção.

Código » s. m. 1. Coleção de leis. 2. Coleção de regras, preceitos, fórmulas, etc. 3. Sistema de símbolos que permite interpretar, transmitir uma mensagem, representar uma informação de dados. 4. Sistema convencional, rigorosamente estruturado, de símbolos ou de sinais e de regras combinatórias integrado no processo da comunicação.

METODOLOGIA
Duas sessões de apresentação de conteúdos e experimentação, orientadas pelo programador criativo Pedro Ângelo, onde será pedido aos alunos que efectuem 2 breves exercícios de exploração criativa do código utilizando o Processing. A 3ª sessão compreende a apresentação dos trabalhos pelos alunos e comentários, esclarecimento de dúvidas e sugestões pelo orientador do módulo.

 

SESSÃO 1 (5 Maio)

  • Introdução ao Processing
    • Porquê programar?
  • Instalação do Processing
  • Fundamentos da programação em Java
    • Expressões
    • Variáveis
    • Funções
  • Funções de Desenho
    • Tela
    • Cores
    • Pontos
    • Linhas
    • Curvas
    • Elipses
    • Rectângulos
    • Polígonos
    • Formas
    • Estilos
    • Imagens

Slides Sessão 1

Exercício 1
Criar uma composição visual estática no Processing usando pelo menos três das funções de desenho apresentadas na aula. Devem dar-lhe um titulo do género: nomeapelido_codigo_1_titulodosketch

 

SESSÃO 2 (12 Maio)

  • Loop de animação
  • Onion skin
  • Representação do tempo
  • Interpolação
  • Movimento linear
  • Movimento periódico
  • Movimento aleatório
  • Particulas
  • Interacção

Exercício 2
Criar uma composição dinâmica simples a partir de um dos seguintes exemplos (experimentem tentar perceber o que o código faz e modificá-lo até obterem algo que achem interessante). Devem dar-lhe um titulo do género: nomeapelido_codigo_2_titulodosketch.

 

SESSÃO 3 (19 Maio)

A parte inicial da aula será dedicada ao esclarecimento de dúvidas e o restante à apresentação dos vossos exercícios.
Depois da aulta terão até ao final da semana – Sexta-feira, dia 23 de Maio – para publicar no blog um artigo com o código e uma imagem (screenshot/printscreen) da tela de cada um dos vossos dois exercicios.

 

REFERÊNCIAS
Ruth Leavitt (ed.), “Artist and Computer”, 1976
Florian Cramer, “Words Made Flesh”, 2005
Daniel Shiffman, “Nature of Code”, 2012
Casey Reas et al., “Form+Code”, 2010, Princeton Architectural Press
John Maeda, “Creative Code”, 2004, Thames & Hudson
Rick Parent, “Computer Animation, Algorithms and Techniques, Second Edition”, 2007, Morgan Kaufmann
Gary William Flake, “The Computational Beauty of Nature”, 2000, MIT Press
David Atkinson, “Animation Notes: 12 Principles of Animation”
Daniel Shiffman, Learning Processing, 2008, Morgan Kaufmann
Site Oficial do Processing
Comunidade OpenProcessing

Embora com características diferentes, podem explorar também os resultados dos exercícios dos colegas do ano anterior 

Lista de alunos para as sessões de pré-avaliação

1ª sessão: 5 Maio, das 9:30 às 11:00
Sofia Espadinha
Maria Miguel
Margarida Salvador
Hugo Abreu
Filipa Brás
Cláudio Cruz
Catarina Coroado
Carolina Barbosa
Ana Ventura
Afonso Amaro

A partir das 11:00 iniciaremos a aula com a matéria e primeiro exercício de introdução ao Código.

6 Maio, 17h
17:00 Ana Ventura
17:15 Afonso Amaro
17:30 André Jesus
17.45 Carla Lima
17.45 Carolina Barbosa

As sessões seguintes serão marcadas após a conclusão do 3º exercício, na aula de 19 de Maio.

 

Exercicio de Texto

Para este exercício, resolvi criar uma aplicação onde existem 5 personagens que têm várias personalidades e funcionalidades diferentes.

Aparecem em pop-up num canto do ecrã.

 

kirz     Kira – É a personagem principal que te introduz ao programa e é responsável por te dizer o que tens para fazer naquele dia, trabalhos que tens para fazer, etc.

ss (2014-03-11 at 11.59.43)   Neko –  É a personagem responsável por te dar as notícias dos teus sites preferidos, que podes escolher quais são.

ss (2014-03-12 at 12.59.07)  Mari – É a personagem responsável por te dizer quando não estas a trabalhar e devias, determina-te prazos e caso estejas a trabalhar demasiado, ela diz-te para pareres por um bocado.

ss (2014-03-13 at 11.11.23)     Taiko – Dá-te todas as novidades do entertenimento: Jogos, filmes, etc… Recomenda-te vídeos e histórias, assim como sites interessantes.

ss (2014-03-13 at 08.21.28)    Haru – É a responsável por te arranjar uma playlist de músicas para trabalhares, consoante a tua disposição. Dá-te todas as músicas novas consoante também os seus gostos.

Exercício de Texto

Para este exercício, escolhi trabalhar com a imagem da Diana Gomes, onde se apresenta um cão de guarda. Para criar então uma metáfora, decidi pegar na expressão: “O cão é o melhor amigo do Homem”, mas suaviza-la, de maneira a que a imagem não fique pesada numa perspectiva da sua composição. Assim, apenas inserindo a palavra “Amigo”, é o suficiente para as pessoas aperceberem-se do que se trata. Para alem do mais, decidi moldar a palavra “amigo”, de maneira a que ficasse na localização onde estariam os dentes do cão, vincando esta noção de paradoxo.

 

lucasesteves_paradoxo_ficheiro_vestorial

Exercício de Imagem

Para o meu exercício, ao invés de modificar a ícone de uma ferramenta de um programa, decidi criar o meu próprio conceito para um programa e criar também uma metáfora através do ícone que o programa teria.

Este programa teria a finalidade de permitir, de forma rápida, que o utilizador escreva tudo o que se lembre sobre o sonho que teve na noite anterior. Sendo uma combinação entre um programa de texto, e escrita sobre sonhos, decidi implementar a componente da escrita com uma pena e a componente dos sonhos, simbolizado com a estrela. Juntos, dão o logo deste programa.

 

 

Bitmap

lucasesteves_metafora_bitmap

 

 

Vectorial

 

 

 

 

lucasesteves_metafora_vector

 

 

Pixelart

 

lucasesteves_metafora_pixelart

PERGUNTAS E RESPOSTAS

Para este exercício utilizei a imagem da minha colega Mafalda Monteiro.

Pensei no baú como um objecto que é usado para guardar outros objectos. Metaforicamente, o baú pode ser o nosso cérebro onde guardamos as memórias, sentidos, imagens, sensações, etc. Usei então, a frase “O homem procura respostas e encontra perguntas” de um autor desconhecido, que é claramente um paradoxo. O típico baú que costuma estar cheio de moedas e dinheiro está então, cheio de pontos de interrogação, representando as questões, dúvidas e interrogações das quais a Humanidade procura respostas.

Script MT Bold é o tipo de letra usado, para sugerir a escrita humana.

 

baú

Exercício Código

Neste exercício fiz algumas tentativas com alguma dificuldade.

Na primeira parte do exercício até foi relativamente fácil e tive a ideia de criar uma cara simples com uma expressão algo cómica:

filipepinto_codigo1_surprise_face_screenshot

void setup() {
size (400, 500);
background (155, 210, 235);
smooth (8);
fill (250);
ellipse (200, 300, 200, 300);
ellipse (100, 100, 75, 100);
ellipse (300, 100, 75, 100);
fill (50);
ellipse (90, 120, 30, 50);
ellipse (290, 120, 30, 50);
line (90, 200, 30, 150);
line (85, 210, 20, 180);
line (80, 225, 10, 220);
line (310, 200, 370, 150);
line (315, 210, 380, 180);
line (320, 225, 390, 220);
noStroke ();
ellipse (200, 310, 190, 280);
fill (254, 102, 100);
ellipse (200, 375, 125, 100);

fill (165, 180, 190);
noStroke ();
ellipse (200, 475, 50, 25);

}

Na segunda parte do exercício criei uma pequena interactividade que permite criar círculos de várias cores à medida que se vai clicando no fundo.

filipepinto_codigo2_ellipseinteract_screenshot

 

void setup () {
size (800, 800);
colorMode(RGB);
background(255, 204, 20);
}

void draw () {
if (mousePressed) {
rectMode (CENTER);
noStroke();
fill (random(255), random(255), random(255), 70);
ellipse (mouseX, mouseY, 200, 200);
}
}

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.

Screen Shot 2014-05-29 at 11.50.47

 


//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. peterraday_text_cover peterraday_text_workinprogress_a peterraday_text_workinprogress_b

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.

Conchitadocrl



 
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.

teleestatua

teleestatua1

teleestatua2


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

IMAGEM

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.

animacao

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.

joaoabreu_texto_ecra

 

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

bitmap

 

joaoabreu_imagem_vector_ecra

vector

 

pixel art

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

FIXO

 

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/&#8221; (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

ani3

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

ani3

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:

1º exercício

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:

 

2º exercício 2º exercício_2ªparte

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

Cubos

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

 

Cubo 3D

 

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

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.

a

 

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)


1
2

3 4

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.

mafaldamonteiro_estatica


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.

mafaldamonteiro_dinamico

mafaldamonteiro_estatica

mafaldamonteiro_dinamico

<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

Image
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

Image

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

4zJkGtf

 

 

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

kLyqT4s

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

Captura de tela 2014-05-24 16.58.49

 

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

}
}

Captura de tela 2014-05-24 17.02.30 Captura de tela 2014-05-24 17.02.37

 

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

}

 

 

Meios Digitais

 

 

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

 

Meios Digitais2

 

Meios Digitais3

 

Meios Digitais4

Processing

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

Sem Título


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.

Sem TítuloSem Título


// 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:

 

Screen Shot 2014-05-24 at 12.22.50

 

 

//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:

Screen Shot 2014-05-24 at 12.29.39 Screen Shot 2014-05-24 at 12.31.24 Screen Shot 2014-05-24 at 12.31.31

 

 

 

 

 

 

 

 

 

 

 

 
//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

Captura de ecrã 2014-05-24, às 10.31.09

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.

Captura de ecrã 2014-05-24, às 10.32.42 Captura de ecrã 2014-05-24, às 10.32.47 Captura de ecrã 2014-05-24, às 10.33.13 Captura de ecrã 2014-05-24, às 10.35.19

 

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

sergiolamego_codigo_1_estatico

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…

sergiolamego_codigo_2_dinamico1 sergiolamego_codigo_2_dinamico2

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

interaccao5

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:

casita

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: 

bolas

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.

sketch_1


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

 

sketch_2

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.

sketch_3                              sketch_3

 

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

 

sketch_4                                   sketch_4

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:

Image

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

6

 

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

Image  Image  Image

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

hugoabreu_codigo_1_hand

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

hugoabreu_codigo_2_animation

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 

barbosa P_estatico

 

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 

barbosa_dinamico

 

barbosa_dinamico1

 

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.

 

mendonça estatico

 

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.

 

MENDONCA DINA

 

MENDONCA DINA 2

 

 

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 SolDesde 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

marta estatica

 

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.

marta dinamico

 

 

marta dinamico 2

 

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

Image

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




Image

//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

1

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

2

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.

 

codigo1semcontornos

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);
codigo1comcontornos
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.
codigo2
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);
  }
  
}

codigo22
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:

anafilipapaiva_código2_imagemdofundo

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.

Captura de ecrã 2014-05-23, às 12.20.35

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.

g3

g2

g1

– exemplos do produto final

la-guernica-pablo-picasso-b

– 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.

ss (2014-05-22 at 11.22.31)

 

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.

lucasesteves_codigo_2_screenshot

 

 

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.

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

Resultado Final                                                         Imagem de fundo editada

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

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

Primeira experiência

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

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

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

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

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

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:

 

12

 

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:

ex1

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:

11

1333

432231

Exercício Código

Imagem Fixa:

Image

 

 

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:

Image

Image

 

//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.

 

Captura de ecrã 2014-05-22, às 01.52.11.png

 

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.

 

Captura de ecrã 2014-05-22, às 01.59.21.png  Captura de ecrã 2014-05-22, às 01.46.53.png  Captura de ecrã 2014-05-22, às 01.41.33.png

 

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

 

Sem Título

 

Imagem para possível download:

 

Logo finalesssss2

 

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

 

sfsdfsfsdadasadqewewe

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

Captura de ecrã 2014-05-21, às 23.22.02

 

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

Captura de ecrã 2014-05-21, às 23.22.52


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

Captura de ecrã 2014-05-21, às 23.24.40

Captura de ecrã 2014-05-21, às 23.25.12

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

Captura de ecrã 2014-05-19, às 10.33.39

 

 

 

 

 

 

 

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

Captura de ecrã 2014-05-19, às 10.34.18Captura de ecrã 2014-05-19, às 10.34.04


// 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.

estatico

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.

dinamico     

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

Imagecó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

 

Image Image Image

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;