Abaixo segue o vídeo do Trabalho 2:
terça-feira, 23 de junho de 2015
Exercício 24: Histograma Dos Canais RGB
O código a seguir apresenta os histogramas dos canais rgb de uma imagem, o sódigo é uma adaptação de um código desenvolvido em aula e as adaptações foram armazenar os dados de todos os canais, calcular o tom de maxima aparição em todos os canais, e claro mostrar efetivamente o histograma de cada canal.
Código-Fonte:
int[] tonsr = new int[256];
int[] tonsg = new int[256];
int[] tonsb = new int[256];
PImage img;
int max=1,maxg=1,maxb=1;
void setup(){
size(1000,600);
background(0);
//float t=0, mediaT,somaT=0;
int pos,t,g,b;
img = loadImage("akito.jpg");
image(img,0,0);
for(int x=0;x<250;x++){
for(int y=0;y<231;y++){
pos=y*250+x;
t=(int)red(img.pixels[pos]);
g=(int)green(img.pixels[pos]);
b=(int)blue(img.pixels[pos]);
tonsr[t] +=1;
tonsg[g] +=1;
tonsb[b] +=1;
}
}
for(int i=0;i<tonsr.length;i++){
println("tom "+i+" = "+tonsr[i]);
}
//mediaT = somaT/(640*480);
max = maxPos(1);
maxg = maxPos(2);
maxb = maxPos(3);
println("Tom "+max+" valor "+tonsr[max]);
criaHist();
/*
float v,SomaV=0;
for(int x=0;x<640;x++){
for(int y=0;y<480;y++){
pos=y*640+x;
t=red(img.pixels[pos]);
v= pow(t-mediaT,2);
SomaV+=v;
}
}
float media = SomaV/(640*480);
println("Média de Tons é ",media);
*/
}
int maxPos(int cor){
int n=0;
int pos2=0;
if(cor == 1){
for(int b=0;b<tonsr.length;b++){
if(tonsr[b]>=n){
n=tonsr[b];
pos2=b;
}
}
}else if(cor == 2){
for(int b=0;b<tonsg.length;b++){
if(tonsg[b]>=n){
n=tonsg[b];
pos2=b;
}
}
}else if(cor == 3){
for(int b=0;b<tonsb.length;b++){
if(tonsb[b]>=n){
n=tonsb[b];
pos2=b;
}
}}
return pos2;
}
void criaHist(){
float x=5;
max = maxPos(1);
for(int i=0;i<tonsr.length;i++){
println("maximor "+tonsr[max]);
fill(220,0,0);
noStroke();
rect(x,height-((tonsr[i]*100)/tonsr[max]),1,height);
x+=1;
}
x+=50;
maxg = maxPos(2);
for(int i=0;i<tonsg.length;i++){
println("maximog "+tonsg[maxg]);
fill(0,220,0);
noStroke();
rect(x,height-((tonsg[i]*100)/tonsg[maxg]),1,height);
x+=1;
}
x+=50;
maxb = maxPos(3);
for(int i=0;i<tonsb.length;i++){
println("tonb"+tonsb[i]+"maximob "+tonsb[maxb]);
fill(0,0,220);
noStroke();
rect(x,height-((tonsb[i]*100)/tonsb[maxb]),1,height);
x+=1;
}
}
void draw(){
//println("X: "+x);
//background(0);
//criaHist();
//image(img,0,0);
}
Código-Fonte:
int[] tonsr = new int[256];
int[] tonsg = new int[256];
int[] tonsb = new int[256];
PImage img;
int max=1,maxg=1,maxb=1;
void setup(){
size(1000,600);
background(0);
//float t=0, mediaT,somaT=0;
int pos,t,g,b;
img = loadImage("akito.jpg");
image(img,0,0);
for(int x=0;x<250;x++){
for(int y=0;y<231;y++){
pos=y*250+x;
t=(int)red(img.pixels[pos]);
g=(int)green(img.pixels[pos]);
b=(int)blue(img.pixels[pos]);
tonsr[t] +=1;
tonsg[g] +=1;
tonsb[b] +=1;
}
}
for(int i=0;i<tonsr.length;i++){
println("tom "+i+" = "+tonsr[i]);
}
//mediaT = somaT/(640*480);
max = maxPos(1);
maxg = maxPos(2);
maxb = maxPos(3);
println("Tom "+max+" valor "+tonsr[max]);
criaHist();
/*
float v,SomaV=0;
for(int x=0;x<640;x++){
for(int y=0;y<480;y++){
pos=y*640+x;
t=red(img.pixels[pos]);
v= pow(t-mediaT,2);
SomaV+=v;
}
}
float media = SomaV/(640*480);
println("Média de Tons é ",media);
*/
}
int maxPos(int cor){
int n=0;
int pos2=0;
if(cor == 1){
for(int b=0;b<tonsr.length;b++){
if(tonsr[b]>=n){
n=tonsr[b];
pos2=b;
}
}
}else if(cor == 2){
for(int b=0;b<tonsg.length;b++){
if(tonsg[b]>=n){
n=tonsg[b];
pos2=b;
}
}
}else if(cor == 3){
for(int b=0;b<tonsb.length;b++){
if(tonsb[b]>=n){
n=tonsb[b];
pos2=b;
}
}}
return pos2;
}
void criaHist(){
float x=5;
max = maxPos(1);
for(int i=0;i<tonsr.length;i++){
println("maximor "+tonsr[max]);
fill(220,0,0);
noStroke();
rect(x,height-((tonsr[i]*100)/tonsr[max]),1,height);
x+=1;
}
x+=50;
maxg = maxPos(2);
for(int i=0;i<tonsg.length;i++){
println("maximog "+tonsg[maxg]);
fill(0,220,0);
noStroke();
rect(x,height-((tonsg[i]*100)/tonsg[maxg]),1,height);
x+=1;
}
x+=50;
maxb = maxPos(3);
for(int i=0;i<tonsb.length;i++){
println("tonb"+tonsb[i]+"maximob "+tonsb[maxb]);
fill(0,0,220);
noStroke();
rect(x,height-((tonsb[i]*100)/tonsb[maxb]),1,height);
x+=1;
}
}
void draw(){
//println("X: "+x);
//background(0);
//criaHist();
//image(img,0,0);
}
Exercício 23: Jogo da vida - Parte III
O código a seguir é mais uma modificação do jogo da vida, aqui adicionamos um código que calcula a média de células vivas em todas as gerações, e calcula o desvio padrão.
O desvio padrão é calculado seguindo a formula sqrt((pow(x[0]-media,2) + pow(x[1]-media,2) + ...)/x.length-1);
Código-Fonte:
float vendaAn;
int NumeroGeracao=1;
int[] escheme = {};
int[] Mundoatual = {0,1,1,0,1,0,1,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,1,0,1,0,1,0,1};
int[] MundoNovo = new int[32];
void setup(){
size(1280,720);
frameRate(1);
background(0);
//Mostramundo();
}
int CruzaCelulas(int Posicao){
int NumeroCelulas = Mundoatual[Posicao-1] + Mundoatual[Posicao] + Mundoatual[Posicao+1];
return NumeroCelulas;
}
void Mostramundo(){
for(int i=0;i<Mundoatual.length;i++){
if(Mundoatual[i]==1){
ellipse(i*20,NumeroGeracao *30,20,20);
}
}
}
void estatisticas(){
int aux=0;
println(escheme.length);
if(escheme.length==0 || escheme[escheme.length-1]!=0){
for(int cont=0;cont<Mundoatual.length;cont++){
aux += Mundoatual[cont];
}
escheme = append(escheme,aux);
}else{
float media=0;
float desvio=0;
float max=0;
for(int cont=0;cont<escheme.length;cont++){
stroke(255);
//point((cont+1)*150-6,(height - escheme[cont]*50-6));
if(cont<escheme.length-1){
if(escheme[cont]>=max){max=escheme[cont];}
media += float(escheme[cont]);
}else{
media = media/escheme.length;
for(int i=0;i<escheme.length;i++){
desvio += pow((escheme[i]-media),2);
}
desvio = sqrt(desvio/escheme.length-1);
println("media de células vivas: "+media);
println("desvio padrão de células vivas: "+desvio);
}
}
}
/*
for(int cont=0;cont<escheme.length;cont++){
println((cont+1)+"ª Geração: "+escheme[cont]);
if(escheme[cont]==0){
noLoop();
}
}
*/
}
void draw(){
int NumeroCelulas = 0;
// Mostramundo();
// if(escheme.length>0 && escheme[escheme.length-1]>0){
estatisticas();
//}
//println("Tamanho atual: "+Mundoatual.length);
for(int o=1;o<Mundoatual.length-1;o++){
NumeroCelulas = CruzaCelulas(o);
if(NumeroCelulas==2){
MundoNovo[o]=1;
}else{
MundoNovo[o]=0;
}
}
arrayCopy(MundoNovo,Mundoatual,32);
NumeroGeracao++;
}
O desvio padrão é calculado seguindo a formula sqrt((pow(x[0]-media,2) + pow(x[1]-media,2) + ...)/x.length-1);
Código-Fonte:
float vendaAn;
int NumeroGeracao=1;
int[] escheme = {};
int[] Mundoatual = {0,1,1,0,1,0,1,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,1,0,1,0,1,0,1};
int[] MundoNovo = new int[32];
void setup(){
size(1280,720);
frameRate(1);
background(0);
//Mostramundo();
}
int CruzaCelulas(int Posicao){
int NumeroCelulas = Mundoatual[Posicao-1] + Mundoatual[Posicao] + Mundoatual[Posicao+1];
return NumeroCelulas;
}
void Mostramundo(){
for(int i=0;i<Mundoatual.length;i++){
if(Mundoatual[i]==1){
ellipse(i*20,NumeroGeracao *30,20,20);
}
}
}
void estatisticas(){
int aux=0;
println(escheme.length);
if(escheme.length==0 || escheme[escheme.length-1]!=0){
for(int cont=0;cont<Mundoatual.length;cont++){
aux += Mundoatual[cont];
}
escheme = append(escheme,aux);
}else{
float media=0;
float desvio=0;
float max=0;
for(int cont=0;cont<escheme.length;cont++){
stroke(255);
//point((cont+1)*150-6,(height - escheme[cont]*50-6));
if(cont<escheme.length-1){
if(escheme[cont]>=max){max=escheme[cont];}
media += float(escheme[cont]);
}else{
media = media/escheme.length;
for(int i=0;i<escheme.length;i++){
desvio += pow((escheme[i]-media),2);
}
desvio = sqrt(desvio/escheme.length-1);
println("media de células vivas: "+media);
println("desvio padrão de células vivas: "+desvio);
}
}
}
/*
for(int cont=0;cont<escheme.length;cont++){
println((cont+1)+"ª Geração: "+escheme[cont]);
if(escheme[cont]==0){
noLoop();
}
}
*/
}
void draw(){
int NumeroCelulas = 0;
// Mostramundo();
// if(escheme.length>0 && escheme[escheme.length-1]>0){
estatisticas();
//}
//println("Tamanho atual: "+Mundoatual.length);
for(int o=1;o<Mundoatual.length-1;o++){
NumeroCelulas = CruzaCelulas(o);
if(NumeroCelulas==2){
MundoNovo[o]=1;
}else{
MundoNovo[o]=0;
}
}
arrayCopy(MundoNovo,Mundoatual,32);
NumeroGeracao++;
}
segunda-feira, 15 de junho de 2015
Exercício 21: Jogo da Vida - Parte II
Esse exercício é um aprimoramento do exercício anterior, mostrando outros gráficos representando agora o numero de nascimentos e mortes das gerações.
O gráfico em pizza mostra a porcentagem de mortes e nascimentos da geração corrente, usando apenas uma pequena relação que resulta em um ângulo que e usado para desenhar a "fatia" correspondente.
O gráfico de barras é apenas uma adaptação do gráfico de linhas, a adaptação feita no código anterior foi salvar as motes de cada geração.
Código-Fonte:
float vendaAn;
int NumeroGeracao=1;
int[] escheme = {
};
int[] escheme2 = {
};
int[] Mundoatual = {
0, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1
};
int[] MundoNovo = new int[32];
void setup() {
size(1280, 720);
frameRate(1);
background(0);
//Mostramundo();
}
int CruzaCelulas(int Posicao) {
int NumeroCelulas = Mundoatual[Posicao-1] + Mundoatual[Posicao] + Mundoatual[Posicao+1];
return NumeroCelulas;
}
void Mostramundo() {
for (int i=0; i<Mundoatual.length; i++) {
if (Mundoatual[i]==1) {
ellipse(i*20, NumeroGeracao *30, 20, 20);
}
}
}
void estatisticas() {
int aux=0;
int aux2=0;
println(escheme.length);
// if(escheme.length==0 || escheme[escheme.length-1]!=0){
for (int cont=0; cont<Mundoatual.length; cont++) {
aux += Mundoatual[cont];
if (Mundoatual[cont]==0) {
aux2++;
//} else {
// aux++;
}
}
//escheme = append(escheme,aux);
//escheme2 = append(escheme2,aux2);
// }else{
//ellipse(width/2, height/2, 40, 40);
println((aux2*360)/32);
//fill(0,0,255);
//arc(width/2,height/2,80,80, radians((aux2*360)/32), radians((aux*360)/32));
background(0);
fill(50,50,220);
rect(50,50,10,10); text("Nascimentos",65,60);
text("Nascimentos: "+(aux*100)/32+"%",50,95);
arc(width/2,height/2,160,160, radians((aux2*360)/32), radians(360));
fill(220,50,50);
rect(50,65,10,10); text("Mortes",65,75);
text("Mortes: "+(aux2*100)/32+"%",50,110);
arc(width/2,height/2,160,160, 0, radians((aux2*360)/32));
// }
//Grafico em barras
/*
if(escheme.length==0 || escheme[escheme.length-1]!=0){
for(int cont=0;cont<Mundoatual.length;cont++){
aux += Mundoatual[cont];
if(Mundoatual[cont]==0){
aux2++;
}
}
escheme = append(escheme,aux);
escheme2 = append(escheme2,aux2);
}else{
text("Nascimentos:",50,50);
for(int cont=0;cont<escheme.length;cont++){
stroke(255);
if(cont<escheme.length-1){
text(escheme[cont],(cont+1)*50-6,(height - escheme[cont]*10-6));
rect((cont+1)*50-6,(height - escheme[cont]*10-6),20,height-(height - escheme[cont]*10-6));
//line((cont+1)*150-6,(height - escheme[cont]*50-6),(cont+2)*150-6,(height - escheme[cont+1]*50-6));
}else{
text(escheme[cont],(cont+1)*50-6,(height - escheme[cont]*10-6));
}
}
line(width/2,0,width/2,height);
text("Mortes:",width/2+50,50);
for(int cont=0;cont<escheme2.length;cont++){
stroke(255);
// if(cont<escheme2.length-1){
text(escheme2[cont],width/2+(cont+1)*50-6,(height - escheme2[cont]*10-6));
rect(width/2+(cont+1)*50-6,(height - escheme2[cont]*10-6),20,height-(height - escheme2[cont]*10-6));
//line((cont+1)*150-6,(height - escheme[cont]*50-6),(cont+2)*150-6,(height - escheme[cont+1]*50-6));
// }else{
// text(escheme2[cont],width/2+(cont+1)*50-6,(height - escheme2[cont]*10-6));
// }
}
}
*/
//Grafico em linhas
/*
if(escheme.length==0 || escheme[escheme.length-1]!=0){
for(int cont=0;cont<escheme.length;cont++){
stroke(255)
point((cont+1)*150-6,(height - escheme[cont]*50-6));
if(cont<escheme.length-1){
text(escheme[cont],(cont+1)*150-6,(height - escheme[cont]*50-6));
line((cont+1)*150-6,(height - escheme[cont]*50-6),(cont+2)*150-6,(height - escheme[cont+1]*50-6));
}else{
text(escheme[cont],(cont+1)*150-6,(height - escheme[cont]*50-6));
}
}
*/
/*
for(int cont=0;cont<escheme.length;cont++){
println((cont+1)+"ª Geração: "+escheme[cont]);
if(escheme[cont]==0){
noLoop();
}
}
*/
}
void draw() {
int NumeroCelulas = 0;
// Mostramundo();
estatisticas();
//println("Tamanho atual: "+Mundoatual.length);
for (int o=1; o<Mundoatual.length-1; o++) {
NumeroCelulas = CruzaCelulas(o);
if (NumeroCelulas==2) {
MundoNovo[o]=1;
} else {
MundoNovo[o]=0;
}
}
arrayCopy(MundoNovo, Mundoatual, 32);
NumeroGeracao++;
}
O gráfico em pizza mostra a porcentagem de mortes e nascimentos da geração corrente, usando apenas uma pequena relação que resulta em um ângulo que e usado para desenhar a "fatia" correspondente.
O gráfico de barras é apenas uma adaptação do gráfico de linhas, a adaptação feita no código anterior foi salvar as motes de cada geração.
Código-Fonte:
float vendaAn;
int NumeroGeracao=1;
int[] escheme = {
};
int[] escheme2 = {
};
int[] Mundoatual = {
0, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1
};
int[] MundoNovo = new int[32];
void setup() {
size(1280, 720);
frameRate(1);
background(0);
//Mostramundo();
}
int CruzaCelulas(int Posicao) {
int NumeroCelulas = Mundoatual[Posicao-1] + Mundoatual[Posicao] + Mundoatual[Posicao+1];
return NumeroCelulas;
}
void Mostramundo() {
for (int i=0; i<Mundoatual.length; i++) {
if (Mundoatual[i]==1) {
ellipse(i*20, NumeroGeracao *30, 20, 20);
}
}
}
void estatisticas() {
int aux=0;
int aux2=0;
println(escheme.length);
// if(escheme.length==0 || escheme[escheme.length-1]!=0){
for (int cont=0; cont<Mundoatual.length; cont++) {
aux += Mundoatual[cont];
if (Mundoatual[cont]==0) {
aux2++;
//} else {
// aux++;
}
}
//escheme = append(escheme,aux);
//escheme2 = append(escheme2,aux2);
// }else{
//ellipse(width/2, height/2, 40, 40);
println((aux2*360)/32);
//fill(0,0,255);
//arc(width/2,height/2,80,80, radians((aux2*360)/32), radians((aux*360)/32));
background(0);
fill(50,50,220);
rect(50,50,10,10); text("Nascimentos",65,60);
text("Nascimentos: "+(aux*100)/32+"%",50,95);
arc(width/2,height/2,160,160, radians((aux2*360)/32), radians(360));
fill(220,50,50);
rect(50,65,10,10); text("Mortes",65,75);
text("Mortes: "+(aux2*100)/32+"%",50,110);
arc(width/2,height/2,160,160, 0, radians((aux2*360)/32));
// }
//Grafico em barras
/*
if(escheme.length==0 || escheme[escheme.length-1]!=0){
for(int cont=0;cont<Mundoatual.length;cont++){
aux += Mundoatual[cont];
if(Mundoatual[cont]==0){
aux2++;
}
}
escheme = append(escheme,aux);
escheme2 = append(escheme2,aux2);
}else{
text("Nascimentos:",50,50);
for(int cont=0;cont<escheme.length;cont++){
stroke(255);
if(cont<escheme.length-1){
text(escheme[cont],(cont+1)*50-6,(height - escheme[cont]*10-6));
rect((cont+1)*50-6,(height - escheme[cont]*10-6),20,height-(height - escheme[cont]*10-6));
//line((cont+1)*150-6,(height - escheme[cont]*50-6),(cont+2)*150-6,(height - escheme[cont+1]*50-6));
}else{
text(escheme[cont],(cont+1)*50-6,(height - escheme[cont]*10-6));
}
}
line(width/2,0,width/2,height);
text("Mortes:",width/2+50,50);
for(int cont=0;cont<escheme2.length;cont++){
stroke(255);
// if(cont<escheme2.length-1){
text(escheme2[cont],width/2+(cont+1)*50-6,(height - escheme2[cont]*10-6));
rect(width/2+(cont+1)*50-6,(height - escheme2[cont]*10-6),20,height-(height - escheme2[cont]*10-6));
//line((cont+1)*150-6,(height - escheme[cont]*50-6),(cont+2)*150-6,(height - escheme[cont+1]*50-6));
// }else{
// text(escheme2[cont],width/2+(cont+1)*50-6,(height - escheme2[cont]*10-6));
// }
}
}
*/
//Grafico em linhas
/*
if(escheme.length==0 || escheme[escheme.length-1]!=0){
for(int cont=0;cont<escheme.length;cont++){
stroke(255)
point((cont+1)*150-6,(height - escheme[cont]*50-6));
if(cont<escheme.length-1){
text(escheme[cont],(cont+1)*150-6,(height - escheme[cont]*50-6));
line((cont+1)*150-6,(height - escheme[cont]*50-6),(cont+2)*150-6,(height - escheme[cont+1]*50-6));
}else{
text(escheme[cont],(cont+1)*150-6,(height - escheme[cont]*50-6));
}
}
*/
/*
for(int cont=0;cont<escheme.length;cont++){
println((cont+1)+"ª Geração: "+escheme[cont]);
if(escheme[cont]==0){
noLoop();
}
}
*/
}
void draw() {
int NumeroCelulas = 0;
// Mostramundo();
estatisticas();
//println("Tamanho atual: "+Mundoatual.length);
for (int o=1; o<Mundoatual.length-1; o++) {
NumeroCelulas = CruzaCelulas(o);
if (NumeroCelulas==2) {
MundoNovo[o]=1;
} else {
MundoNovo[o]=0;
}
}
arrayCopy(MundoNovo, Mundoatual, 32);
NumeroGeracao++;
}
domingo, 14 de junho de 2015
Exercício 20: Jogo da Vida
O código a seguir, implementa uma versão simplificada do algoritmo Jogo da Vida, a implementação original requeria matrizes e uma varredura na área ao redor de cada célula. Essa implementação mostra um vetor de células ao invés de uma matriz, em condições normal essa "linha" de células só iria ser atualizada, mas nesse caso, cada geração é mostrada, para que a diferença seja notada com mais facilidade.
O código do jogo da vida fora desenvolvido em sala, e foi somente adaptado para processar 32 valores, ao invés dos originais 8 valores; como pedido na atividade, se faz necessário guardar o numero de células em cada geração e gerar um gráfico de linhas baseado em tais valores (o código do gráfico de linhas foi reutilizado de uma aula anterior), a função Mostramundo (responsável por mostra a representação gráfica de cada geração) deixa de ser chamada, um novo vetor de inteiros vazio é criado para armazenar o numero de células das gerações, a função responsável por fazer isso acontecer será explanada abaixo.
A função estatisticas é criada para atribuir o numero de células vivas, um pequeno teste é feito para evitar redundâncias, quando o número de células vivas for igual a zero esse valor é atribuído ao próximo índice do vetor, no entanto o laço de repetição que atribui esses valores não é mais executado, pois dali em diante todos os valores serão zero, sendo o fim. Se a condição para executar o laço não for satisfeita significa que todos os valores já foram salvos, então o gráfico é desenhado na tela, junto com os valores que cada vértice representa.
Código-Fonte:
float vendaAn;
int NumeroGeracao=1;
int[] escheme = {};
int[] Mundoatual = {0,1,1,0,1,0,1,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,1,0,1,0,1,0,1};
int[] MundoNovo = new int[32];
void setup(){
size(1280,720);
frameRate(60);
background(0);
}
int CruzaCelulas(int Posicao){
int NumeroCelulas = Mundoatual[Posicao-1] + Mundoatual[Posicao] + Mundoatual[Posicao+1];
return NumeroCelulas;
}
void Mostramundo(){
for(int i=0;i<Mundoatual.length;i++){
if(Mundoatual[i]==1){
ellipse(i*20,NumeroGeracao *30,20,20);
}
}
}
void estatisticas(){
int aux=0;
println(escheme.length);
if(escheme.length==0 || escheme[escheme.length-1]!=0){
for(int cont=0;cont<Mundoatual.length;cont++){
aux += Mundoatual[cont];
}
escheme = append(escheme,aux);
}else{
for(int cont=0;cont<escheme.length;cont++){
stroke(255);
point((cont+1)*150-6,(height - escheme[cont]*50-6));
if(cont<escheme.length-1){
text(escheme[cont],(cont+1)*150-6,(height - escheme[cont]*50-6));
line((cont+1)*150-6,(height - escheme[cont]*50-6),(cont+2)*150-6,(height - escheme[cont+1]*50-6));
}else{
text(escheme[cont],(cont+1)*150-6,(height - escheme[cont]*50-6));
}
}
}
}
void draw(){
int NumeroCelulas = 0;
// Mostramundo();
estatisticas();
//println("Tamanho atual: "+Mundoatual.length);
for(int o=1;o<Mundoatual.length-1;o++){
NumeroCelulas = CruzaCelulas(o);
if(NumeroCelulas==2){
MundoNovo[o]=1;
}else{
MundoNovo[o]=0;
}
}
arrayCopy(MundoNovo,Mundoatual,32);
NumeroGeracao++;
}
O código do jogo da vida fora desenvolvido em sala, e foi somente adaptado para processar 32 valores, ao invés dos originais 8 valores; como pedido na atividade, se faz necessário guardar o numero de células em cada geração e gerar um gráfico de linhas baseado em tais valores (o código do gráfico de linhas foi reutilizado de uma aula anterior), a função Mostramundo (responsável por mostra a representação gráfica de cada geração) deixa de ser chamada, um novo vetor de inteiros vazio é criado para armazenar o numero de células das gerações, a função responsável por fazer isso acontecer será explanada abaixo.
A função estatisticas é criada para atribuir o numero de células vivas, um pequeno teste é feito para evitar redundâncias, quando o número de células vivas for igual a zero esse valor é atribuído ao próximo índice do vetor, no entanto o laço de repetição que atribui esses valores não é mais executado, pois dali em diante todos os valores serão zero, sendo o fim. Se a condição para executar o laço não for satisfeita significa que todos os valores já foram salvos, então o gráfico é desenhado na tela, junto com os valores que cada vértice representa.
Código-Fonte:
float vendaAn;
int NumeroGeracao=1;
int[] escheme = {};
int[] Mundoatual = {0,1,1,0,1,0,1,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,1,1,1,1,0,1,0,1,0,1};
int[] MundoNovo = new int[32];
void setup(){
size(1280,720);
frameRate(60);
background(0);
}
int CruzaCelulas(int Posicao){
int NumeroCelulas = Mundoatual[Posicao-1] + Mundoatual[Posicao] + Mundoatual[Posicao+1];
return NumeroCelulas;
}
void Mostramundo(){
for(int i=0;i<Mundoatual.length;i++){
if(Mundoatual[i]==1){
ellipse(i*20,NumeroGeracao *30,20,20);
}
}
}
void estatisticas(){
int aux=0;
println(escheme.length);
if(escheme.length==0 || escheme[escheme.length-1]!=0){
for(int cont=0;cont<Mundoatual.length;cont++){
aux += Mundoatual[cont];
}
escheme = append(escheme,aux);
}else{
for(int cont=0;cont<escheme.length;cont++){
stroke(255);
point((cont+1)*150-6,(height - escheme[cont]*50-6));
if(cont<escheme.length-1){
text(escheme[cont],(cont+1)*150-6,(height - escheme[cont]*50-6));
line((cont+1)*150-6,(height - escheme[cont]*50-6),(cont+2)*150-6,(height - escheme[cont+1]*50-6));
}else{
text(escheme[cont],(cont+1)*150-6,(height - escheme[cont]*50-6));
}
}
}
}
void draw(){
int NumeroCelulas = 0;
// Mostramundo();
estatisticas();
//println("Tamanho atual: "+Mundoatual.length);
for(int o=1;o<Mundoatual.length-1;o++){
NumeroCelulas = CruzaCelulas(o);
if(NumeroCelulas==2){
MundoNovo[o]=1;
}else{
MundoNovo[o]=0;
}
}
arrayCopy(MundoNovo,Mundoatual,32);
NumeroGeracao++;
}
Exercício 19: Chroma Key e Teoria dos Conjuntos
Nesse post, será explanado a relação entre o efeito Chroma Key e a teoria matemática dos Conjuntos.
Considerando que cada uma das imagens formem o seu conjunto, podemos considerar a parte azul ou verde (como na imagem abaixo), como equivalente ao conjunto vazio (ø), e o a pessoa como os valores de posições onde há valor, então o processo de chroma key é análogo à adição de conjuntos, os valores presentes em um não são repetidos, sendo assim nas posições onde esta a pessoa existe valor, então este não é sobreposto pelo valor da mesma posição do outro "conjunto", e nas posições vazias, os valores do segundo conjunto os preenchem, tendo como resultado a terceira imagem abaixo(Resultado).
Considerando que cada uma das imagens formem o seu conjunto, podemos considerar a parte azul ou verde (como na imagem abaixo), como equivalente ao conjunto vazio (ø), e o a pessoa como os valores de posições onde há valor, então o processo de chroma key é análogo à adição de conjuntos, os valores presentes em um não são repetidos, sendo assim nas posições onde esta a pessoa existe valor, então este não é sobreposto pelo valor da mesma posição do outro "conjunto", e nas posições vazias, os valores do segundo conjunto os preenchem, tendo como resultado a terceira imagem abaixo(Resultado).
Imagem com fundo verde.
Imagem de fundo.
Resultado
terça-feira, 2 de junho de 2015
Exercício 18: CrossFade Entre 3 Imagens
O código a seguir realiza o crossfade entre 3 imagens, o código de crossfade desenvolvida em aula é reutilizado, uma adaptação é feita para que a variável que controla o crossfade é controlada pelo movimento do mouse, enquanto o mouse esta na primeira metade da tela vertical da tela, o programa realiza o crossfade entre a imagem 1 e 2, na segunda metade este faz o crossfade entre as imagens 2 e 3, e vice e versa.
Código-Fonte:
PImage imgOriginal;
PImage img2;
PImage img3;
float a,a2,r,g,b;
int pos;
void setup(){
a=1;
a2=1;
mouseY=1;
size(320,240);
imgOriginal = loadImage("opa.jpg");
img2 = loadImage("trololo.jpg");
img3 = loadImage("yopa.JPG");
}
void draw(){
loadPixels();
//a = a - 0.001;
if(mouseY<height/2){
a=float(mouseY)/float(height/2);
println(float(mouseY)/float(height/2));
}else{
a2=float(mouseY-height/2)/float(height/2);
println(float(mouseY-height/2)/float(height/2));
}
for(int x=0;x<320;x++){
for(int y=0;y<240;y++){
if(a>=0 && mouseY<width/2){
pos=y*320+x;
r = (1-a) * red(imgOriginal.pixels[pos]) + a * red(img2.pixels[pos]);
g = (1-a) * green(imgOriginal.pixels[pos]) + a * green(img2.pixels[pos]);
b = (1-a) * blue(imgOriginal.pixels[pos]) + a * blue(img2.pixels[pos]);
pixels[pos] = color(r,g,b);
}else if(a2>=0 && mouseY>height/2){
pos=y*320+x;
r = (1-a2) * red(img2.pixels[pos]) + a2 * red(img3.pixels[pos]);
g = (1-a2) * green(img2.pixels[pos]) + a2 * green(img3.pixels[pos]);
b = (1-a2) * blue(img2.pixels[pos]) + a2 * blue(img3.pixels[pos]);
pixels[pos] = color(r,g,b);
}
}
}
updatePixels();
}
Código-Fonte:
PImage imgOriginal;
PImage img2;
PImage img3;
float a,a2,r,g,b;
int pos;
void setup(){
a=1;
a2=1;
mouseY=1;
size(320,240);
imgOriginal = loadImage("opa.jpg");
img2 = loadImage("trololo.jpg");
img3 = loadImage("yopa.JPG");
}
void draw(){
loadPixels();
//a = a - 0.001;
if(mouseY<height/2){
a=float(mouseY)/float(height/2);
println(float(mouseY)/float(height/2));
}else{
a2=float(mouseY-height/2)/float(height/2);
println(float(mouseY-height/2)/float(height/2));
}
for(int x=0;x<320;x++){
for(int y=0;y<240;y++){
if(a>=0 && mouseY<width/2){
pos=y*320+x;
r = (1-a) * red(imgOriginal.pixels[pos]) + a * red(img2.pixels[pos]);
g = (1-a) * green(imgOriginal.pixels[pos]) + a * green(img2.pixels[pos]);
b = (1-a) * blue(imgOriginal.pixels[pos]) + a * blue(img2.pixels[pos]);
pixels[pos] = color(r,g,b);
}else if(a2>=0 && mouseY>height/2){
pos=y*320+x;
r = (1-a2) * red(img2.pixels[pos]) + a2 * red(img3.pixels[pos]);
g = (1-a2) * green(img2.pixels[pos]) + a2 * green(img3.pixels[pos]);
b = (1-a2) * blue(img2.pixels[pos]) + a2 * blue(img3.pixels[pos]);
pixels[pos] = color(r,g,b);
}
}
}
updatePixels();
}
segunda-feira, 1 de junho de 2015
Exercício 17: Photocheap Filtros
O código a seguir, cria filtros para uma imagem para dar um ar de imagem envelhecida, o primeiro cria ruídos na imagem, o segundo deixa a imagem em tons de cinza, o terceiro deixa a imagem avermelhada, e o ultimo deixa a imagem amarelada, a seguir sera explicado como cada filtro atua.
Ruido: A variável pos guarda o numero de pixels da imagem original que foi copiada, um numero randômico de inteiro de 0 até pos-1 é gerado para indicar um pixel da imagem, e nesse pixel é adicionado 16 a cada canal, esse numero pode ser ajustado. o numero de passos para o laços pode ser controlado, aumentando ou diminuído o numero de pixel a serem alterados, no exemplo o numero de passos é 100000.
Cinza: Baseado na percepção das cores pelo ser humano cada cor da image, é multiplicado por um valor que representa a porcentagem de percepção que o ser humano tem daquela cor, depois uma variável media soma todos os canais já multiplicados, tendo assim a média ponderada das cores, e em todos os canais da imagem resultante a variável media é setada, resultando na imagem em tons de cinza.
Vermelho: O filtro a seguir copia as cores G e B para a imagem resultante, e adiciona 64 ao canal R e copia para imagem resultante.,
Amarelo: Esse filtro é bem parecido com o ultimo, só que para adicionar amarelo, é necessário adicionar valor nos canais vermelho e verde.
Código-Fonte:
PImage img;
PImage imgRuido;
PImage imgCinza;
PImage imgRed;
PImage imgYellow;
float media,r,b,g;
int pos;
void setup(){
size(800,600);
img = loadImage("opa.jpg");
imgRuido = createImage(640,447,RGB);
imgCinza = createImage(640,447,RGB);
imgRed = createImage(640,447,RGB);
imgYellow = createImage(640,447,RGB);
for (int x=0; x<640; x++) {
for (int y=0; y<447; y++) {
pos=y*640+x;
imgRuido.pixels[pos] = img.pixels[pos];
imgRed.pixels[pos] = img.pixels[pos];
}
}
//Ruido
int p =0;
for (int i=0; i<100000; i++) {
p = (int)random(0,pos-1);
r=red(imgRuido.pixels[p])+16;
g=green(imgRuido.pixels[p])+16;
b=blue(imgRuido.pixels[p])+16;
imgRuido.pixels[p] = color(r,g,b);
imgCinza.pixels[p] = color(r,g,b);
}
//Cinza
for (int x=0; x<640; x++) {
for (int y=0; y<447; y++) {
pos=y*640+x;
r=red(imgRuido.pixels[pos])*0.3;
g=green(imgRuido.pixels[pos])*0.59;
b=blue(imgRuido.pixels[pos])*0.11;
media = r+g+b;
imgCinza.pixels[pos] = color(media,media,media);
}
}
//Vermelho
for (int x=0; x<640; x++) {
for (int y=0; y<447; y++) {
pos=y*640+x;
r=red(imgCinza.pixels[pos])+64;
g=green(imgCinza.pixels[pos]);
b=blue(imgCinza.pixels[pos]);
imgRed.pixels[pos] = color(r,g,b);
}
}
//Amarelo
for (int x=0; x<640; x++) {
for (int y=0; y<447; y++) {
pos=y*640+x;
r=red(imgRed.pixels[pos])+64;
g=green(imgRed.pixels[pos])+64;
b=blue(imgRed.pixels[pos]);
imgYellow.pixels[pos] = color(r,g,b);
}
}
}
void draw() {
//image(img,0,0);
//image(imgRuido,0,0);
//image(imgCinza,0,0);
//image(imgRed, 0, 0);
image(imgYellow,0,0);
}
Ruido: A variável pos guarda o numero de pixels da imagem original que foi copiada, um numero randômico de inteiro de 0 até pos-1 é gerado para indicar um pixel da imagem, e nesse pixel é adicionado 16 a cada canal, esse numero pode ser ajustado. o numero de passos para o laços pode ser controlado, aumentando ou diminuído o numero de pixel a serem alterados, no exemplo o numero de passos é 100000.
Cinza: Baseado na percepção das cores pelo ser humano cada cor da image, é multiplicado por um valor que representa a porcentagem de percepção que o ser humano tem daquela cor, depois uma variável media soma todos os canais já multiplicados, tendo assim a média ponderada das cores, e em todos os canais da imagem resultante a variável media é setada, resultando na imagem em tons de cinza.
Vermelho: O filtro a seguir copia as cores G e B para a imagem resultante, e adiciona 64 ao canal R e copia para imagem resultante.,
Amarelo: Esse filtro é bem parecido com o ultimo, só que para adicionar amarelo, é necessário adicionar valor nos canais vermelho e verde.
Código-Fonte:
PImage img;
PImage imgRuido;
PImage imgCinza;
PImage imgRed;
PImage imgYellow;
float media,r,b,g;
int pos;
void setup(){
size(800,600);
img = loadImage("opa.jpg");
imgRuido = createImage(640,447,RGB);
imgCinza = createImage(640,447,RGB);
imgRed = createImage(640,447,RGB);
imgYellow = createImage(640,447,RGB);
for (int x=0; x<640; x++) {
for (int y=0; y<447; y++) {
pos=y*640+x;
imgRuido.pixels[pos] = img.pixels[pos];
imgRed.pixels[pos] = img.pixels[pos];
}
}
//Ruido
int p =0;
for (int i=0; i<100000; i++) {
p = (int)random(0,pos-1);
r=red(imgRuido.pixels[p])+16;
g=green(imgRuido.pixels[p])+16;
b=blue(imgRuido.pixels[p])+16;
imgRuido.pixels[p] = color(r,g,b);
imgCinza.pixels[p] = color(r,g,b);
}
//Cinza
for (int x=0; x<640; x++) {
for (int y=0; y<447; y++) {
pos=y*640+x;
r=red(imgRuido.pixels[pos])*0.3;
g=green(imgRuido.pixels[pos])*0.59;
b=blue(imgRuido.pixels[pos])*0.11;
media = r+g+b;
imgCinza.pixels[pos] = color(media,media,media);
}
}
//Vermelho
for (int x=0; x<640; x++) {
for (int y=0; y<447; y++) {
pos=y*640+x;
r=red(imgCinza.pixels[pos])+64;
g=green(imgCinza.pixels[pos]);
b=blue(imgCinza.pixels[pos]);
imgRed.pixels[pos] = color(r,g,b);
}
}
//Amarelo
for (int x=0; x<640; x++) {
for (int y=0; y<447; y++) {
pos=y*640+x;
r=red(imgRed.pixels[pos])+64;
g=green(imgRed.pixels[pos])+64;
b=blue(imgRed.pixels[pos]);
imgYellow.pixels[pos] = color(r,g,b);
}
}
}
void draw() {
//image(img,0,0);
//image(imgRuido,0,0);
//image(imgCinza,0,0);
//image(imgRed, 0, 0);
image(imgYellow,0,0);
}
domingo, 31 de maio de 2015
Exercício 16: Brilho da Imagem
O código a seguir é bem simples e usa o mesmo código da atividade FadeIn para ajustar o brilho da imagem, a grande diferença é que ha uma variável que controla o brilho, ela varia de -0.5 até 0.5, para isso ha uma pequena razão para uma metade da tela e outra para outra metade. Desse jeito a variável se comporta da maneira desejada, depois multiplica-se a variável brilho por 255 e o resultado é somado a cada canal daquele pixel da imagem, resultando em um aumento de brilho rustico porém funcional.
Código-Fonte:
PImage imgOriginal;
float r,g,b,brilho;
int pos;
void setup(){
size(320,240);
imgOriginal = loadImage("opa.jpg");
}
void draw(){
loadPixels();
if(mouseX>width/2){
brilho= (mouseX*0.5)/width;
}else if(mouseX<width/2){
brilho= ((width/2-mouseX)*-0.5)/(width/2);
}
println(brilho);
for(int x=0;x<320;x++){
for(int y=0;y<240;y++){
if(brilho<=0.5){
pos=y*320+x;
r = 255*brilho + red(imgOriginal.pixels[pos]);
g = 255*brilho + green(imgOriginal.pixels[pos]);
b = 255*brilho + blue(imgOriginal.pixels[pos]);
pixels[pos] = color(r,g,b);
}
}
}
updatePixels();
}
Código-Fonte:
PImage imgOriginal;
float r,g,b,brilho;
int pos;
void setup(){
size(320,240);
imgOriginal = loadImage("opa.jpg");
}
void draw(){
loadPixels();
if(mouseX>width/2){
brilho= (mouseX*0.5)/width;
}else if(mouseX<width/2){
brilho= ((width/2-mouseX)*-0.5)/(width/2);
}
println(brilho);
for(int x=0;x<320;x++){
for(int y=0;y<240;y++){
if(brilho<=0.5){
pos=y*320+x;
r = 255*brilho + red(imgOriginal.pixels[pos]);
g = 255*brilho + green(imgOriginal.pixels[pos]);
b = 255*brilho + blue(imgOriginal.pixels[pos]);
pixels[pos] = color(r,g,b);
}
}
}
updatePixels();
}
sábado, 30 de maio de 2015
Exercício 15: Relógio Digital
Para a criação do relógio digital, foi desenvolvida uma função que calcula dezenas e unidades e baseadas nela seleciona e mostra a imagem correspondente a dezena e a imagem considerando a posição x e y passadas, criando a dezena na posição x passada e a unidade 100 pixels para direita, essa função é usada para mostrar as horas, os minutos e os segundos.
Resultado:
Código-Fonte:
PImage i0, i1, i2, i3, i4, i5, i6, i7, i8, i9;
void setup() {
size(800, 600);
i0 = loadImage("0.png");
i1 = loadImage("1.png");
i2 = loadImage("2.png");
i3 = loadImage("3.png");
i4 = loadImage("4.png");
i5 = loadImage("5.png");
i6 = loadImage("6.png");
i7 = loadImage("7.png");
i8 = loadImage("8.png");
i9 = loadImage("9.png");
}
void draw() {
println(hour()+":"+minute()+":"+second());
calculaDU(hour(),width-750,height/2-54);
calculaDU(minute(),width-500,height/2-54);
calculaDU(second(),width-250,height/2-54);
fill(0);
ellipse(width-525,height/2-20,20,20);
ellipse(width-525,height/2+20,20,20);
ellipse(width-275,height/2-20,20,20);
ellipse(width-275,height/2+20,20,20);
}
void calculaDU(int valor, int X, int Y) {
int dezena = valor/10;
int unidade = valor%10;
//println("dezena: "+dezena+" unidade: "+unidade);
switch(dezena) {
case 0:
image(i0, X, Y);
break;
case 1:
image(i1, X, Y);
break;
case 2:
image(i2, X, Y);
break;
case 3:
image(i3, X, Y);
break;
case 4:
image(i4, X, Y);
break;
case 5:
image(i5, X, Y);
break;
case 6:
image(i6, X, Y);
break;
case 7:
image(i7, X, Y);
break;
case 8:
image(i8, X, Y);
break;
case 9:
image(i9, X, Y);
break;
}
switch(unidade) {
case 0:
image(i0, X+100, Y);
break;
case 1:
image(i1, X+100, Y);
break;
case 2:
image(i2, X+100, Y);
break;
case 3:
image(i3, X+100, Y);
break;
case 4:
image(i4, X+100, Y);
break;
case 5:
image(i5, X+100, Y);
break;
case 6:
image(i6, X+100, Y);
break;
case 7:
image(i7, X+100, Y);
break;
case 8:
image(i8, X+100, Y);
break;
case 9:
image(i9, X+100, Y);
break;
}
}
Resultado:
Código-Fonte:
PImage i0, i1, i2, i3, i4, i5, i6, i7, i8, i9;
void setup() {
size(800, 600);
i0 = loadImage("0.png");
i1 = loadImage("1.png");
i2 = loadImage("2.png");
i3 = loadImage("3.png");
i4 = loadImage("4.png");
i5 = loadImage("5.png");
i6 = loadImage("6.png");
i7 = loadImage("7.png");
i8 = loadImage("8.png");
i9 = loadImage("9.png");
}
void draw() {
println(hour()+":"+minute()+":"+second());
calculaDU(hour(),width-750,height/2-54);
calculaDU(minute(),width-500,height/2-54);
calculaDU(second(),width-250,height/2-54);
fill(0);
ellipse(width-525,height/2-20,20,20);
ellipse(width-525,height/2+20,20,20);
ellipse(width-275,height/2-20,20,20);
ellipse(width-275,height/2+20,20,20);
}
void calculaDU(int valor, int X, int Y) {
int dezena = valor/10;
int unidade = valor%10;
//println("dezena: "+dezena+" unidade: "+unidade);
switch(dezena) {
case 0:
image(i0, X, Y);
break;
case 1:
image(i1, X, Y);
break;
case 2:
image(i2, X, Y);
break;
case 3:
image(i3, X, Y);
break;
case 4:
image(i4, X, Y);
break;
case 5:
image(i5, X, Y);
break;
case 6:
image(i6, X, Y);
break;
case 7:
image(i7, X, Y);
break;
case 8:
image(i8, X, Y);
break;
case 9:
image(i9, X, Y);
break;
}
switch(unidade) {
case 0:
image(i0, X+100, Y);
break;
case 1:
image(i1, X+100, Y);
break;
case 2:
image(i2, X+100, Y);
break;
case 3:
image(i3, X+100, Y);
break;
case 4:
image(i4, X+100, Y);
break;
case 5:
image(i5, X+100, Y);
break;
case 6:
image(i6, X+100, Y);
break;
case 7:
image(i7, X+100, Y);
break;
case 8:
image(i8, X+100, Y);
break;
case 9:
image(i9, X+100, Y);
break;
}
}
Exercício 14: O Olho Que Tudo vê
O código a seguir cria um "olho" que fica olhando para a direção do mouse, para fazer isso foi usado as coordenadas polares para restringir a movimentação da pupila a área da Esclerótica. É calculado a tangente entre o as posições mouseY-height/2 e mouseX-width/2, e a partir dessa tangente é calculado um angulo resultante. após isso é só chamar a função das coordenadas polares (retornaLinha) passando o raio e o angulo. Dependendo do quadrante o programa adiciona um valor ao angulo, para que este retorne o equivalente no quadrante especifico.
Código-Fonte:
int meioX, meioY;
float x, y, anguloRes=0;
void setup() {
size(800, 800);
meioX = width/2;
meioY = height/2;
mouseX=1;
}
void draw() {
background(0);
if(mouseX!=0)
{
anguloRes=degrees(atan(float(mouseY-height/2)/float(mouseX-width/2)));
println(anguloRes);
}
if(mouseX<width/2 && mouseY>height/2 || mouseX<width/2 && mouseY<height/2)
{
anguloRes=anguloRes+180;
println(anguloRes);
}
if(mouseX>width/2 && mouseY<height/2)
{
anguloRes=anguloRes+360;
println(anguloRes);
}
println(anguloRes);
retornaLinha(25, anguloRes);
fill(255);
ellipse(meioX, meioY, 100, 100);
fill(0);
ellipse(meioX+x,meioY+y,40,40);
}
void retornaLinha(float r, float ang) {
x = r * cos(radians(ang));
y = r * sin(radians(ang));
}
Código-Fonte:
int meioX, meioY;
float x, y, anguloRes=0;
void setup() {
size(800, 800);
meioX = width/2;
meioY = height/2;
mouseX=1;
}
void draw() {
background(0);
if(mouseX!=0)
{
anguloRes=degrees(atan(float(mouseY-height/2)/float(mouseX-width/2)));
println(anguloRes);
}
if(mouseX<width/2 && mouseY>height/2 || mouseX<width/2 && mouseY<height/2)
{
anguloRes=anguloRes+180;
println(anguloRes);
}
if(mouseX>width/2 && mouseY<height/2)
{
anguloRes=anguloRes+360;
println(anguloRes);
}
println(anguloRes);
retornaLinha(25, anguloRes);
fill(255);
ellipse(meioX, meioY, 100, 100);
fill(0);
ellipse(meioX+x,meioY+y,40,40);
}
void retornaLinha(float r, float ang) {
x = r * cos(radians(ang));
y = r * sin(radians(ang));
}
sexta-feira, 29 de maio de 2015
Exercício 13: O Relógio de Segundos
O código a seguir cria um pequeno relógio com um único ponteiro de segundos. O programa é simples e usa coordenadas polares. Ao iniciar a variável tempoInicial salva o tempo em milisegundos inicial, depois o programa testa sempre no inicio da funcao draw se entre tempoAtual e o tempoInicial a diferença e maior igual a 1000 (1 segundo), se sim, incrementa a variáveis segundos em 1, outro teste reinicia a variável segundos para 0, a posição do ponteiro e gerada usando uma função de coordenadas polares, e seu angulo e calculado com uma pequena razão: (Segundos*360)/60. Depois disso é só inverter o x, para que o ponteiro gire em sentido horário, e diminuir 270 no angulo para que ele comece de cima.
Código-Fonte:
int meioX, meioY,tempoInicial,tempoAtual,segundos=0,anguloRes=0;
float x,y;
void setup(){
size(800,600);
meioX = width/2;
meioY = height/2;
tempoInicial = millis();
}
void draw(){
background(0);
tempoAtual = millis();
if(tempoAtual-tempoInicial>=1000){
segundos++;
if(segundos>=60){segundos=0;}
tempoInicial=tempoAtual;
println("Segundos: "+segundos);
println("Tempo Inicial: "+tempoInicial);
}
anguloRes = (segundos*360)/60;
retornaLinha(50,anguloRes-270);
//line(0,meioY,width,meioY);
ellipse(meioX,meioY,100,100);
line(meioX,meioY,meioX+(x*-1),meioY-(y));
}
void retornaLinha(float r, float ang){
x = r * cos(radians(ang));
y = r * sin(radians(ang));
}
Código-Fonte:
int meioX, meioY,tempoInicial,tempoAtual,segundos=0,anguloRes=0;
float x,y;
void setup(){
size(800,600);
meioX = width/2;
meioY = height/2;
tempoInicial = millis();
}
void draw(){
background(0);
tempoAtual = millis();
if(tempoAtual-tempoInicial>=1000){
segundos++;
if(segundos>=60){segundos=0;}
tempoInicial=tempoAtual;
println("Segundos: "+segundos);
println("Tempo Inicial: "+tempoInicial);
}
anguloRes = (segundos*360)/60;
retornaLinha(50,anguloRes-270);
//line(0,meioY,width,meioY);
ellipse(meioX,meioY,100,100);
line(meioX,meioY,meioX+(x*-1),meioY-(y));
}
void retornaLinha(float r, float ang){
x = r * cos(radians(ang));
y = r * sin(radians(ang));
}
domingo, 24 de maio de 2015
Exercício 12: Barco - SS Seno
O código é bem simples é calculado uma variação baseado no seno de um angulo x, as ondas são formadas pelo segmento de elipses e o "barco" e representado por um retângulo com as duas quinas inferiores arredondadas, a variação é multiplicada por um valor, pois esta só vai de 0 a 1. Após isso, é so adaptar para o "barco" ficar em cima da onda e antes de seu final.
Apesar de não ficar tão realista (o barco não reage a a bruscas mudanças de atitude), o resultado é razoavelmente satisfatório.
Código-Fonte:
void setup() {
size(800, 600);
//noStroke();
}
float x = 0;
void draw() {
float y = sin(x);
x+=0.01;
stroke(0);
fill(92,51,23);
rect(x*75-475, height/2 +y*25-20, 50, 20, 0, 0, 12, 12);
noStroke();
fill(0,25,128);
ellipse(x*75, height/2 +y*25, 5, 5);
}
Apesar de não ficar tão realista (o barco não reage a a bruscas mudanças de atitude), o resultado é razoavelmente satisfatório.
Código-Fonte:
void setup() {
size(800, 600);
//noStroke();
}
float x = 0;
void draw() {
float y = sin(x);
x+=0.01;
stroke(0);
fill(92,51,23);
rect(x*75-475, height/2 +y*25-20, 50, 20, 0, 0, 12, 12);
noStroke();
fill(0,25,128);
ellipse(x*75, height/2 +y*25, 5, 5);
}
domingo, 17 de maio de 2015
Exercício 11: Função cria polígonos(Fazendo o trabalho do processing)
Esse código cria polígonos regulares baseado no numero de lados e um "raio".
A função criaPoligono recebe o raio e o numero de lados. baseado no numero de lados a função gera as coordenadas X e Y dos vértices do polígono, exemplo: 4 lados ele gera coordenadas de três pontos, sendo o ultimo também o primeiro, após gerar os valores ela os guarda em dois vetores X e Y criadas com o numero de índices sendo o numero de lados.
Após isso linhas são desenhadas com as coordenadas, tendo um pequeno tratamento de exceção para ArrayOutOfBounds, para se o próximo índice não existir, indicar para o primeiro índice.
A segunda função se difere apenas na opção de passar o centro do poligono.
Pretendo atualizar esse código usando o código da flor x para deixar os pontos em x invés de +.
Código-Fonte:
float x,y;
void setup() {
size(800, 600);
//criaPoligono(120,4);
criaPoligono2(120,4,width/2,height/2);
//linhas centrais que cruzam a tela
line(0,height/2,width,height/2);
line(width/2,0,width/2,height);
}
void draw() {
retornaLinha(2,60);
//println("X = "+x+" Y = "+y);
//line(width/2,height/2,int(x)*16,int(y)*16);
}
void retornaLinha(float r, float ang){
int[] numbers = new int[3];
x = r * cos(radians(ang));
y = r * sin(radians(ang));
//pontos[0] = int(x);
// pontos[1] = int(y);
}
void criaPoligono(float r, int lados){
int[] X = new int[lados];
int[] Y = new int[lados];
int angulo = 360 / lados;
int yopa = 0;
int cont = 0;
while(cont<lados){
x = r * cos(radians(yopa));
y = r * sin(radians(yopa));
X[cont] = int(x);
Y[cont] = int(y);
strokeWeight(2);
// line(width/2+int(x),height/2+int(y),int(x)+width/2,int(y)+height/2);
println("X = "+x+" Y = "+y);
cont++;
yopa+=angulo;
}
cont=0;
while(cont<lados){
try{
line(X[cont]+width/2,Y[cont]+height/2,X[cont+1]+width/2,Y[cont+1]+height/2);
}catch(Exception e){
line(X[cont]+width/2,Y[cont]+height/2,X[0]+width/2,Y[0]+height/2);
}
cont++;
}
}
void criaPoligono2(float r, int lados, int centerX, int centerY){
int[] X = new int[lados];
int[] Y = new int[lados];
int angulo = 360 / lados;
int yopa = 0;
int cont = 0;
while(cont<lados){
x = r * cos(radians(yopa));
y = r * sin(radians(yopa));
X[cont] = int(x);
Y[cont] = int(y);
strokeWeight(2);
// line(width/2+int(x),height/2+int(y),int(x)+width/2,int(y)+height/2);
println("X = "+x+" Y = "+y);
cont++;
yopa+=angulo;
}
cont=0;
while(cont<lados){
try{
line(X[cont]+centerX,Y[cont]+centerY,X[cont+1]+centerX,Y[cont+1]+centerY);
}catch(Exception e){
line(X[cont]+centerX,Y[cont]+centerY,X[0]+centerX,Y[0]+centerY);
}
cont++;
}
}
A função criaPoligono recebe o raio e o numero de lados. baseado no numero de lados a função gera as coordenadas X e Y dos vértices do polígono, exemplo: 4 lados ele gera coordenadas de três pontos, sendo o ultimo também o primeiro, após gerar os valores ela os guarda em dois vetores X e Y criadas com o numero de índices sendo o numero de lados.
Após isso linhas são desenhadas com as coordenadas, tendo um pequeno tratamento de exceção para ArrayOutOfBounds, para se o próximo índice não existir, indicar para o primeiro índice.
A segunda função se difere apenas na opção de passar o centro do poligono.
Pretendo atualizar esse código usando o código da flor x para deixar os pontos em x invés de +.
Código-Fonte:
float x,y;
void setup() {
size(800, 600);
//criaPoligono(120,4);
criaPoligono2(120,4,width/2,height/2);
//linhas centrais que cruzam a tela
line(0,height/2,width,height/2);
line(width/2,0,width/2,height);
}
void draw() {
retornaLinha(2,60);
//println("X = "+x+" Y = "+y);
//line(width/2,height/2,int(x)*16,int(y)*16);
}
void retornaLinha(float r, float ang){
int[] numbers = new int[3];
x = r * cos(radians(ang));
y = r * sin(radians(ang));
//pontos[0] = int(x);
// pontos[1] = int(y);
}
void criaPoligono(float r, int lados){
int[] X = new int[lados];
int[] Y = new int[lados];
int angulo = 360 / lados;
int yopa = 0;
int cont = 0;
while(cont<lados){
x = r * cos(radians(yopa));
y = r * sin(radians(yopa));
X[cont] = int(x);
Y[cont] = int(y);
strokeWeight(2);
// line(width/2+int(x),height/2+int(y),int(x)+width/2,int(y)+height/2);
println("X = "+x+" Y = "+y);
cont++;
yopa+=angulo;
}
cont=0;
while(cont<lados){
try{
line(X[cont]+width/2,Y[cont]+height/2,X[cont+1]+width/2,Y[cont+1]+height/2);
}catch(Exception e){
line(X[cont]+width/2,Y[cont]+height/2,X[0]+width/2,Y[0]+height/2);
}
cont++;
}
}
void criaPoligono2(float r, int lados, int centerX, int centerY){
int[] X = new int[lados];
int[] Y = new int[lados];
int angulo = 360 / lados;
int yopa = 0;
int cont = 0;
while(cont<lados){
x = r * cos(radians(yopa));
y = r * sin(radians(yopa));
X[cont] = int(x);
Y[cont] = int(y);
strokeWeight(2);
// line(width/2+int(x),height/2+int(y),int(x)+width/2,int(y)+height/2);
println("X = "+x+" Y = "+y);
cont++;
yopa+=angulo;
}
cont=0;
while(cont<lados){
try{
line(X[cont]+centerX,Y[cont]+centerY,X[cont+1]+centerX,Y[cont+1]+centerY);
}catch(Exception e){
line(X[cont]+centerX,Y[cont]+centerY,X[0]+centerX,Y[0]+centerY);
}
cont++;
}
}
terça-feira, 14 de abril de 2015
Trabalho 1: Analise e Codificação da Logo da BMW
Logo BMW
Decidi reproduzir e analisar a logo da BMW por sua beleza e simplicidade.
A Logo da famosa de carros é formada por dois círculos:
Sendo o circulo do meio formado por quatro quartos de circulo, sendo dois brancos e dois azuis:
Somente com isso já é possível reconhecer a marca, fazendo uma analise dos raios dos círculos, considerando um modulo de 50px temos que o circulo interior teria 6 módulos de diâmetro, e o exterior teria 10 módulos, sabendo que o raio do circulo menor e 150px e o do maior é de 250px:
Para formar o circulo do meio usei a função arc(), tive que contornar alguns problemas dessa função, fazer um arco que comece em PI e termine em QUARTER_PI não funciona e o arco não aparece, mas colocando o equivalente em graus o arco aparece, mesmo problema quanto o arco começa em QUARTER_PI e termine em TWO_PI.
No mais foi bem rápida a reprodução da logo e estes foram os resultados:
Logo com a regra de criação final.
Logo com regra de criação Beta.
Logo seguindo o modelo de 1979.
int modulo=50;
void setup(){
size(400,400);
}
void draw(){
background(255);
if(mousePressed){
bmwLogo2(mouseX+45,mouseY+45,mouseX/16);
}
}
void bmwLogo(int X,int Y){
fill(0);
ellipse(X,Y,10*modulo,10*modulo);
stroke(255);
strokeWeight(4);
noFill();
ellipse(X,Y,6*modulo,6*modulo);
strokeWeight(1);
//stroke(0);
fill(77, 210, 255);
arc(X, Y, 6*modulo, 6*modulo, 0, HALF_PI, PIE);
arc(X, Y, 6*modulo, 6*modulo, PI, radians(270), PIE);
fill(255);
arc(X, Y, 6*modulo, 6*modulo, radians(270), TWO_PI,PIE);
arc(X, Y, 6*modulo, 6*modulo, HALF_PI, PI, PIE);
}
void bmwLogo2(int X,int Y, int modulo){
if(modulo>=1){
fill(0);
ellipse(X,Y,10*modulo,10*modulo);
stroke(255);
strokeWeight(4);
noFill();
ellipse(X,Y,6*modulo,6*modulo);
strokeWeight(2);
stroke(0);
fill(77, 210, 255);
arc(X, Y, 6*modulo, 6*modulo, 0, HALF_PI, PIE);
arc(X, Y, 6*modulo, 6*modulo, PI, radians(270), PIE);
fill(255);
arc(X, Y, 6*modulo, 6*modulo, radians(270), TWO_PI,PIE);
arc(X, Y, 6*modulo, 6*modulo, HALF_PI, PI, PIE);
}
}
segunda-feira, 13 de abril de 2015
Exercício 10: Brekout Simplificado
Reprodução simplificada do jogo breakout, nessa versão o objetivo é evitar que a bola caia pelo maior tempo possível, ao deixar cair a bola o jogo reinicia, se o tempo for maior que o ultimo recorde este é atualizado na tela.
Dependendo onde bata "bola" a direcção para onde ela vai é diferente, se bater a direita sempre ira para direita, e vice e versa; esse efeito é bem mais simples do que o do jogo real, mas já da um olhar mais fluido, a cada batida da bola, sua velocidade aumenta para aumentar a dificuldade do jogo.
Os códigos que foram reaproveitados de aulas anteriores foram:
Função ehbola: desloca a bola e quica onde for determinado(Aula 9).
Código para mover as barras: Dessa própria aula.
Código para limitar a movimentação das barras dentro da tela: Mesmo que faz quicar a bola modificado(Aula 9).
Código de contagem do tempo: tirado do código moveBolaMRU(Aula 5).
Código-fonte:
int xP=50;
int yP;
float d=40;
float v=10;
float t;
int bolaX = 100;
int bolaY = 100;
float dY=5;
float dX=5;
float recorde;
void setup()
{
size(1280,720);
yP=height-40;
}
void draw()
{
background(0);
t+=0.1666666666667;
text("Melhor pontuação: "+recorde,20,40);
text("Tempo: "+t,20,20);
ehbola();
rect(xP,yP,80,20);
if(keyPressed)
{
if(keyCode==RIGHT && xP<=width-80)
{
xP+=10;
}
if(keyCode==LEFT && xP>=0)
{
xP-=10;
}
}
}
void ehbola()
{
rect(bolaX,bolaY,10,10);
bolaY -= dY;
bolaX+=dX;
if(bolaY <=5){
if(dX==0){
dX=5;}
dX+=1;
dY=dY*-1;
}
if(bolaY>height)
{
recorde=t;
t=0;
dY=5;
dX=5;
bolaX=100;
bolaY=100;
}
if(bolaX>=width-5 || bolaX <= 5){
//bolaX = 10;
if(bolaX>0){
dX+=1;}else{
dX-=1;}
dX=dX*-1;
d=v*t; //calcula a distancia no tempo atual
}
if(bolaX>=xP && bolaX<=xP+80 && bolaY==yP-10)
{
// Batendo na esquerda
if(bolaX>=xP && bolaX<=xP+40 && dX>0){
dX*=-1;
dY*=-1;
}
if(bolaX>=xP && bolaX<=xP+40 && dX<0){
dY*=-1;
}
if(bolaX>=xP+40 && bolaX<=xP+80 && dX<0){
dX*=-1;
dY*=-1;
}
if(bolaX>=xP+40 && bolaX<=xP+80 && dX>0){
dY*=-1;
}
// dX*=-1;
// dY*=-1;
}
if(bolaX<=xP && bolaX<=xP-5 && bolaY>=yP+5 || bolaX==xP && bolaY==yP)
{
dX*=-1;
dY*=-1;
}
if(bolaX<=xP+80 && bolaX<=xP+85 && bolaY>=yP+5 || bolaX==xP+80 && bolaY==yP+80)
{
dX*=-1;
dY*=-1;
}
}
Dependendo onde bata "bola" a direcção para onde ela vai é diferente, se bater a direita sempre ira para direita, e vice e versa; esse efeito é bem mais simples do que o do jogo real, mas já da um olhar mais fluido, a cada batida da bola, sua velocidade aumenta para aumentar a dificuldade do jogo.
Os códigos que foram reaproveitados de aulas anteriores foram:
Função ehbola: desloca a bola e quica onde for determinado(Aula 9).
Código para mover as barras: Dessa própria aula.
Código para limitar a movimentação das barras dentro da tela: Mesmo que faz quicar a bola modificado(Aula 9).
Código de contagem do tempo: tirado do código moveBolaMRU(Aula 5).
Código-fonte:
int xP=50;
int yP;
float d=40;
float v=10;
float t;
int bolaX = 100;
int bolaY = 100;
float dY=5;
float dX=5;
float recorde;
void setup()
{
size(1280,720);
yP=height-40;
}
void draw()
{
background(0);
t+=0.1666666666667;
text("Melhor pontuação: "+recorde,20,40);
text("Tempo: "+t,20,20);
ehbola();
rect(xP,yP,80,20);
if(keyPressed)
{
if(keyCode==RIGHT && xP<=width-80)
{
xP+=10;
}
if(keyCode==LEFT && xP>=0)
{
xP-=10;
}
}
}
void ehbola()
{
rect(bolaX,bolaY,10,10);
bolaY -= dY;
bolaX+=dX;
if(bolaY <=5){
if(dX==0){
dX=5;}
dX+=1;
dY=dY*-1;
}
if(bolaY>height)
{
recorde=t;
t=0;
dY=5;
dX=5;
bolaX=100;
bolaY=100;
}
if(bolaX>=width-5 || bolaX <= 5){
//bolaX = 10;
if(bolaX>0){
dX+=1;}else{
dX-=1;}
dX=dX*-1;
d=v*t; //calcula a distancia no tempo atual
}
if(bolaX>=xP && bolaX<=xP+80 && bolaY==yP-10)
{
// Batendo na esquerda
if(bolaX>=xP && bolaX<=xP+40 && dX>0){
dX*=-1;
dY*=-1;
}
if(bolaX>=xP && bolaX<=xP+40 && dX<0){
dY*=-1;
}
if(bolaX>=xP+40 && bolaX<=xP+80 && dX<0){
dX*=-1;
dY*=-1;
}
if(bolaX>=xP+40 && bolaX<=xP+80 && dX>0){
dY*=-1;
}
// dX*=-1;
// dY*=-1;
}
if(bolaX<=xP && bolaX<=xP-5 && bolaY>=yP+5 || bolaX==xP && bolaY==yP)
{
dX*=-1;
dY*=-1;
}
if(bolaX<=xP+80 && bolaX<=xP+85 && bolaY>=yP+5 || bolaX==xP+80 && bolaY==yP+80)
{
dX*=-1;
dY*=-1;
}
}
domingo, 12 de abril de 2015
Exercício 9: Relação dos jogos Pong e Breakout com a fundação da Apple
Versão Arcade do Breakout.
Norland Bushnell propôs a criação de uma versão single-player do pong, onde o jogador deveria evitar que a bola saísse da tela, e fazendo com que essa quebrasse tijolos na parte de cima da tela. Bushnell colocou Alcorn como diretor do projeto que colocou um de seus funcionários para fazer a prototipagem do jogo, esse era Steve Jobs.
Steve Jobs receberia 750 dólares mais bonificações pelas otimizações referente ao numero de chips, Alcorn propôs isso, pois os jogos da Atari estavam na tendencia de terem mais de 150 chips. Jobs ganharia uma bonificação para cada chip a menos que 50, ele falou que viria com o protótipo em quatro dias.
Jobs sabia que seu amigo e futuro sócio, Steve Wozniak que trabalhava pra HP, tinha feito uma versão do Pong com algo em torno de 30 chips. Jobs o chamou para desenhar o esquema do jogo, enquanto ele faria o protótipo, prometendo dividir os lucros.
Wozniak desenho o esquema com 42 chips, que acabou sendo 44 no desenho final. Jobs ganhou uma bonificação de cerca de 5000 dólares, mas pagou apenas 350 para seu amigo. Esses 5000 dólares mais tarde seriam investidos na empresa que os dois fundaram, a Apple Inc.
O esquema apresentado não pode ser usado na fabricação em massa, Wozniak afirma que isso se deve ao fato dos engenheiros da a tari quererem modificar o esquema, o esquema usado para fabricação das maquinas tinha cerca de 100 chips, Wozniak jogou e não encontrou nenhuma diferença na jogabilidade.
Uma curiosidade sobre o jogo é que sua tela era preta-e-branca com plasticos celofane coloridos por cima para dar cor aos tijolos.
Versão do jogo para Atari 2600.
Muitas das funções do Apple II, foram adicionadas por Wozniak por sua experiencia no design de Breakout, como o suporte a gamepads e som, e comandos graficos em BASIC, tudo isso fora adicionado pois Wozniak teve a experiencia de desenvolver o jogo em hardware e queria faze-lo em software, e o fez, dando o nome de Little Brick Out, escrito em BASIC, ele afirmava que poder escrever jogos com BASIC mudaria o mundo, certamente o desenvolvimento de jogos foi facilitado com o uso das linguagens de programação.
O jogo também teve ports para outras plataformas como o Atari 2600 e versões aprimoradas do mesmo.
Exercício 8: Criação do Pong
Tela Do Pong.
Após a fundação da Atari, Norland Bushnell chamou um ex colega de trabalho, Allan Alcorn, para trabalhar com ele, e lhe deu um projeto que dizia ser grande, na verdade era um teste, ele teria que criar um jogo com duas barras um ponto representando a bola e números representando o placar.
Alcorn tentou usar como base o jogo Computer Space de Bushnell, mas considerou o esquema ilegível e projetou o seu próprio. No esquema decidiu que dependendo do ponto onde a "bola" encostasse nas barras, o angulo de retorno da bola seria diferente, no meio seria de 90° em relação a barra se fosse a acima seria menor, dando assim mais dinamismo ao jogo, senão seria muito previsível; além disso, cada vez que a bola atingia uma paleta a velocidade desta era aumentada, e era reiniciada a cada ponto marcado, isso foi adicionado para limitar o tempo de jogo, e para também deixar o jogo dinâmico; outra característica mantida por Alcorn, foi que as paletas não chegavam até o topo da tela, isso era causado por um defeito em um dos chips usados, ao invés de tentar soluciona-lo ele o manteve, pois acreditava que isso adicionava dificuldade e limitava o tempo de jogo, senão jogadores habilidosos poderiam jogar "pra sempre".
Depois do jogo pronto, Bushnell propôs que o jogo tivesse sons, quando a bola atingisse as paletas e as bordas da tela, e ao marcar um ponto uma "plateia" iria vaiar ou comemorar, Alcorn só precisou de meio chip para faze-lo, e apresentou um protótipo.
Ao contrario, do que estamos acostumados, o Pong não foi programado com uma linguagem de programação, ele o fez usando transistores basicamente, que se comunicavam entre si, foram mais de 100 chips.
O jogo deixou um legado e até hoje lembrado, por sua simples funcionalidade
domingo, 5 de abril de 2015
Exercício 7: Yin-Yang
Seguindo a regra de criação citada nos slides das aulas, este código cria símbolos yin-yang.
A Regra de Criação é a seguinte:
As duas metades de circulo grandes tem 5 módulos de raio.
Os dois círculos que formam as curvas tem 2.5 módulos de raio, e e posicionada no centro X e Y mais (ou menos) 2.5 módulos.
Os pequenos círculos ficam no meio dos dois círculos anteriores e possuem raio de 1 módulo.
A primeira função cria um simbolo na posição passada(no caso X e Y no Mouse) com módulo fixo de 40; a segunda função faz o mesmo mas recebe um modulo dinâmico(no caso posição X do mouse dividido por 16); A terceira função faz o mesmo da segunda, com a diferença que ele gera três números randômicos de 0 até 255 e guarda em três posições de um vetor chamado cores1, e faz o mesmo para um vetor chamado cores2, e os números desse vetor são usados para dar cores diferentes ao simbolo, mas que ele continue fazendo sentido.
Os dois círculos que formam as curvas tem 2.5 módulos de raio, e e posicionada no centro X e Y mais (ou menos) 2.5 módulos.
Os pequenos círculos ficam no meio dos dois círculos anteriores e possuem raio de 1 módulo.
A primeira função cria um simbolo na posição passada(no caso X e Y no Mouse) com módulo fixo de 40; a segunda função faz o mesmo mas recebe um modulo dinâmico(no caso posição X do mouse dividido por 16); A terceira função faz o mesmo da segunda, com a diferença que ele gera três números randômicos de 0 até 255 e guarda em três posições de um vetor chamado cores1, e faz o mesmo para um vetor chamado cores2, e os números desse vetor são usados para dar cores diferentes ao simbolo, mas que ele continue fazendo sentido.
Output da Ultima Função(yinYang3):
Código-fonte:
int modulo = 40;
void setup() {
size(400,400);
}
void draw(){
//background(205);
//yinYang(mouseX,mouseY);
yinYang2(mouseX,mouseY,mouseX/16);
//yinYang3(mouseX,mouseY,mouseX/16);
}
void yinYang(int X,int Y){
noStroke();
//Circulo Maior
fill(255);
arc(X, Y, 2*5*modulo, 2*5*modulo, PI,TWO_PI, OPEN);
fill(0);
arc(X, Y, 2*5*modulo, 2*5*modulo, 0, PI, OPEN);
//Circulos que formam as curvas
fill(255);
ellipse(int(X-2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
fill(0);
ellipse(int(X+2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
//Circulos Pequenos
fill(0);
ellipse(int(X-2.5*modulo),Y,2*modulo,2*modulo);
fill(255);
ellipse(int(X+2.5*modulo),Y,2*modulo,2*modulo);
}
void yinYang2(int X,int Y,int modulo){
noStroke();
//Circulo Maior
fill(255);
arc(X, Y, 2*5*modulo, 2*5*modulo, PI,TWO_PI, OPEN);
fill(0);
arc(X, Y, 2*5*modulo, 2*5*modulo, 0, PI, OPEN);
//Circulos que formam as curvas
fill(255);
ellipse(int(X-2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
fill(0);
ellipse(int(X+2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
//Circulos Pequenos
fill(0);
ellipse(int(X-2.5*modulo),Y,2*modulo,2*modulo);
fill(255);
ellipse(int(X+2.5*modulo),Y,2*modulo,2*modulo);
}
void yinYang3(int X,int Y,int modulo){
noStroke();
int[] cores1 = new int[3];
int[] cores2 = new int[3];
for(int cont=0;cont<3;cont++){
cores1[cont] = int(random(255));
cores2[cont] = int(random(255));
}
//Circulo Maior
fill(cores1[0],cores1[1],cores1[2]);
arc(X, Y, 2*5*modulo, 2*5*modulo, PI,TWO_PI, OPEN);
fill(cores2[0],cores2[1],cores2[2]);
arc(X, Y, 2*5*modulo, 2*5*modulo, 0, PI, OPEN);
//Circulos que formam as curvas
fill(cores1[0],cores1[1],cores1[2]);
ellipse(int(X-2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
fill(cores2[0],cores2[1],cores2[2]);
ellipse(int(X+2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
//Circulos Pequenos
fill(cores2[0],cores2[1],cores2[2]);
ellipse(int(X-2.5*modulo),Y,2*modulo,2*modulo);
fill(cores1[0],cores1[1],cores1[2]);
ellipse(int(X+2.5*modulo),Y,2*modulo,2*modulo);
}
Exercício 6: Botão
No seguinte código do Processing, é simulado um botão, como no Flash ou em outros ambientes que usam botões para interação.
Geralmente botões possuem três estados:
Não Apertado, Pra Cima(Up).
Não Apertado e Com Mouse Em Cima(Hover).
Apertado, Clicado(Click).
Nesse exemplo, um circulo representa o botão. Sua cor quando não esta pressionado e o mouse não está em cima, é branca. Quando não esta pressionado e o mouse esta sobre ele, sua cor é cinza. E quando pressionado o circulo muda pra preto.
Para saber se o mouse esta na área do circulo, é usada a função distancia2D, que retorna um valor inteiro, é passado a posição X e Y do Mouse e o Centrro X e Y do circulo, se o valor retornado for menor que o raio do circulo, o mouse esta dentro do circulo e sua cor é mudada pra cinza, e se o mouse for pressionado quando o cursor estiver dentro do circulo este fica preto, simulando assim os três estados básicos de um botão.
Código-fonte:
int r=50;
void setup()
{
size(800,800);
}
int distancia2D(int X1, int Y1, int X2, int Y2)
{
int resposta;
resposta=(int)sqrt(pow(X2-X1,2)+pow(Y2-Y1,2));
return resposta;
}
void draw()
{
ellipse(width/2,height/2,2*r,2*r);
if(distancia2D(mouseX,mouseY,width/2,height/2)<r)
{
fill(125);
if(mousePressed){
fill(0);
}
}
else
fill(255);
}
Geralmente botões possuem três estados:
Não Apertado, Pra Cima(Up).
Não Apertado e Com Mouse Em Cima(Hover).
Apertado, Clicado(Click).
Nesse exemplo, um circulo representa o botão. Sua cor quando não esta pressionado e o mouse não está em cima, é branca. Quando não esta pressionado e o mouse esta sobre ele, sua cor é cinza. E quando pressionado o circulo muda pra preto.
Para saber se o mouse esta na área do circulo, é usada a função distancia2D, que retorna um valor inteiro, é passado a posição X e Y do Mouse e o Centrro X e Y do circulo, se o valor retornado for menor que o raio do circulo, o mouse esta dentro do circulo e sua cor é mudada pra cinza, e se o mouse for pressionado quando o cursor estiver dentro do circulo este fica preto, simulando assim os três estados básicos de um botão.
Código-fonte:
int r=50;
void setup()
{
size(800,800);
}
int distancia2D(int X1, int Y1, int X2, int Y2)
{
int resposta;
resposta=(int)sqrt(pow(X2-X1,2)+pow(Y2-Y1,2));
return resposta;
}
void draw()
{
ellipse(width/2,height/2,2*r,2*r);
if(distancia2D(mouseX,mouseY,width/2,height/2)<r)
{
fill(125);
if(mousePressed){
fill(0);
}
}
else
fill(255);
}
domingo, 29 de março de 2015
Exercício 5: Bandeira do Brasil
Seguindo a Lei Federal N°5700/71 para reprodução da bandeira brasileira, foi desenvolvido esse código no processing, que cria a bandeira com seus elementos básicos (Retângulo, Losango e circulo) e seguindo sua regra de criação que é:
Retângulo: 20 módulos de comprimento por 14 de largura.
Losango: Distancia de 1.7 módulo das extremidades do retângulo.
Circulo: Raio de 3.5 módulo, posicionado no centro horizontal e vertical do retângulo (20*modulo/2, 14*modulo/2).
No código foi colocado inicialmente um valor fixo para o modulo, de 10.
A função bandeiraBrasil cria a bandeira seguindo sua lei de criação com o centro nas variáveis X e Y passadas para a função, no caso X e Y do mouse.
Na função bandeiraBrasil2 a unica diferença é que é passado um modulo mutável, que é a posição X do mouse dividida por 16.
Código-Fonte:
int modulo = 10;
void setup(){
size(600,600);
background(255);
}
void draw(){
background(255);
if(mousePressed){
bandeiraBrasil2(mouseX,mouseY, mouseX/16);
}
}
void bandeiraBrasil(int X, int Y){
//Retangulo: cor verde, 20 modulos de comprimento por 14 modulos de largura
fill(0,200,0);
rect(X-20*modulo/2,Y-14*modulo/2,20*modulo,14*modulo);
//Losango: cor amarela
fill(250,250,0);
quad(X-20*modulo/2+1.7*modulo, Y, X, Y-14*modulo/2+1.7*modulo, X+20*modulo/2-1.7*modulo, Y, X, Y+14*modulo/2-1.7*modulo);
fill(0,0,200);
ellipse(X,Y,7*modulo,7*modulo);
}
void bandeiraBrasil2(int X, int Y,int modulo){
//Retangulo: cor verde, 20 modulos de comprimento por 14 modulos de largura
fill(0,200,0);
rect(X-20*modulo/2,Y-14*modulo/2,20*modulo,14*modulo);
//Losango: cor amarela
fill(250,250,0);
quad(X-20*modulo/2+1.7*modulo, Y, X, Y-14*modulo/2+1.7*modulo, X+20*modulo/2-1.7*modulo, Y, X, Y+14*modulo/2-1.7*modulo);
fill(0,0,200);
ellipse(X,Y,7*modulo,7*modulo);
}
Retângulo: 20 módulos de comprimento por 14 de largura.
Losango: Distancia de 1.7 módulo das extremidades do retângulo.
Circulo: Raio de 3.5 módulo, posicionado no centro horizontal e vertical do retângulo (20*modulo/2, 14*modulo/2).
No código foi colocado inicialmente um valor fixo para o modulo, de 10.
A função bandeiraBrasil cria a bandeira seguindo sua lei de criação com o centro nas variáveis X e Y passadas para a função, no caso X e Y do mouse.
Na função bandeiraBrasil2 a unica diferença é que é passado um modulo mutável, que é a posição X do mouse dividida por 16.
Código-Fonte:
int modulo = 10;
void setup(){
size(600,600);
background(255);
}
void draw(){
background(255);
if(mousePressed){
bandeiraBrasil2(mouseX,mouseY, mouseX/16);
}
}
void bandeiraBrasil(int X, int Y){
//Retangulo: cor verde, 20 modulos de comprimento por 14 modulos de largura
fill(0,200,0);
rect(X-20*modulo/2,Y-14*modulo/2,20*modulo,14*modulo);
//Losango: cor amarela
fill(250,250,0);
quad(X-20*modulo/2+1.7*modulo, Y, X, Y-14*modulo/2+1.7*modulo, X+20*modulo/2-1.7*modulo, Y, X, Y+14*modulo/2-1.7*modulo);
fill(0,0,200);
ellipse(X,Y,7*modulo,7*modulo);
}
void bandeiraBrasil2(int X, int Y,int modulo){
//Retangulo: cor verde, 20 modulos de comprimento por 14 modulos de largura
fill(0,200,0);
rect(X-20*modulo/2,Y-14*modulo/2,20*modulo,14*modulo);
//Losango: cor amarela
fill(250,250,0);
quad(X-20*modulo/2+1.7*modulo, Y, X, Y-14*modulo/2+1.7*modulo, X+20*modulo/2-1.7*modulo, Y, X, Y+14*modulo/2-1.7*modulo);
fill(0,0,200);
ellipse(X,Y,7*modulo,7*modulo);
}
quarta-feira, 18 de março de 2015
Exercicio 4: Flor Processing
Esse código possui três funções para criar uma "flor" com círculos; a primeira cria um flor em forma de cruz na posição X e Y passadas, no caso X e Y do mouse, no entanto o tamanho dos círculos não varia.
Na função flor2, é criada uma flor em forma de cruz, na posição passada, e o tamanho dos círculos variam de acordo com o valor passado para a função, no caso a posição x do mouse dividido por 8.
Na função flor3, é criada uma flor em formato de X na posição passado, sendo essa a unica diferença entre esta e a função flor 2.
O circulo central da flor, tem seu centro (nesse exemplo) na posição X e Y do mouse, e as outras são feitas em relação a ela, na primeira função como o raio é 20, a posição x do circulo esquerdo é o x do circulo central menos o raio da bola central e o raio do circulo esquerdo, tendo assim seu centro, essa lógica é alterada e assim é feito os outros três círculos, e como os quatro círculos são feitos em relação ao raio e posição do raio central, é possível mudar posição e raio do circulo central sem "quebrar" a figura, por isso a modificação para a função flor2 é bem rapida
Código:
int x;
void setup(){
size(1080,986);
}
void draw(){
if(mousePressed){
flor3(mouseX,mouseY,mouseX/8);
}
}
void circulo(float xc,float yc,float r){
ellipse(xc,yc,2*r,2*r);
}
void flor(float xf, float yf){
circulo(xf,yf,20);
circulo(xf,yf-40,20);
circulo(xf,yf+40,20);
circulo(xf-40,yf,20);
circulo(xf+40,yf,20);
}
void flor2(float xf, float yf,float r){
circulo(xf,yf,r);
circulo(xf,yf-r*2,r);
circulo(xf,yf+r*2,r);
circulo(xf-r*2,yf,r);
circulo(xf+r*2,yf,r);
}
void flor3(float xf, float yf,float r){
circulo(xf,yf,r);
circulo(xf-r*sqrt(2),yf-r*sqrt(2),r);
circulo(xf+r*sqrt(2),yf+r*sqrt(2),r);
circulo(xf+r*sqrt(2),yf-r*sqrt(2),r);
circulo(xf-r*sqrt(2),yf+r*sqrt(2),r);
}
Na função flor2, é criada uma flor em forma de cruz, na posição passada, e o tamanho dos círculos variam de acordo com o valor passado para a função, no caso a posição x do mouse dividido por 8.
Na função flor3, é criada uma flor em formato de X na posição passado, sendo essa a unica diferença entre esta e a função flor 2.
O circulo central da flor, tem seu centro (nesse exemplo) na posição X e Y do mouse, e as outras são feitas em relação a ela, na primeira função como o raio é 20, a posição x do circulo esquerdo é o x do circulo central menos o raio da bola central e o raio do circulo esquerdo, tendo assim seu centro, essa lógica é alterada e assim é feito os outros três círculos, e como os quatro círculos são feitos em relação ao raio e posição do raio central, é possível mudar posição e raio do circulo central sem "quebrar" a figura, por isso a modificação para a função flor2 é bem rapida
Código:
int x;
void setup(){
size(1080,986);
}
void draw(){
if(mousePressed){
flor3(mouseX,mouseY,mouseX/8);
}
}
void circulo(float xc,float yc,float r){
ellipse(xc,yc,2*r,2*r);
}
void flor(float xf, float yf){
circulo(xf,yf,20);
circulo(xf,yf-40,20);
circulo(xf,yf+40,20);
circulo(xf-40,yf,20);
circulo(xf+40,yf,20);
}
void flor2(float xf, float yf,float r){
circulo(xf,yf,r);
circulo(xf,yf-r*2,r);
circulo(xf,yf+r*2,r);
circulo(xf-r*2,yf,r);
circulo(xf+r*2,yf,r);
}
void flor3(float xf, float yf,float r){
circulo(xf,yf,r);
circulo(xf-r*sqrt(2),yf-r*sqrt(2),r);
circulo(xf+r*sqrt(2),yf+r*sqrt(2),r);
circulo(xf+r*sqrt(2),yf-r*sqrt(2),r);
circulo(xf-r*sqrt(2),yf+r*sqrt(2),r);
}
domingo, 8 de março de 2015
Exercício 3: Jogo Estilo Angry Birds - BÔNUS Código de Simulação de MRU e MRUV (ATUALIZADO)
Preview do "Jogo":
ATUALIZAÇÃO: Com o comando background comentado na função draw, agora a bola tem um rastro, como foi pedido.
Explicação do código
É criada a janela com 600x600 px, a função grid é usada para criar um grid na tela, a função lanBalistico é responsável por receber os dois valores de velocidade fornecidos(x,y), e calcular o deslocamento no eixo x e y, e move a bola aos pontos correspondentes e mostra na tela a frase "Acertou!!!" caso o circulo atinja o alvo.
Para brincar um pouco com esse "Jogo" basta e mudando os números passados na função lanBalistico
Código Fonte do Jogo:
float t = 0;
float d;
float v;
float v0 = 105;
float vx = 160;
float vy = 40;
float a = -20;
float dx;
float dy;
void setup(){
frameRate(60);
size(600,600);
background(185);
}
void draw(){
v = v0+a*t;
// background(185);
grid();
text("Tempo: "+t,20,20);
text("Velocidade Inicial: "+v0,20,40);
text("Velocidade Atual: "+v,20,60);
text("Distancia Percorrida: "+d,20,80);
//Chamando funçao do lançamento balistico
lanBalistico(140,200);
//Alvo
rect(440, 20, 120, 55);
//Plataforma
rect(420, 75, 180, 20);
//Suporte da Plataforma
rect(490, 95, 40, width-95);
t=t+0.01666666666666666;
}
void grid(){
int intervalo=50;
int lines = width/intervalo;
for(int i=0; i<lines; i++){
line(i*intervalo,0,i*intervalo,width);
line(0,i*intervalo,height,i*intervalo);
}
}
void lanBalistico(float x, float y){
dx = x*t;
dy = y*t+a*t*t/2;
ellipse(dx,width-dy,20,20);
println("("+dx+" , "+(width-dy)+")");
if(dx>=440 && width-dy==20 || dx>=440 && width-dy==75 || dx>=440 && width-dy<75 && width-dy>20){
text("Acertou!!!!!", 20,100);
}
}
BÔNUS MRU:
Essa função pode ser adicionada ao código anterior, ela calcula o deslocamento seguindo o Movimento Retilíneo Uniforme, e move uma bola segundo esse deslocamento
void moveBolaMRU(){
d=v*t;
ellipse(d,300,20,20);
}
BÔNUS MRUV:
Mesmo caso da função anterior, só que nesse caso é com o Movimento Retilíneo Uniformemente Variado.
void moveBolaMRUV(){
d=v0*t +a*t*t/2;
ellipse(width/2,height-d,20,20);
}
domingo, 1 de março de 2015
Exercicio 2: Explicar Exemplo e Modifica-lo
Mostrar Exemplo do https://processing.org/examples/, dizer o que faz e modifica-lo.
Exemplo: MousePress, link: https://processing.org/examples/mousepress.html
Código Original:
Exemplo: MousePress, link: https://processing.org/examples/mousepress.html
Código Original:
//funcao onde é definido atributos estáticos da janela, como tamanho, cor de fundo, etc.
void setup() {
size(640, 360);
noSmooth();
fill(126);
background(102);
}
//funcao que executa dinamicamente onde duas linhas perpendiculares, onde o centro são
//as coordenadas X,Y do mouse
void draw() {
//Quando ocorre o click do mouse a cor das linhas são mudadas para branco
if (mousePressed) {
stroke(255);
} else {
stroke(0);
}
line(mouseX-66, mouseY, mouseX+66, mouseY);
line(mouseX, mouseY-66, mouseX, mouseY+66);
}
Código Modificado:
void setup() {
size(640, 360);
noSmooth();
fill(126);
}
//mudei o comando background da função setup para draw, para que não fossem desenhadas
//varias linhas, a cor de fundo também foi mudada para vermelho escuro
void draw() {
background(102,10,40);
//Quando o mouse é pressionado as linhas mudam pra verde.
if (mousePressed) {
stroke(10,120,40);
} else {
stroke(0);
}
line(mouseX-66, mouseY, mouseX+66, mouseY);
line(mouseX, mouseY-66, mouseX, mouseY+66);
}
Outra modificação:
void setup() {
size(640, 360);
noSmooth();
fill(126);
}
//invés de duas linhas, é desenhado um cirulo preto, que fica verde com o clique do mouse.
void draw() {
background(102,10,40);
if (mousePressed) {
stroke(10,120,40);
fill(10,120,40);
} else {
stroke(0);
fill(0);
}
ellipse(mouseX, mouseY, 55, 55);
}
Exercício 1: Hello World! Processing
Documentário: Hello World! Processing
Duração: 41 Minutos
Idioma: Inglês e Português
O documentário da um "overview" no Processing, enquanto mostra brevemente a história do computador. É mostrado que o Processing é uma ferramenta amigável a não programadores, usada até por pessoas com pouca experiência em design. É citado um exemplo, de um homem que editava um livreto sobre sua vida e usou o Processing para criar o design da capa.
Também e abordado no filme a importância de tratar dados, e como eles podem ser muito mais compreensíveis quando representados graficamente.
Enquanto o filme introduz o Processing, ele mostra também pequenos trechos de filmes antigos sobre computadores, que tentavam prever como seria a interação humano-computador no futuro, uma me chamou atenção, a de que muitas pessoas saberiam programar, apesar de o computador ser muito popular, e muitas pessoas saberem, mesmo que basicamente, opera-los; não é a maioria dos usuários que sabe ou mesmo se interessa em programar.
O filme também mostra lindos exemplos com o Processing, como o design de uma luminaria, que se propagava como veias, e um exemplo onde linhas eram criadas e paravam de crescer quando tocavam outras, o que gerava uma imagem muito bonita.
Também é abordado a comunidade usuária do Processing, que é bem ativa e compartilha exemplos na internet; outro ponto a ressaltar é o fato do Processing ser aberto a modificações, os usuários podem desenvolver suas próprias bibliotecas e compartilha-las na internet.
Assinar:
Postagens (Atom)