Процессинг Khan Academy vs Процессинг 2

Question

Итак, я сделал это в khan-academy и хочу разместить на своем сайте.

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

Чтобы преобразовать это в JavaScript, я вставил приведенный ниже код.К сожалению, я получаю сообщение об ошибке:вы смешиваете активный и статический режимы.Почему это работает при обработке в Академии Хана, а не при обычной обработке?Также какими другими способами я могу написать это, чтобы заставить это работать?

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

С вашим кодом связано несколько проблем.Во-первых, вы не можете вызывать функции вне draw() и setup()-- это то, что вызывает ошибку "активный против статического".Переместите их внутрь setup().Во-вторых, не существует такой вещи, как mouseIsPressed в процессе обработки, но есть mousePressed.Вам также не нужна точка с запятой после закрывающей фигурной скобки draw().Вы также используете жестко запрограммированные значения 400 для рисования прямоугольника, в то время как само окно 500x500.В любом случае, вам не следует использовать подобные жестко закодированные числа, используйте встроенный width и height константы.Наконец, вы никогда не используете переменную x, поэтому я прокомментировал это.Вот код, который работает (и очищен с точки зрения форматирования).

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