Trabalho 2 - Espirógrafo Átomo

Parte 1 - O que é um Espirógrafo

Para iniciar o trabalho, primeiro tive que entender o que era um espirógrafo, eu já tive uma dessas ferramentas quando era criança, mas não fazia ideia do seu nome.

O espirógrafo é uma ferramenta de desenho que produz curvas matemáticas conhecidas como hipotroclóides e epitroclóides.

Como funciona um Espirógrafo

Um espirógrafo consiste em um conjunto de engrenagens de plástico e outras formas como anéis, triângulos, ou barras retas. Existem vários tamanhos e formas de engrenagens, e todas as extremidades possuem dentes para se encaixar em outras peças. Uma caneta é usada tanto para desenhar quanto para promover a força locomotiva; é requerida alguma prática sobre Espirógrafo para poder operá-lo através das peças fixas e móveis.

Espirógrafo

Exemplos de Desenhos feitos com Espirógrafos

Parte 2 - Inspiração

Para realizar meu próprio espirógrafo, busquei inspiração em alguma forma, para fazer algo que não fosse somente um desenho aleatório, decidi então que faria um espirógrafo que se inspirasse, pelo menos no início, no formato de um átomo.

O Átomo é uma unidade básica de matéria que consiste num núcleo central de carga elétrica positiva envolto por uma nuvem de eletrões de carga negativa. Ele é representado geralmente por esse símbolo:

Parte 3 - O Código

Para realizar os desenhos do espirógrafo, utilizei obviamente dos calculos de seno e coseno de variáveis de raio já informadas previamente. Usando o comando BeginShape, o código utiliza de um for que vai se incrementando patra desenhar a forma baseada nos calculos trigonometricos. O comando vertex então desenha as formas conectando uma série de vértices recebendo os valores do raio.

Para interação, adicionei comandos para os três botões do mouse, o esquerdo incrementa com um valor aleatório o valor do raio inicial, o esquerdo diminui e o do meio muda a cor do desenho. Interessante notar que, mesmo com valores alatórios, o código ainda consegue formar imagens interessantes e bonitas de certa forma, pois esses valores aleatórios passam por um calculo trigonométrico e já terminam em um certo padrão matemático.

Para deixar o código mais interessante e que não ficasse tão estático, adicionei também um movimento ao desenho formado.

Código:

int x = 0;

float raio1 = 7;

float raio2 = 4;

float raio = raio1/raio2;

float R = 450;

float r = R/raio;

float angulo = 0;

float inc = PI/60;

color espi = color(random(10, 245), random(10, 245), random(10, 245));

void setup() {

  size(800, 500);

  smooth();

  noFill();

  strokeWeight(2);

  frameRate(60);

  if (raio < 1) { 

    R = 225*raio/(1-raio/2); 

    r = R/raio;

  }

}

void draw() {

  background(0);

  fill(255);

  text ("Use o Mouse", 10, 140);

  text ("Esquerdo - Modifica o Desenho(aumenta o raio)", 10, 160);

  text ("Direito - Modifica o Desenho(diminui o raio)", 10, 170);

  text ("Meio - muda a cor", 10, 180);

  noFill();

  ellipse (50, 80, 50, 80);

  ellipse (50, 60, 5, 10);

  line (30, 60, 70, 60);

  line (50, 60, 50, 40);

  translate(width/2, height/2);

  translate(abs(R-r)/2*cos(angulo), abs(R-r)/2*sin(angulo));

  stroke(espi);

  strokeWeight(3);

  espi();

  angulo += inc;

}

void espi() {

  beginShape();

  for (float i=0; i<angulo; i+= PI/100) {

    vertex(abs(R-r)/2*cos(i) + r/2*cos(-i*raio), abs(R-r)/2*sin(i) + r/2*sin(-i*raio));

  }

  endShape();

}

void mousePressed() {

  if (mouseButton == LEFT) {

    raio=-random(1, 10);

  } else if (mouseButton == RIGHT) {

    raio=+random(1, 10);

  } else { 

    espi = color(random(10, 245), random(10, 245), random(10, 245));

  }

}

Screenshot: