[Sugerencia] imprimir un N numeros de flores aleatorios, AYUDA CON MI CODIGO | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

2
respuestas

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Diseñando una flor

por Alejandro Calsina

| 100.2k xp | 12 posts

<canvas id="alek" width="800" height="800"></canvas>
<script type="text/javascript">

    var pantalla=document.querySelector("canvas");
    var pincel=pantalla.getContext("2d");



     pincel.fillStyle = "lightgray";
     pincel.fillRect(0, 0, 800, 800);

function dibujarFlor(x,y,r1,color1,r2,color2) {
    pincel.fillStyle = color1;
    pincel.beginPath();
    pincel.arc(x, y, r1, 0, 2*Math.PI);
    pincel.fill();


            let sR=r1+r2;
            pincel.fillStyle = color2;
            pincel.beginPath();
            pincel.arc(x, y+sR, r2, 0, 2*Math.PI);
            pincel.arc(x, y-sR, r2, 0, 2*Math.PI);
            pincel.fill();

            pincel.beginPath();
            var x2=Math.round(Math.cos(0.785)*sR);  //valor de x en el circulo que pasa por el centro de los petalos ---45grados son 0.785 rad
            var y2=Math.round(Math.sin(0.785)*sR);  //valor de y en el circulo que pasa por el centro de los petalos

            pincel.arc(x+x2,y-y2,r2, 0, 2*Math.PI);
            pincel.arc(x-y2,y+x2, r2, 0, 2*Math.PI); 
            pincel.fill();

            pincel.beginPath();
            pincel.arc(x-x2,y-x2, r2, 0, 2*Math.PI);
            pincel.arc(x+y2,y+y2, r2, 0, 2*Math.PI);
            pincel.fill();

            pincel.beginPath();
            pincel.arc(x+sR, y, r2, 0, 2*Math.PI);
            pincel.arc(x-sR, y, r2, 0, 2*Math.PI);
            pincel.fill();



     /*pincel.beginPath();
     pincel.fillStyle="black";
     pincel.arc(x,y,sR,0,2*Math.PI);
     pincel.stroke();*/
}

function masVeces(numeroDeFlores,ancho,alto){
    let contador=0;

                for (var i = 0; i <= numeroDeFlores; i++) {

                  let x=(Math.round(Math.random()*100))*10;
                  let y=(Math.round(Math.random()*100))*10;
                      if(x<ancho  &&  y<alto){
                                dibujarFlor(x,y,20,"red",10,"yellow");
                                /*contador++;
                                if(contador=numeroDeFlores){
                                    break;
                                }return;*/


                      }
                      numeroDeFlores=numeroDeFlores-1;
                }

}




masVeces(30,800,800); //(numero de flores,ancho de canvan, alto de canvan)




</script>

Cuando ingreso un numero determinado de flores, por Ej. 5 flores, el programa imprime no las 5 que le pido ---si no 2, 1 ,3 hasta cero .Alguno puede darme sugerencias de como puedo mejorar eso??

2 respuestas

por Diego Marcel Castañeda Chala

| 99.3k xp | 12 posts

20/12/2022

Hola Freddy Alejandro Calsina Machaca, lo que sucede es que el programa te repite posiciones por consiguiente solo te imprime dos flores de 5, se me ocurre controlarlo de esta manera

function masVeces(numeroDeFlores,ancho,alto){
        let cnt=0;
        let ejex=0;
        let ejey=0;
        while (cnt!=numeroDeFlores) {
            let x=(Math.round(Math.random()*10)*100);
            let y=(Math.round(Math.random()*10)*100);
            if(x<ancho  &&  y<alto && ejex!=x  && ejey!=y){
                dibujarFlor(x,y,20,"red",10,"yellow");
                cnt++;
                ejex=x;
                ejey=y;
                document.write(`<br>x=${x}, y=${y}`)
            }
        }
    }

Yo lo corri en mi equipo pero sin embargo en ocasiones repite algunas posiciones, habria que buscar una alternativa mas efectiva para que no se repita ni se desborde las flores del area definida por canva

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

por Alejandro Calsina

| 100.2k xp | 12 posts

21/12/2022

function masVeces(numeroDeFlores,ancho,alto){ let contador=0;

                for (var i = 0; i < numeroDeFlores; i++) {

                  let x=(Math.round(Math.random()*100))*10;
                  let y=(Math.round(Math.random()*100))*10;
                      if(x<=ancho  &&  y<=alto){
                                dibujarFlor(x,y,20,"#FFFFFF",15,"#33CCFF");
                                contador++;
                                console.log(contador);

                      }else{    //si no se cumple el if, aqui lo se hace es reducir el valor de "i" ya que se fallo en el intento de dibujar una flor.
                      i=i-1;
                      }                    
                }

}
despues de revisarlo lo solucione de esta manera, ya me dibujaba las flores que queria.  Con tu sugerencia utilizando "While"  tambien veo que funciona-Gracias por tomarte tu tiempo para ayudarme- y eso que la flores salgan enteritas seria genial, pero me pisa el tiempo para avanzar los cursos y me cuesta todabia entender y aramar los códigos.