Traitement Khan Academy et Traitement 2

Question

J'ai donc fait ceci sur khan-academy et je souhaite le mettre sur mon site Web.

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

Pour convertir cela en JavaScript, j'ai mis le code ci-dessous.Malheureusement j'obtiens l'erreur :vous mélangez les modes actif et statique.Pourquoi cela fonctionne-t-il sur le traitement Khan Academy et pas sur le traitement normal ?De quelles autres manières puis-je écrire ceci pour que cela fonctionne ?

//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

Il y a plusieurs problèmes avec votre code.Premièrement, vous ne pouvez pas avoir d'appels de fonction en dehors de draw() et setup()-- c'est ce qui cause l'erreur "actif vs statique".Déplacez-les à l'intérieur setup().Deuxièmement, il n’existe rien de tel que mouseIsPressed en cours de traitement, mais il y a mousePressed.Vous n'avez pas non plus besoin de point-virgule après l'accolade fermante de draw().Vous utilisez également des valeurs codées en dur de 400 pour dessiner le rectangle, tandis que la fenêtre elle-même est 500X500.De toute façon, vous ne devriez pas utiliser de numéros codés en dur comme celui-là, utilisez le width et height constantes.Enfin, vous n'utilisez jamais la variable x, alors je l'ai commenté.Voici du code qui fonctionne (et qui est nettoyé au niveau du formatage).

//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);
}