quarta-feira, 25 de janeiro de 2017

Trabalho Final - Gerador automático de "arte". (Parte 2)



Bom, aqui está o vídeo mostrando a segunda parte, por ser limitado em apenas 3 minutos, muita explicação ficou de fora, então deixarei nessa postagem uma complementação. 

No modelo matemático, eu deixei o máximo todos os cálculos em função do lado do quadrado interno. Em cada função essa variável que representa o lado muda, mas é sempre usada da mesma maneira, como base para os cálculos dos caminhos. Na parte um muita coisa estava sendo feito através do width e height, mas como tive que aumentar a tela par inserir uma interface, limitei a tela dos quadros a 600x600 e os 200 restante do lado ficaram os botões. Então substitui no código pelo valor 600 e deixei o a variável "ladoqdo" controlar os caminhos. Isso foi importante principalmente para a parte de controle. Quando clico em alterar proporção, na hora que o valor do lado do quadrado central muda ao mesmo tempo as larguras e posicionamentos dos "caminhos" são recalculados por estarem em função dele. 

Em cada função um modelo foi reproduzido, em cada modelo existem posições diferentes do quadrado central, que são usados como parâmetros também por serem um local fixo a cada modelo diferente. As cores que tinha armazenado em três grupos de possibilidades de cores a serem usadas juntas (cores retiradas das obras originais), agora também deixei a opção de cores aleatórias que são controladas por variáveis randômicas. Os caminhos iniciam com a quantidade igual dos quadros originais, mas podem serem aumentadas. E todas essas alterações podem acontecer nos quadros com apenas um quadrado ao centro, ou no modelo de tela subdividida.

Para baixar o código completo, clique aqui.

Atividade 23 - Criar um olho que sempre fica voltado para o cursor do mouse.

Empregando as funções pushMatrix() e popMatrix(),  criar um olho (círculo preto pequeno no interior de círculo branco grande) que se encontra sempre voltado para o cursor do mouse.

Bom, as funçõ pushMatrix(); e popMatrix(); controlam para que só o código entre elas seja influenciado pelas funções translate e rotate. Como adoro os minions fiz essa brincadeirinha de pegar uma imagem de fundo, e posicionar uma ellipse branca no local do olho dele, de fundo. Depois desenhei uma ellipse menor preta, centralizei na posição que queria com o translate(); o x e y da ellipse menor foram usados pela função rotate para limitar a rotação. E o resultado é esse:


terça-feira, 24 de janeiro de 2017

Atividade 19 - Gráfico duplo sobreposto com média e desvio padrão das últimas 100 posições Y do cursor.

Com base em https://goo.gl/xJjt7E, criar um gráfico duplo sobreposto que apresenta a média das últimas 100 posições verticais do cursor do mouse e o respectivo desvio padrão e discutir o resultado obtido.

O vetor y irá receber as 100 ultimas posições do mouse. Os vetores media, aux, e desvio, de tamanho correspondente a largura da tela. Então, três funções são criadas. Uma para o cálculo da média e outra para o desvio. A terceira, será uma grade que irá colocar na tela os dados do gráfico, linhas, dados, etc. Temos a função media(); que recebe um valor que altera a opacidade da cor da “onda” do gráfico. A cada contagem de frame, é adicionado ao vetor a posição do mouseY. O uso de vertex() para a construção do gráfico. É nela que ocorre a ligação dos vértices, para a criação do sinal do gráfico. Por fim, a função de desvio(); a cada posição do vetor desvio[], é acrescida sqrt(aux[i-1]).

float[] y;
float[] media;
float[] aux;
float[]desvio;

void setup()
{
size(800, 600);
y = new float[100];
media = new float[800]; // valor de largura da tela
aux = new float[800];
desvio = new float[800];
}

void draw() {
background(255);

media(200);//azul
desvio(150); //preto
grade();
auxilia();
}

void grade() {
  
int linhas = 15;
for (int i =1; i<linhas; i++) {
stroke(20, 30);
fill(0);
line(0, i*40, width, i*40);
text((linhas-i)*40, width-30, i*(40));
}

fill(0);
rect(5, 10, 70, 70);

fill(219,112,147);
rect(10, 30, 10, 10);

fill(220,20,60);
rect(10, 50, 10, 10);

fill(255);
text("Média",30,40);
text("Desvio",30,60);
}

void media(int tom) {
fill(219,112,147, tom);
y[frameCount%100] = 600-mouseY;

for (int i=0; i<y.length; i++) {
media[800-1] += y[i];
}
media[800-1] /= y.length;

beginShape();
vertex(0, 600);
for (int i=1; i<media.length; i++) {
media[i-1] = media[i];
vertex(i-1, 600-media[i]);
}
vertex(800+100, 800);
endShape();
}


void desvio(int tom) {
noStroke();
fill(220,20,60, tom);
beginShape();
vertex(0, 600);
for (int i=1; i<desvio.length; i++) {
desvio[i-1] = sqrt(aux[i-1]);
vertex(i, 600-desvio[i-1]);
}
vertex(800+100, 600);
endShape();
}

void auxilia() {
noStroke();
fill(255);
for (int i=0; i<aux.length; i++) {
float auxiliaElementos = 0;
for (int j=0; j<y.length; j++) {
auxiliaElementos += pow((y[j] - media[i]), 2);
}
aux[800-1] = auxiliaElementos/y.length;
}
vertex(0, 600);
for (int i=1; i<aux.length; i++) {
aux[i-1] = aux[i];
vertex(i, 600-aux[i]);
}
vertex(800+100, 600);
}


quarta-feira, 18 de janeiro de 2017

Atividade 22 - Cronômetro.

Bom, usei a função millis() dividida por 1000 para receber a quantidade de segundos. (a função millis() retorna 1 milésimo de segundos). Como o círculo tem 360º, o ponteiro vai se deslocar 6º por segundo. Criei o desenho de um cronômetro no próprio processing usando círculos e aumentando as bordas. O ponteiro, é basicamente uma linha que sai do centro da tela, e se move de acordo com a posição polar do x e do y da ellipse, nela eu coloquei para o ângulo ser multiplicado pelos segundos
e isso acontece direto por estar dentro do loop draw. Também usei a função radians() converte o valor colocado no parâmetro em graus pra radianos.

int ang = 6;

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

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

 background(255);
 fill(0,128,128);
 ellipse(width/2,height/2,400,400);
 fill(204,255,255);
 ellipse(width/2,height/2,350,350);
 strokeWeight(13);
 stroke(0);


 line(width/2,height/2,xPolar(150,radians(ang)*segundos)+100,yPolar(150,radians(ang)*segundos) + 300);  
}

float xPolar(float raio, float ang) { 
 float x;
 x = raio * cos(ang);
 return x;
}

float yPolar(float raio, float ang) { 
 float y;
 y = raio * sin(ang);
 return y;
}


Atividade 21 - Barco e mar em movimento.

Criar o movimento de um barco no mar e discutir os resultados no blog.


Bom, meu código foi bem simples. Peguei duas imagens da internet correspondentes ao bar e ao mar. Para que o barco tenha movimento senoidal, x representa um ângulo que incia em zero e vai incrementando em +0,05 e y representa o seno do ângulo x com a função sin(), que vai alterando o valor de acordo com o valor de x incrementado.

No caso do mar colocamos em função de y, para apenas a posição vertical dele ir alterando a dar uma impressão de movimentação de ondas. Já o barco recebe x*20 na posição x e 180+y*20 na posição y, para assim fazer o movimento completo de senóide nos dois eixos, percorrendo até o fim da tela.


terça-feira, 17 de janeiro de 2017

Atividade 20 - Desenhar polígono regular de acordo com quantidade de lados.

Criar uma aplicação que desenha um polígono regular centralizado na tela com a quantidade de lados informada no próprio código. Discutir a solução adotada em seu blog.

Com o uso de coordenadas polares a elaboração desse código fica mais fácil. Primeiramente temos duas funções, uma para X e outra para Y que  recebe um ângulo e o raio, e faz a conversão para posições X e Y correspondentes, de acordo com seno e cosseno do ângulo multiplicado pelo raio.

De acordo com o número de lados que é controlado por "n" no próprio código, descobrimos os ângulos igualmente divididos pela fórmula ang=2*PI/n;.

Com uma estrutura de repetição podemos controlar usando o ponto inicial descoberto e descobrir o próximo incrementando o ângulo. Para desenhar a linha, a função line() exige que você saiba as posições equivalentes das duas pontas, com isso guardamos outra variável com mesmos dados só que incrementados com 1, para ter esses dados necessários. E então só jogamos dentro da função line, só alterar o número de n que um novo polígono equivalente é gerado. 

Fiz uma condição de que se o número de n for menor ou igual a 0, um círculo é desenhado, se não, ai vai para o for que desenha de acordo com quantidade de lados.


int n=6;
int r=200;

void setup ()
{
  size(600,600);
  
float ang=2*PI/n;

if(n<=2)
ellipse(300,300,2*r,2*r);


if(n>2) {
for(int i=0;i<n;i++) {

float a=i*ang;
float x=converterX(a,r)+300;
float y=converterY(a,r)+300;

float a2=(i+1)*ang;
float x2=converterX(a2,r)+300;
float y2=converterY(a2,r)+300;

//ellipse(x,y,10,10);
line(x,y,x2,y2);
  }
}

}

float converterX (float ang, float R)
{
   return R*cos(ang);
  
}

float converterY (float ang, float R)
{
 return R*sin(ang);
  
}


Exemplo com n=6.

terça-feira, 3 de janeiro de 2017

Atividade 18 - Analisando impacto de média e desvio padrão de acordo com brilho e contraste.

Crie versões no Photoshop da imagem de einstein.jpg e cinza.jpg com variações de brilho e contraste. Qual impacto ocorreu na média e desvio padrão?
Com as imagens normais os valores foram: 
Einstein - Média  28.610287 Média V =3970.7988 Desvio padrão= 63.014275
Cinza - Média  29.0 Média V= 0.0 Desvio padrão= 0.0

Aumentando o brilho da imagem os valores ficaram: 
Einstein - Média=84.901405 Desvio padrão= 47.380764
Cinza - Média= 84.64234  Desvio padrão= 0.3606327

Aumentei o brilho igualmente nas duas imagens em 31%, com isso a média total de cada uma das imagens aumentou bastante pois os pixels que tendiam ao preto ficaram mais claro com o brilho e ficando com mais tonalidades cinza. Já o desvio padrão no caso do Einstein diminuiu consideravelmente pois como a maioria está tendendo ainda mais ao tom comparado que é o cinza, a variação de pixels fora desse tom diminui. Na imagem cinza por ser totalmente na mesma tonalidade o desvio padrão permanece tendendo a zero, pois não há variação de tons pela imagem!
Aumentando o contraste ficaram:
Einstein - Média= 28.413017 Desvio padrão= 67.919174
Cinza - Média= 4.992715  Desvio padrão= 0.11710537

No contraste também usei a quantidade de 31% igualmente nas duas imagens. Na do Einstein a Média ficou praticamente igual da original pois o contraste não muda a tonalidade, apenas destaca fazendo o que for branco ficar ainda mais branco e o que for preto ficar ainda mais preto. Já o desvio padrão aumentou um pouco devido as extremidades ficarem mais intensas causa a variação ainda maior. Na imagem cinza, como o contraste intensificou o tom que é uniforme a ir mais para o preto a média caiu muito, já o desvio padrão mais uma vez permanece tendenciando a zero pelo fato de não haver variação de tonalidades na imagem.

recent posts