domingo, 25 de março de 2018

Aula 4 - Função bloco utilizando "sliders"

Olá! Essa terceira atividade tem como base a apresentação de uma aplicação que gere quadros com a função bloco utilizando duas sliders , em qualquer posição na tela, e que através desses sliders seja possível definir a quantidade de blocos tanto na horizontal quanto na vertical. 

A atividade foi baseada em uma obra de arte abstracionista de Kandinsky, datada de 1913, conforme figura abaixo:

Ao final, a imagem a ser gerada deve ficar parecida com esta aqui. Dependo do tamanho da tela o número de colunas e linhas poderá ser expandido.


Então sem mais demoras, vamos ao código:

import controlP5.*;//para importar a biblioteca do P5.

ControlP5 cp5;

int linha=3;
int coluna=3;
boolean desenha=true;

void setup() {
    size(600,650);//tamanho geral da tela. 
 
     cp5 = new ControlP5(this); //dentro do setup chamou-se uma função 
                                 //da biblioteca do P5.
    
      cp5.addSlider("coluna")
     .setPosition(100,620) //slider que movimenta a linha.
     .setRange(1,6) //vai de 1 ate 6 colunas;
     .setNumberOfTickMarks(5)
     .setValue(1)//começa com 1 coluna, valor do default.
     ;
    cp5.addSlider("linha") // slider que movimenta a coluna.
     .setPosition(400,620)
     .setRange(1,6) //vai de 1 até 6 linhas;
     .setNumberOfTickMarks(5)
     .setValue(1)//começa com uma linha, valor do default.
     ;
} 
 
 void draw(){
  if(desenha == true){
     background(0);//cor geral do fundo da aplicação. Matriz
     for(int i=0;i<coluna;i++){
       for(int j=0;j<linha;j++){
          bloco(i*100,j*100,100);
        }
     }
 }
  desenha = false;
}

void bloco(int x,int y,int t){
    fill(random(255),random(255),random(255));
    rect(x,y,t,t);
    circulo(x,y,t); //dentro da função bloco ele chamou a funçao circulo.
}

void circulo(int x,int y, int t){ //função está sendo chamada dentro da função bloco.
    int r = int(random(4,8)); //Variando o tamanho dos círculos de raio 4 até 8.
    r*=5; // r=r*5;
    for(int i=0;i<6;i++){ //quantidade de círculos dentro dos blocos
        fill(random(255),random(255),random(255)); //preenchimento aleatório de cores
        ellipse(x+t/2,y+t/2,t-r*i,t-r*i);
    }
}


void mousePressed(){ //mouse solto
   desenha = true;
}

 Bom, galera! Como o código é um pouco extenso , resolvi comentá-lo dentro das próprias linhas, ou pelo menos as mais importantes para a compreensão de todos.

O bloco de código pintado de amarelo foi fornecido para que a biblioteca do P5 fosse acionada para dentro da aplicação. 

No mais é isso!!!!



Nenhum comentário:

Postar um comentário

Deixe aqui seu comentário