Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Primeiros exercicios

por Gabriel Vendramini
| 93.1k xp | 37 posts

Ola a todos.

Tenho um exercício que consiste em desenhar 5 círculos dentro de um canvas e com parâmetros aleatórios porem não entendo o que esta acontecendo com o meu código. Se colocarem para testar ele fica num looping infinito gerando os círculos

function setup() {
  createCanvas(1080, 920);   
}

function draw() {

  background(224);
  for (var i=0; i<5; i++){
      var rdnRadius = int(random(0,500));
      var rdnColorX = int(random(0,300));
      var rdnColorY = int(random(0,400)); 
      var rdnColorZ = int(random(0,100));
      var rdnX = int(random(0,500));
      var rdnY = int(random(0,500));
      dibuixarElipse(rdnColorX, rdnColorY, rdnColorY, rdnX, rdnY, rdnRadius);
  }
}

function dibuixarElipse(colorX, colorY, colorZ, x, y, radius) {

    strokeWeight(2);
    stroke(colorX, colorY, colorZ);
    noFill();
    ellipse(x, y, radius); 


}

html

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="practica.js">setup();</script>
<meta charset="utf-8" />
</head>
<body>    
    <script>
        draw();
    </script>    
</body>
</html>

.

3 respostas
solução!
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Gabriel tudo bem?

Dentro dessas bibliotecas que importou deve ter algum método com o nome draw que fica chamando toda hora o draw seu e então fica nesse loop infinito. O que fiz foi trocar o nome do método para drawe e colocar ele dentro do onload do body para garantir que as bibliotecas externas tenham sido carregadas pelo programa antes. Dá uma olhadinha.

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="practica.js">setup();</script>
<meta charset="utf-8" />
</head>

<body onload="drawe()">
    <script>
        function setup() {
            createCanvas(1080, 920);
        }



        function drawe() {

            background(224);
            for (var i = 0; i < 5; i++) {
                var rdnRadius = int(random(0, 500));
                var rdnColorX = int(random(0, 300));
                var rdnColorY = int(random(0, 400));
                var rdnColorZ = int(random(0, 100));
                var rdnX = int(random(0, 500));
                var rdnY = int(random(0, 500));
                dibuixarElipse(rdnColorX, rdnColorY, rdnColorY, rdnX, rdnY, rdnRadius);
            }
        }

        function dibuixarElipse(colorX, colorY, colorZ, x, y, radius) {

            strokeWeight(2);
            stroke(colorX, colorY, colorZ);
            noFill();
            ellipse(x, y, radius);


        }


    </script>
</body>

</html>

Espero ter ajudado!!!

por Gabriel Vendramini
| 93.1k xp | 37 posts

Ola André, obrigado pela ajuda. Realmente funcionou trocando o nome do método um pouco estranho mas imagino que o que importa ai é a logica estar correta. Te juro que tinha trocado quase tudo de lugar e não entendia o que acontecia.

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Disponha e bons estudos!!