Entrar Ainda não tem acesso?
4
respostas

exercicio da flor

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por Thiago Chamoun Merelles
| 24k xp | 15 posts

eu estava tentando complicar as coisas e deixar mais divertido o meu programa e criei isto:

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

<script> 

    var cor = prompt("informe a cor que deseja que a flor seja.")
    var raio = parseInt(prompt("informe o raio de cada petala."))
    var tela = document.querySelector("canvas")
    var pincel = tela.getContext('2d')

    function flor() {

        pincel.fillStyle = cor
        pincel.beginPath()
        pincel.arc(300, 200, raio, 0, 2 * 3.14)
        pincel.fill()
    }

    flor()

</script>

ele funciona perfeitamente, mas ainda nn cheguei no objetivo, pois ainda faltam as petalas da flor. Eu preciso fazer um codico em que qunato maior o raio da flor que o usuario botar, mais distante fique as minha petalas, sem contatar que devem ficar do mesmo tamanho, por exemplo:

uma flor com raio de 50 e suas petalas com raio de 50, coladas umas nas outras.

uma flor com raio de 100 e suas petalas com raio de 100, coladas umas nas outras.

assim posso fzr flores de varios tamanhos e garantir que as petalas sempre estejam coladas na flor e sempre do mesmo tamanho.

4 respostas
por Thiago Chamoun Merelles
| 24k xp | 15 posts

algm consegue me ajudar?

por João Manoel Lima
| 373.4k xp | 429 posts
Alura Scuba Team

Boa tarde Thiago, tudo certo?

Que interessante essa ideia de fazer um gerador de flores! É realmente muito legal colocar as nossas vontades em prática.

Eu usei umas funções da biblioteca Math que usam trigonometria para te ajudar a realizar o objetivo de ter as pétalas. Eu acho que não funcionou exatamente como você queria, mas tive um resultado curioso e acho que ele pode te ajudar a continuar com a sua idéia. Eu vou dar uma pequena explicação do que fiz e depois mando o código completo com minhas alterações, fechado?

Na matemática, uma forma de se descrever uma circunferência é considerando os pontos que satisfazem as equações x = raio * cos(t) e y = raio * sen(t). Então usei uma aproximação para fazer essas contas e montar a flor. Utilizei esse site como uma das referências da fórmulas e também a documentação do MDN sobre as funções trigonométricas.

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

<script> 
    // Recomendo tentar a cor das pétalas "blue", o centro "white" e o raio 40. Depois diga o que achou :)
    var corPetalas = prompt("informe a cor que deseja para as pétalas")
    var corCentro = prompt("informe a cor que deseja para o centro da flor")
    var raio = parseInt(prompt("informe o raio de cada petala."))

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

    function desenhaCirculo(x, y, cor) {
        pincel.fillStyle = cor
        pincel.beginPath()
        pincel.arc(x, y, raio, 0, 2 * 3.14)
        pincel.fill()
    }

    function flor() {
        var posicaoX = 300
        var posicaoY = 200

        // Pétalas
        for (let i = 0; i < 6 ; i++) {
            let posicaoPetalaX = posicaoX + raio * Math.cos(i);
            let posicaoPetalaY = posicaoY + raio*Math.sin(i);
            desenhaCirculo(posicaoPetalaX, posicaoPetalaY, corPetalas)
        }

        // Parte do meio
        desenhaCirculo(posicaoX, posicaoY, corCentro);

    }

    flor()

</script>

Espero que essa aproximação te ajude nos seus objetivos. Estarei aqui caso precise de algo.

Continue assim e bons estudos!

por Thiago Chamoun Merelles
| 24k xp | 15 posts

Obrigado pela ajuda! Ainda não cheguei nessa parte do ensino, mas consegui ter uma ideia.

por Thiago Chamoun Merelles
| 24k xp | 15 posts

Deu certo, muito legal!