Processing Khan Academy vs Processing 2

Question

So I made this on khan-academy and want to put it on my website.

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

To convert this to JavaScript I put the code below in. Unfortunately I get the error: you are mixing active and static modes. Why does this work on Khan Academy Processing and not in normal Processing? Also what other ways can I write this to make it work?

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

There are several problems with your code. First, you can't have function calls outside of draw() and setup()-- that's what is causing the "active vs static" error. Move them inside of setup(). Second, there is no such thing as mouseIsPressed in processing, but there is mousePressed. You also do not need a semicolon after the closing brace of draw(). You also use hard-coded values of 400 for drawing the rectangle, while the window itself is 500x500. You shouldn't use hard-coded numbers like that anyway, use the built-in width and height constants. Lastly, you never use the variable x, so I commented it out. Here is code that works (and is cleaned up, formatting-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);
}