Processamento da Khan Academy vs Processamento de 2

Question

Então eu fiz isso em khan-academy e deseja colocá-lo no meu site.

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

Para converter este JavaScript para eu colocar o código abaixo.Infelizmente eu recebo o erro:você está misturando o ativo e estático modos.Por que faz esse trabalho na Khan Academy de Processamento e não no Processamento normal?Também que outras formas de eu escrever isso para fazê-lo funcionar?

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

Há vários problemas com o seu código.Primeiro, você não pode ter a função de chamadas fora de draw() e setup()-- é o que está causando o "active vs estático de erro".Movê-los dentro de setup().Segundo, não existe tal coisa como mouseIsPressed no processamento, mas não é mousePressed.Você também não precisa de um ponto-e-vírgula após o fechamento do draw().Você também usar valores hard-coded de 400 para desenhar o retângulo, enquanto a janela em si 500x500.Você não deve usar embutida números como que, de qualquer forma, usar o built-in width e height constantes.Por último, você nunca usar a variável x, então eu comentou-lo.Aqui está o código que funciona (e é limpo, formatação-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);
}