quarta-feira, 24 de junho de 2015

Crossfade

Criar uma aplicação que realiza o crossfade entre 3 imagens de acordo com a posição vertical do mouse.

Imagens Usadas:

         


Código:

PImage img1;
PImage img2;
PImage img3;

float controle = 0.0;

void setup() {
  size(461, 539);
  img1 = loadImage("sora1.jpg");
  img2 = loadImage("sora2.jpg");
  img3 = loadImage("sora3.jpg");
}

void draw() {
  background(255);

  // controle varia de 1 ate 4
  controle = 3 * (mouseY/(float)height) + 1;

  float alpha;

  // controle entre 1.0 e 2.5 define o alpha da img1
  if (controle < 2.5) {
    alpha = (controle - 1.0)/1.5;
    alpha = 1.0 - alpha;
  } else {
    alpha = 0.0;
  }

  tint(255, alpha * 255);
  image(img1, 0, 0);

  // controle entre 1 e 4 define o alpha da img2
  alpha = abs(controle - 2.5)/1.5;
  alpha = 1.0 - alpha;

  tint(255, alpha * 255);
  image(img2, 0, 0);


  // controle entre 2.5 e 4 define o alpha da img3
  if (controle > 2.5) {
    alpha = (controle - 2.5)/1.5;
  } else {
    alpha = 0.0;
  }
   
  tint(255, alpha * 255);
  image(img3, 0, 0);

}

Resuldado:

 

terça-feira, 23 de junho de 2015

T02 - Vídeo tutorial sobre o T01 da disciplina de M.A.M.I.

Este é um vídeo tutorial explicando o que fiz no primeiro trabalho parcial da disciplina de Matemática Aplicada à Multimídia Interativa. Ele equivale ao segundo trabalho parcial da disciplina.

Link: https://youtu.be/jZkYpz3jCM0

quinta-feira, 18 de junho de 2015

Histograma

A aplicação seguinte mostra o histograma dos canais RGB (do azul ao vermelho) da imagem mostrada.

Imagem:
















Código:

int [] tons = new int[256];
PImage img;

void setup() {
  size(640, 480);
  int pos, t;
  img = loadImage("sora.jpg");
  for (int x = 0; x < 640; x++) {
    for (int y = 0; y < 480; y++) {
      pos = y*480 + x;
      t = (int)red(img.pixels[pos]);
      tons[t] = tons[t] + 1;
    }
  }
  int maior = tons[0];
  int tom = 0;
  for (int i =1; i<256 i="">
    if (tons[i]>maior) {
      maior = tons[i];
      tom = i;
    }
  }
    for (int i =0; i<256 i="">
    float tamanho = (tons[i]*height)/maior;
    fill(0);
    rect(i*2, height-tamanho, 2, height );
  }
}

Resultado:

Envelhecimento Digital

A aplicação seguinte mostra exemplos de envelhecimento digital de uma imagem, com adição de ruídos, amarelos e vermelhos.

Código:

PImage imgOriginal;
PImage imgCopia = createImage(320, 240, RGB);
PImage imgCopia2 = createImage(320, 240, RGB);
PImage imgCopia3 = createImage(320, 240, RGB);
float r;
float g;
float b;
float amarelo;
int vermelho;
int pos;

void setup() {
  size(1280, 240);
  imgOriginal = loadImage("imagem.jpg"); 
  for (int x = 0; x<320 i="" x="">
    for (int y = 0; y<240 i="" y="">
      pos = y*320+x;
      r = red(imgOriginal.pixels[pos]);
      g = green(imgOriginal.pixels[pos]);
      b = blue(imgOriginal.pixels[pos]);
      amarelo =40;
      vermelho = 40;
      float media = (r+g+b)/3;
      
      float ruido = random(-15, 15);
      imgCopia.pixels[pos] = color(media+ruido, media+ruido, media+ruido);
      imgCopia2.pixels[pos] = color(media+amarelo+ruido, media+amarelo+ruido, media-amarelo+ruido);
      imgCopia3.pixels[pos] = color(media+vermelho, media, media);
    }
  }
}

void draw() {
  image(imgOriginal, 0, 0); 
  image(imgCopia, 320, 0);
   image(imgCopia2, 640, 0);
 image(imgCopia3, 960, 0);
}

Resultado:

Ajustes de Imagem

A aplicação a seguir ajusta uma determinada imagem aplicando filtros como negativo, escalas de cinza e variação de brilho.

Código:

PImage imgOriginal;
PImage imgCopia = createImage(320, 240, RGB);
PImage imgCopia2 = createImage(320, 240, RGB);
PImage imgCopia3 = createImage(320, 240, RGB);
PImage imgCopia4 = createImage(320, 240, RGB);
PImage imgCopia5 = createImage(320, 240, RGB);
int pos;
float r, g, b;
float brilho;
float valor_do_brilho = -0.5;


void setup() {
  size(960, 480);

  imgOriginal = loadImage("original.jpg");
  for (int x = 0; x < 320; x++) {
    for (int y = 0; y < 240; y++) {
      pos = y * 320 + x;
      r = red (imgOriginal.pixels[pos])  ;
      g = green(imgOriginal.pixels[pos]) ;
      b = blue(imgOriginal.pixels[pos]) ;

      float media = (r + g + b)/3;
      float media2 = (0.3*r + 0.59*g + 0.11*b)/1;

      float complemento_Blue = 255 - b;
      float complemento_Green = 255 - g;
      float complemento_Red = 255 - r;

      color cor = color(r, g, b); 

      brilho = brightness(cor);
      brilho = brilho * valor_do_brilho;

      imgCopia.pixels[pos] = color(complemento_Red, complemento_Green, complemento_Blue);
      imgCopia2.pixels[pos] = color(r, g, b);
      imgCopia3.pixels[pos] = color(media, media, media);
      imgCopia4.pixels[pos] = color(media2, media2, media2);
      imgCopia5.pixels[pos] = color(r+brilho, g+brilho, b+brilho);
    }
  }
}

void draw() {
  image(imgCopia, 0, 0);
  image(imgCopia2, 320, 0);
  image(imgCopia3, 320+320, 0);
  image(imgCopia4, 0, 240);
  image(imgCopia5, 320, 240);
}

Resultado:

segunda-feira, 15 de junho de 2015

Relógio

Aplicação que exibe um relógio mostrando horas, minutos e segundos, de acordo com o relógio do computador executado.

Código:

PImage I_Unidade_Hora;
PImage I_Dezena_Hora;
PImage I_Unidade_Minutos;
PImage I_Dezena_Minutos;
PImage I_Unidade_Segundos;
PImage I_Dezenas_Segundos;

void setup() {
  size(870, 121);
}

void draw() {
  background(255);

  int s = second();

  int unidade_segundos = s%10;
  int dezenas_segundos = s/10;

  int m = minute(); 

  int unidade_minutos = m%10;
  int dezenas_minutos = m/10;

  int h = hour(); 

  int unidade_hora = h%10;
  int dezena_hora = h/10;

  int numero = 99;

  int dezenas = numero/10;

  I_Dezena_Hora = loadImage(dezena_hora+".gif");
  I_Unidade_Hora = loadImage(unidade_hora+".gif");
  I_Dezena_Minutos = loadImage(dezenas_minutos+".gif");
  I_Unidade_Minutos = loadImage(unidade_minutos+".gif");
  I_Dezenas_Segundos = loadImage(dezenas_segundos+".gif");
  I_Unidade_Segundos = loadImage(unidade_segundos+".gif");


  image(I_Dezena_Hora, 0, 0);
  image(I_Unidade_Hora, 150, 0);
  image(I_Dezena_Minutos, 300, 0);
  image( I_Unidade_Minutos, 450, 0);
  image( I_Dezenas_Segundos, 600, 0);
  image( I_Unidade_Segundos, 750, 0);

  fill(0);
  ellipse(284, 47, 10, 10);
  ellipse(284, 77, 10, 10);
  ellipse(583, 47, 10, 10);
  ellipse(583, 77, 10, 10);
}


Resultado:

Olho Tonto

Recriar uma imagem que se assemelha um olho, onde a íris (círculo interno) acompanha a direção do mouse, sem sair da área do círculo externo.

Código:

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

void draw() {

  int r = 100;

  int x = mouseX;
  int y = mouseY;
  background(0);
  fill(255);
  ellipse(width/2, height/2, 3*r, 3*r);
  
  fill(0);

  if (mouseX < 140) {
    x = 140;
  }
  if (mouseX > 260) {
    x = 260;
  }
  if (mouseY < 140) {
    y = 140;
  }
  if (mouseY > 260) {
    y = 260;
  }

  float cat_Oposto = height/2-mouseY;
  float cat_Adjacente = width/2 - mouseX;

  float passe_Hipotenusa = sq(cat_Oposto)+sq(cat_Adjacente);
  float hipotenusa = sqrt(passe_Hipotenusa);

  println(hipotenusa, mouseX, mouseY);
  float SENO = (mouseY - height/2)/ hipotenusa;
  float COSSENO = (mouseX - width/2)/ hipotenusa;

  float distanciaY =(mouseY - height/2)*SENO;
  float distanciaX =(mouseX - width/2)*COSSENO;


  float distanciaX1 = COSSENO*r ;
  float distanciaY1 = SENO*r ;

  float distanciaD = hipotenusa - 100;

  float AREA = 2*PI*sq(r);

  float calculoX = distanciaX1+width/2;
  float calculoY = distanciaY1+height/2;

  if (hipotenusa < 100) {
    calculoX = mouseX;
    calculoY = mouseY;
  }
  ellipse(calculoX, calculoY, 80, 80);
}


Resultado:


Cronômetro Segundos

Uso da função "millis" para recriar um cronômetro que marca os segundos, mostrados através do "println".

Código:

float angulo = 360/60;
int raio = 100;


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

void draw() {
  int m = millis();
  float segundos = m/1000;

  println(segundos);


  background(255);
  noFill();
  ellipse(width/2, height/2, 210, 210);
  line(width/2, height/2, width/2 + raio* cos(radians(segundos*angulo- 15*angulo)), height/2 +raio* sin(radians(segundos*angulo - 15* angulo)));
}


Resultado:

Movimento de um Barco

Usando as funções Seno e Cosseno foi possível recriar o movimento de um barco no mar. Aplicando-se os conceitos das funções pra mostrar a amplitude e o período da onda do mar, e num retângulo representando o barco em movimento sobre a onda.

Código:

int xspacing = 16;   
int w;              
float theta = 0.0;  
float amplitude = 15.0;  
float period = 250.0;  
float dx;  
float[] yvalues;
int angulo;

void setup() {
  size(640, 360);
  w = width+16;
  dx = (TWO_PI / period) * xspacing;
  yvalues = new float[w/xspacing];
}

void draw() {
  background(0);
  calcWave();
  renderWave();
  
  angulo ++;

  if (angulo >360) {
    angulo =0;
  }
  float seno = sin(radians(angulo));
  float coseno = cos(radians(angulo));
  
  rectMode(CENTER);
    fill(100, 255, 200);
    rect(width/2, 20*seno+height/2, 50, 20);
    
}

void calcWave() {
  
  theta += 0.02;
  
  float x = theta;
  for (int i = 0; i < yvalues.length; i++) {
    yvalues[i] = sin(x)*amplitude;
    x+=dx;
  }
}

void renderWave() {
  noStroke();
  fill(255);
  
  for (int x = 0; x < yvalues.length; x++) {
    fill(0, 150, 150);
    ellipse(x*xspacing, height/2+yvalues[x], 16, 16);
  }
}

Resultado:

Polígono Regular

A aplicação seguinte cria um polígono regular centralizado na tela, onde o número de lados é informado e pode ser alterado pra qualquer quantidade desejável, através de uma variável declarada no início do código. Ele se inicia no ponto central e gira em torno dele dependendo do número de lados declarado, usando o comando "rotate".
No exemplo seguinte usei um polígono de 5 lados, um pentágono.

Código:

int t = 100;
int l = 5;
int a = 360/l;

void forma(int a, int t) {
  for (int i = 0; i < l-1; i ++ ) {
    translate(t, 0);
    rotate(radians(a));
    line(0, 0, t, 0);
  }
}

void setup() {
  background(255);
  size(500, 500);
}


void draw() {
  translate(width/2-50, height/2-80);
  line(0, 0, t, 0);
  forma(a, t);
}


Resultado:


terça-feira, 14 de abril de 2015

M.A.M.I. Trabalho 01: Análise matemática de uma obra artística ou peça de design e aplicação do conceito.

O Conjunto de Mandelbrot
É basicamente um fractal definido como um conjunto de pontos c no plano complexo para o qual a sucessão definida recursivamente:

z_0 = 0\,
z_{n+1} = {z_n}^2 + c
não tende ao infinito.
Para cada ponto c do plano complexo, a sequência se expande como:
c=x+iy \,
Z_0=0 \,
\begin{matrix}Z_1&=&Z_0^2+c \\ \ &=& x+iy\end{matrix} \,
\begin{matrix}Z_2&=&Z_1^2+c \\ \ 
&=&(x + iy)^2+x+iy \\ \ 
&=&x^2+2ixy-y^2+x+iy \\ \ &=&x^2-y^2+x+(2xy+y)i\end{matrix} \,
Z_3=Z_2^2+c=... \,
e assim por diante.

Escolha da análise matemática envolvida:
Decidi focar o conceito de "recursividade" envolvido para recriar uma aplicação baseada nele, que agisse de maneira similar ao Conjunto de Mandelbrot, em outras palavras, o uso de Fractais.
- Conceito de recursividade: É um termo usado de maneira mais geral para descrever o processo de repetição de um objeto de um jeito similar ao que já fora mostrado. Um bom exemplo disso são as imagens repetidas que aparecem quando dois espelhos são apontados um para o outro. Em ciência da computação, a recursividade é a definição de uma subrotina (função ou método) que pode invocar a si mesma. Um exemplo de aplicação da recursividade pode ser encontrado nos analisadores sintáticos recursivos para linguagens de programação. A grande vantagem da recursão está na possibilidade de usar um programa de computador finito para definir, analisar ou produzir um estoque potencialmente infinito de sentenças, designs ou outros dados.
- Conceito de Fractal:É um objeto geométrico que pode ser dividido em partes, cada uma das quais semelhante ao objeto original. Diz-se que os fractais têm infinitos detalhes, são geralmente autossimilares e independem de escala. Em muitos casos um fractal pode ser gerado por um padrão repetido, tipicamente um processo recorrente ou iterativo.
Então, baseado nestas definições, a aplicação a ser criada deverá ser um fractal gerado por uma função que chama a si mesma sucessivamente, gerando na tela, sob uma certa condição, uma repetição do mesmo efeito.

O livro "The Nature of Code", de Daniel Shiffman, fala sobre a implementação de diversos fractais.

Site com exemplos de fractais:http://andrew-hoyer.com/experiments/fractals/
 
Fontes: site Wikipédia
The Nature of Code(Shiffman, Daniel.)

Aplicação:
A função criada, no momento que o mouse é pressionado. gera um círculo central, com outros círculos menores a sua volta, e dependendo da direção que o mouse é arrastado irão gerar mais ou menos imagens correspondentes.

Código:

//Fractal com recursividade
boolean mousePressed = false;
void setup() {
  size(800,500);
}

void mousePressed() {
  mousePressed = !mousePressed; //Alterna o valor da variável mousePressed entre true e false
}

void draw() {
  background(255);
  drawCircle(mouseX, mouseY, 200);
}

void drawCircle(float x, float y, float radius) {
  fill(255);
  //Desenha elipse
  ellipse(x, y, radius, radius); //Desenha uma elipse central 
  if (radius > 8) { //Enquanto radius não for menor do que 8 executa recursivamente o método drawCircle
    drawCircle(x + radius/2, y, radius/2 - ((mousePressed ? mouseY : mouseX) * 0.1)); //Desenha uma elipse
                                                            // na borda direita do círculo central com
                                                            // o tamanho sendo:
                                                            //   (metade do radius do círculo original)
                                                            // - (10% da posição X ou posiçao Y do mouse)
    drawCircle(x - radius/2, y, radius/2); //Desenha uma elipse na borda esquerda do círculo central
    drawCircle(x, y + radius/2, radius/2); //Desenha um círculo na parte superior do círculo central
    drawCircle(x, y - radius/2, radius/2); //Desenha um circulo na parte inferior do círculo central
  }
  drawMousePosition(); //Mostra a posiçao X e Y atual do mouse
}

void drawMousePosition() {
  fill(0);
  text("Posiçao X do mouse = " + mouseX + "", 10, 15);
  text("Posiçao Y do mouse = " + mouseY + "", 10, 30);
}

Resultados:




segunda-feira, 13 de abril de 2015

Processing: Bandeira do Brasil

O objetivo era criar uma função que desenhasse a bandeira do Brasil de acordo com a Lei federal N° 5.700. Não consegui acrescentar a faixa, estrelas e texto ainda.

As regras são:

Art. 5º A feitura da Bandeira Nacional obedecerá às seguintes regras (Anexo nº 2):
I - Para cálculo das dimensões, tomar-se-á por base a largura desejada, dividindo-se esta em 14 (quatorze) partes iguais. Cada uma das partes será considerada uma medida ou módulo.
II - O comprimento será de vinte módulos (20M).
III - A distância dos vértices do losango amarelo ao quadro externo será de um módulo e sete décimos (1,7M).
IV - O círculo azul no meio do losango amarelo terá o raio de três módulos e meio (3,5M)..

Análise das regras:



















Código:

int x= 30;
void setup (){
 int x= 30;
  size (20*x, 14*x);
  background (#00A201);
  mostraBrFlag();
}

void mostraBrFlag(){
   noStroke();
   fill (#F7F714);
   quad (1.7*x,7*x, 10*x, 1.7*x, 18.3*x, 7*x, 10*x, 12.3*x);
   fill (#0039C6);
   ellipse ( 10*x, 7*x, 7*x,7*x); 
}

Resultado:


Processing: Rastro da Trajetória

Peguei o código de simulador de lançamento balístico criado em sala de aula e apenas removi o background do "draw" para que a trajetória da bola permanecesse apresentada na tela.

Código:

float dx;
float dy = 600;
float t = 0;
float v0x = 30;
float v0y = 100;
float ax = 0;
float ay = -10;
float vx;
float vy;
float v;

void setup() {
  size(800,600);
  background(0);
  frameRate(1);  
}

void draw() {
  moveBolaMRUV();
  t++;
}

void moveBolaMRUV() {
  dx = (v0x*t) + ax*(t*t)/2;
  dy = (v0y*t) + (ay*(t*t))/2;
  vy = v0y + ay*t;
  v = (v0x+v0y)/2;
  ellipse (dx, height - dy, 20, 20);
}

Resultado:


Processing: Deslocamento e Tempo

Foi pedido que modificasse um simulador que mostrasse em quanto tempo um corpo à 30m/s percorria uma distancia de 800 metros.
As modificações feitas foram: Aumentar o tamanho da tela no eixo X para 900 metros, assim seria visível o momento que o objeto passaria pelo ponto de 800 metros. Demarcar com linhas espaçadas de 100 em 100 metros para uma melhor visualização. E com o uso da ferramenta "text" apresentar na tela os valores de tempo e distância percorrida pelo objeto.
O objeto alcançará a distância de 800 metros em aproximadamente 28 segundos.

Código:

int d;
int v = 30;
int t = 0;

void setup() {
  background(0);
  size(900, 600);  
  frameRate(1);  
}

void draw() {
  background(0);
  for(int i = 0; i < 9; i++){
  line(i * 100, 0, i * 100, 900);
  stroke(45);
  fill(255);
 }
  println(t, 20,20);
  moveBolaMRU();
  t++;
  text("Tempo: " + t + " seg", 20, 20);
  text("Distância: " + d + " m", 20, 35);
}

void moveBolaMRU() {
  d = v * t;
  println(d);
  ellipse(d, 300, 10, 10);
}

Resultado:


domingo, 12 de abril de 2015

Processing: Exercício de Funções(Flor)

Foram criadas duas funções dentro do programa. A primeira, função, circulo(int x, int y, int r), desenha um círculo qualquer na tela e era chamada na segunda função, flor2(int x, int y, int r), onde, sempre que o mouse for pressionado, são desenhados cinco círculos agrumados em formato de flor, com as pétalas dispostas em diagonal em relação ao centro do desenho, tendo o círculo central gerado no ponto onde o cursor do mouse for pressionado, e com cores aleatórias modificadas à cada clique.

Código:

void setup(){
  size(300,300);
  noStroke();
  background(0);
  frameRate(10);
  }

void circulo(int x,int y, int r){
 
  ellipse(x,y,2*r,2*r);
}

void flor2(int x, int y, int r){
  fill(random(255),random(255),random(255));
  circulo(x,y,r);
 fill(random(255),random(255),random(255));
  circulo(x-(r+(r/2)),y+(r+(r/2)),r);
  circulo(x+(r+(r/2)),y-(r+(r/2)),r);
  circulo(x-(r+(r/2)),y-(r+(r/2)),r);
  circulo(x+(r+(r/2)),y+(r+(r/2)),r);

}

void draw(){
  if(mousePressed == true){
  background(0);
      flor2(mouseX,mouseY, 30);
  }
 
 }

Resultado:


Processing: Exibindo valores na tela

O código seguinte gera uma simulação de lançamento balístico e exibe na tela, com o uso da ferramenta "text", os valores das variáveis envolvidas na simulação.

Código:

float dx;
float dy = 600;
float t = 0;
float v0x = 30;
float v0y = 100;
float ax = 0;
float ay = -10;
float vx;
float vy;
float v;

void setup() {
  size(600,600);
  background(0);
  frameRate(1);
  }  
}

void draw() {
  background(0);
  moveBolaMRUV();
  t++;
  text("Tempo:" + t, 20, 20);
  text("Veloc.:" + v, 20, 35);
  text("D.Hori.:" + dx, 20, 50);
  text("D.Vert.:" + dy, 20, 65);
}

void moveBolaMRUV() {
  dx = (v0x*t) + ax*(t*t)/2;
  dy = (v0y*t) + (ay*(t*t))/2;
  vy = v0y + ay*t;
  v = (v0x+v0y)/2;
  ellipse (dx, height - dy, 20, 20);
}

Resultado:

Processing: Exemplo

Neste exemplo do site https://processing.org/examples vemos um código que gera linhas horizontais e verticais que se entrelaçam formando uma malha na tela. A partir do código dado modifiquei o tamanho da tela, os valores de espaçamento entre as linhas e as cores de background edas linhas geradas.

Código original:

void setup() {
  size(640, 360);
}

void draw() {
  background(127);
  noStroke();
  for (int i = 0; i < height; i += 20) {
    fill(129, 206, 15);
    rect(0, i, width, 10);
    fill(255);
    rect(i, 0, 10, height);
  }
}
Resultado:














Código alterado:

void setup() {
  size(800, 600);
}

void draw() {
  background(0);
  noStroke();
  for (int i = 0; i < height; i += 50) {
    fill(0, 193, 56);
    rect(0, i, width, 10);
    fill(59, 84, 165);
    rect(i, 0, 10, height);
  }
}

Resultado:


segunda-feira, 2 de março de 2015

Hello World! Processing

O documentário é bem interessante, pois apresenta conceitos de programação criativa de uma maneira que quem não é programador pode compreender e se interessar mais pelo seu uso. Usa exemplos de vários tipos de sistemas diferentes, que se comportam e se desenvolvem de maneiras imprevisíveis. Após isso ele apresenta a linguagem do Processing, que por sua simplicidade e semelhança com conceitos de design (como a elaboração em sketchs/esboços) é uma alternativa para Designers aprenderem a programar de maneira simples. Ele também apresenta trechos de diversas obras e projetos como Unnamed Soundsculpture, de Daniel Franke e Cedric Kiefer, Substrate, de Jared Tarbell, They Rule, de Josh On, além dos trabalhos de um dos criadores do Processing, Casey Reas.

Link para o documentário: https://vimeo.com/60735314
Legendas PT-BR: http://www.7luas.com.br/downloads/hello_world_processing-pt_subtitles.srt