Entrar Ainda não tem acesso?
2
respostas

Inofensiva florzinha que se complicou

por Márcia Maria Claudia Maleski
| 32k xp | 2 posts

Realizando o exercício da Inofensiva florzinha, depois de alguns erros de posicionamento no plano cartesiano, vi que poderia fazer desenhos mais elaborados com os comandos ensinados no capitulo. Daí saiu uma florzinha mais elaborada. Inofensiva florzinha que se complicou 

<canvas width="600" height="400"></canvas>

<script>

  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');

  pincel.fillStyle = 'darkslateblue';
  pincel.fillRect(0,0,600,400);

  function desenhaCirculoExterno(x,y,raio){

    pincel.fillStyle = 'orchid';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*3.14);
    pincel.fill();
    pincel.strokeStyle = 'mediumvioletred';
    pincel.stroke();

  }

  function desenhaCirculoInterno1(x,y,raio){

    pincel.fillStyle = 'mediumpurple';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*3.14);
    pincel.fill();
    pincel.strokeStyle = 'slateblue';
    pincel.stroke();

  }

  function desenhaCirculoInterno2(x,y,raio){

    pincel.fillStyle = 'mediumslateblue';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*3.14);
    pincel.fill();
    pincel.strokeStyle = 'purple';
    pincel.stroke();


  }

  function desenhaCirculoInterno3(x,y,raio){

    pincel.fillStyle = 'slateblue';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*3.14);
    pincel.fill();
    pincel.strokeStyle = 'rebeccapurple';
    pincel.stroke();

  }
  function desenhaCirculoInterno4(x,y,raio){

    pincel.fillStyle = 'rebeccapurple';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*3.14);
    pincel.fill();
    pincel.strokeStyle = 'indigo';
    pincel.stroke();

  }

  function desenhaCirculoCentral1(x,y,raio){

    pincel.fillStyle = 'goldenrod';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*3.14);
    pincel.fill();

  }
  function desenhaCirculoInterno5(x,y,raio){

    pincel.fillStyle = 'indigo';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*3.14);
    pincel.fill();
    pincel.strokeStyle = 'mediumpurple';
    pincel.stroke();

  }

  function desenhaCirculoCentral(x,y,raio){

    pincel.fillStyle = 'moccasin';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2*3.14);
    pincel.fill();
    pincel.strokeStyle = 'goldenrod';
    pincel.stroke();

  }
// do circulo externo ao circulo interno 3 as coordenadas são iguais, exceção raio
  desenhaCirculoExterno(200, 200, 100);
  desenhaCirculoExterno(300, 100, 100);
  desenhaCirculoExterno(400, 200, 100);
  desenhaCirculoExterno(300, 300, 100);
  desenhaCirculoExterno(225, 125, 100);
  desenhaCirculoExterno(375, 125, 100);
  desenhaCirculoExterno(225, 275, 100);
  desenhaCirculoExterno(375, 275, 100);

  desenhaCirculoInterno1(200, 200, 90);
  desenhaCirculoInterno1(300, 100, 90);
  desenhaCirculoInterno1(400, 200, 90);
  desenhaCirculoInterno1(300, 300, 90);
  desenhaCirculoInterno1(225, 125, 90);
  desenhaCirculoInterno1(375, 125, 90);
  desenhaCirculoInterno1(225, 275, 90);
  desenhaCirculoInterno1(375, 275, 90);

  desenhaCirculoInterno2(200, 200, 75);
  desenhaCirculoInterno2(300, 100, 75);
  desenhaCirculoInterno2(400, 200, 75);
  desenhaCirculoInterno2(300, 300, 75);
  desenhaCirculoInterno2(225, 125, 75);
  desenhaCirculoInterno2(375, 125, 75);
  desenhaCirculoInterno2(225, 275, 75);
  desenhaCirculoInterno2(375, 275, 75);

  desenhaCirculoInterno3(200, 200, 50);
  desenhaCirculoInterno3(300, 100, 50);
  desenhaCirculoInterno3(400, 200, 50);
  desenhaCirculoInterno3(300, 300, 50);
  desenhaCirculoInterno3(225, 125, 50);
  desenhaCirculoInterno3(375, 125, 50);
  desenhaCirculoInterno3(225, 275, 50);
  desenhaCirculoInterno3(375, 275, 50);

// circulos internos 4 e 5 as coordenadas são iguais, exceção raio

  desenhaCirculoInterno4(225, 200, 40);
  desenhaCirculoInterno4(300, 125, 40);
  desenhaCirculoInterno4(375, 200, 40);
  desenhaCirculoInterno4(300, 275, 40);
  desenhaCirculoInterno4(250, 150, 40);
  desenhaCirculoInterno4(350, 150, 40);
  desenhaCirculoInterno4(250, 250, 40);
  desenhaCirculoInterno4(350, 250, 40);

    desenhaCirculoCentral1(300,200,75);

  desenhaCirculoInterno5(225, 200, 30);
  desenhaCirculoInterno5(300, 125, 30);
  desenhaCirculoInterno5(375, 200, 30);
  desenhaCirculoInterno5(300, 275, 30);
  desenhaCirculoInterno5(250, 150, 30);
  desenhaCirculoInterno5(350, 150, 30);
  desenhaCirculoInterno5(250, 250, 30);
  desenhaCirculoInterno5(350, 250, 30);

    desenhaCirculoCentral(300,200,50 );

  </script>

Eu queria simplificar este código. Estudei e pensei em inserir variáveis, pois existem blocos iguais só mudando o raio dos círculos. Podem me auxiliar? Tks! =)

2 respostas
por Matheus Perez
| 442.3k xp | 287 posts
Alura Scuba Team Scuba Android

Olá Márcia, tudo bem?

Obrigado por aguardar um retorno :)

Primeiramente, meus parabéns pela implementação, ficou linda a flor que você fez

Agora para te ajudar no código, uma coisa que você pode estar utilizando é uma combinação de arrays e o forEach para usar valores que se repetem bastante, como nossas únicas variáveis são o raio e a função utilizada para desenhar, caso não tenha familiaridade com o forEach e com Arrays, recomendo a leitura breve destes artigos:

Tendo esses tópicos em vista, uma das formas que podemos abordar esse problema seria assim:

    function desenharVariasVezes(raio, funcao) {

        const cordenadas_x = [200, 300, 400, 300, 225, 375, 225, 375]
        const cordenadas_y = [200, 100, 200, 300, 125, 125, 275, 275]
        cordenadas_x.forEach(function (valor, indice) {
            funcao(cordenadas_x[indice], cordenadas_y[indice], raio)
        })

    }
    // do circulo externo ao circulo interno 3 as coordenadas são iguais, exceção raio
    // desenhaCirculoExterno(200, 200, 100);
    // desenhaCirculoExterno(300, 100, 100);
    // desenhaCirculoExterno(400, 200, 100);
    // desenhaCirculoExterno(300, 300, 100);
    // desenhaCirculoExterno(225, 125, 100);
    // desenhaCirculoExterno(375, 125, 100);
    // desenhaCirculoExterno(225, 275, 100);
    // desenhaCirculoExterno(375, 275, 100);


    desenharVariasVezes(100, desenhaCirculoExterno)

Eu criei uma função onde ela vai receber o raio e a função que pretende usar para desenhar, com isso, fiz um array das coordenadas x e y, e fiz um laço de repetição com um desses arrays somente para percorrer os indices, assim eu posso acessar as duas simultaneamente e chamar a função com esses valores juntamente do raio que foi passado, então ao final do código está um exemplo da abordagem e como ela pode substituir a implementação acima.

Um problema que você pode enfrentar é variação das coordenadas, como observei no seu código, não há um padrão de repetição nelas, sendo necessário talvez utilizar outro array de coordenadas y, e também aplicar essa ideia para o código todo, já que o que eu te passei foi uma ideia do que pode ser feito apenas em um bloco.

Isso é uma de várias abordagens que você pode utilizar, ficarei à disposição para te auxíliar em quaisquer outras dúvidas sobre o tópico em questão :)

Forte abraço e bons estudos !!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Márcia Maria Claudia Maleski
| 32k xp | 2 posts

Olá, Matheus! Caramba! Que legal ter ajuda e desenvolver mais os estudos! Tenha certeza que vou estudar a forma enviada e ler os artigos recomendados. Tendo dúvida, volto a solicitar ajuda.

Muito, muito obrigada! :)