Procesamiento de Khan Academy vs Procesamiento 2

Question

Así que he hecho este de khan academy y quiero poner en mi sitio web.

https://www.khanacademy.org/cs/fade-away/4830224329998336

Para convertir esto en JavaScript pongo el código de abajo en.Por desgracia, me sale el error:se mezcla activa y la estática de los modos.¿Por qué este trabajo en Khan Academy Procesamiento y no en el Procesamiento normal?También qué otras formas puedo escribir esto para que funcione?

//don't forget to click!!!
background(2, 3, 3);

strokeWeight(2);
var x = random;

void setup(){
  size(500,500);
}




void draw(){
   fill(0, 0, 0, 20);
   rect(0,0, 400,400);
    var randomSize = random(20, 60);

     if (mouseIsPressed) { 

        noStroke();
        fill(random(0, 255), random(0, 255), random(0, 255), 373);

        } 

    else {
        noStroke();
        fill(255, 0, 0, 15);
        randomSize=50;
    }
    ellipse(mouseX, mouseY, randomSize, randomSize);
};

Answer 1

Hay varios problemas con su código.En primer lugar, usted no puede tener la función de llamadas fuera de draw() y setup()- eso es lo que está causando el "activo vs estático de error".Moverlos dentro de setup().En segundo lugar, no hay tal cosa como mouseIsPressed en el procesamiento, pero no es mousePressed.Usted también no necesita un punto y coma después de la llave de cierre de draw().También puede usar valores codificados de 400 para dibujar el rectángulo, mientras que la ventana en sí es 500x500.Usted no debe usar codificados en números como que de todos modos, el uso de la incorporada en el width y height las constantes.Por último, nunca utiliza la variable x, por lo que me comentó un vistazo.Aquí está el código que funciona (y es limpiado, formato-wise).

//don't forget to click!!!

void setup() {
  size(500, 500);
  background(2, 3, 3);
  strokeWeight(2);
  //var x = random;
}

void draw() {
  fill(0, 0, 0, 20);
  rect(0, 0, width, height);
  var randomSize = random(20, 60);
  noStroke();

  if (mousePressed) { 
    fill(random(0, 255), random(0, 255), random(0, 255), 373);
  }  else {
    fill(255, 0, 0, 15);
    randomSize=50;
  }
  ellipse(mouseX, mouseY, randomSize, randomSize);
}