Desenhando um Círculo com Raio Variável

Um dos exercícios mais usados para aprender lógica de programação é a criação de desenhos como quadrados, triângulos etc. Usamos isso para treinar loops dentro de loops.

Por exemplo, se quisermos criar um quadrado com cinco estrelas de largura e altura, um laço será o responsável por criar uma linha e o outro por repetir cinco vezes o primeiro. Veja:

Na linha 4, criamos o laço com o código que escreve uma estrela. Como esse laço vai de 0 até 4, escrevemos 5 estrelas. O laço da linha 3 executa o laço interno cinco vezes e, logo após cada execução, ele escreve uma quebra de linha. Isso faz com que cinco linhas de cinco estrelas sejam desenhadas.

Perfeito! Mas e se quisermos escrever um círculo com o raio de tamanho 10? Como implementar esse algorítmo? Veja a figura abaixo:

Não é um círculo perfeito, mas não deixa de ser um bom desafio. Bom, a ideia aqui é a seguinte: se o círculo tem raio 10, então, a partir do centro, o círulo tem dez tracinhos para um lado e dez para o outro, assim como dez linhas para cima e outras dez para baixo. Para facilitar a percepção disso, criei um pequeno círculo bem no centro.

Vamos começar criando um algorítmo que, dado um raio, escreveremos todos os tracinhos dentro do qual o círculo será desenhado. Veja:

O resultado desse algorítmo é o seguinte:

Na linha 3, criamos uma variável que guarda o valor do raio do nosso círculo.

Na linha 5, criamos o primeiro for que repetirá o for interno, para esse caso, 21 vezes. Como o raio é 10, precisamos criar 10 linhas acima e outras 10 abaixo da linha central do círculo, por isso multiplicamos o raio por 2 e somamos 1.

Na linha 7, criamos o laço que gera os traços na horizontal. Também são 21 traços para esse caso.

Sabemos que nas primeira e última linhas, temos uma estrela bem no centro e, na linha 11, temos duas estrelas nas pontas. Podemos até mesmo colocar alguns if's dentro do segundo for para criar esssas estrelas, pois a lógica é bem simples. Veja:

Veja como ficou o resultado:

Bom, já é um começo, mas adianto que essa lógica não tem como evoluir. Vamos lá! Na linha 9, estamos verificando se a linha atual é a primeira ou a última e o número da coluna é igual ao raio. O objetivo aqui é escrever as estrelas no topo e em baixo. O segundo if tem como objetivo escrever as estrelas das laterais esquerda e direita.

O problema vem quando levantamos a seguinte questão: e nas outras linhas, em quais colunas devemos escrever as estrelas? Por exemplo, na linha 4, onde exatamente deveremos colocar a estrela? Veja:

Sabemos que temos que colocar, em cada linha, estrelas nos dois lados a partir do centro do círculo, mas não sabemos exatamente onde. Todavia, temos algumas outras informações que podem nos ajudar a encontrar o que precisamos. Veja que a distância do centro do círculo para a quarta linha é de 7 linhas e sabemos que o valor do raio é 10. Veja:

Portanto, temos a hipotenusa (10), que é o raio, e o valor de um cateto (7), que e a ditância da linha para o centro do círculo. Agora, precisaremos encontrar o valor do outro cateto e resolveremos a questão. Ora, claramente temos um triângulo e sabemos que a relação do triângulo é: c² + b² = a². Isso nada mais é do que o famoso Teorema de Pitágoras, portanto, para achar o valor da distância do centro do círculo para a posição que deve ficar a estrela, usamos a fórmula: c = raiz(b² - a²). Ou: distânciaX = raiz(raio²-distânciaY²). Ou, no caso da quarta linha: ? = raiz(10²-7²). Veja como fica o código:

Na linha 4, criamos a variável que guarda o valor do quadrado do raio.

Na linha 8, pegamos o valor da distância entre o centro do círulo e a linha atual. A função Math.abs serve para remover o sinal, portanto o resultado dessa subração será  sempre um valor positivo.

Na linha 11, usamos a função Math.pow para tirar a raiz quadrada da subtração do raio ao quadrado e a distância do centro do círculo para a linha atual. A função Math.round arredonda o resultado.

Na linha 15, verificamos se a distância da coluna atual para o centro do círculo é igual a distânciaX calculada na linha 11. Se sim, desenhamos a estrela, caso contrário, desenhamos os tracinhos.

O resultado desse código é o círculo proposto:

Altere o valor da variável raio e teremos círculos de tamanhos diferentes. Qualquer dúvida, a área de perguntas estará habilitada nesse post.