Javascript not working when in .ready function

Question

Hi I have some jquery I wanted to use with this vanilla javascript, I was hoping to put this script inside my .ready function so I can manipulate the variables with jquery. This code creates an animation and displays when outside of the .ready function. Why dose this not work while in this function and how will I be able to get it to work?

 $(document).ready(function() {
    var particles = [];
    function setup() {
      createCanvas(400, 400);
      angleMode(DEGREES);
      translate(200, 200);
      noStroke();
      for (var i = 40; i >= 0; i--) {
        var r = i * random(5, 6) + 50;
        var angle = random(0, 360);
        for (var j = 50; j >= 0; j--) {
          r -= 0.1;
          angle += random(2, 9);
          particles.push(new Particle(r, angle, random(1, 5)));
        }
      }
      frameRate(20);
    }
    function draw() {
      background(0);
      translate(200, 200);
      var r = 210;
      for (var i = particles.length - 1; i >= 0; i--) {
        if (particles[i].r < random(20, 25)) {
          particles[i].r = r;
        } else {
          particles[i].update();
          particles[i].show();
        }
      }
    }
    function Particle(r, theta, size) {
      this.r = r;
      this.theta = theta;
      this.size = size;
      this.update = function() {
        this.r -= random(0.5, 0.8) / Math.log10(this.r * 2);
        this.theta += random(0.9, 1.5) / Math.log10(this.r / 5);
      };
      this.show = function() {
        fill(255, Math.min(2 * this.r, 255));
        ellipse(this.r * sin(this.theta), this.r * cos(this.theta), this.size);
      };
    }
});

duplicate of https://stackoverflow.com/questions/18504253/javascript-function-inside-document-ready — Abhiram, Nov 16 '18 at 12:53
on a first sight I would say a big difference is your particles variable is not global when in ready function but is when outside. I didn't investigate really but that seems an obvious difference to me. — MMMagic, Nov 16 '18 at 12:56

score 1 · Answer 1 · answered Nov 16 '18 at 12:52

1

You need to call the functions setup and draw, you only defined them in the current version of your code,

setup() and draw()

answered Nov 16 '18 at 12:52

axelduch

10,132
2
26
49

score 0 · Answer 2 · answered Nov 16 '18 at 13:23

In your code, you have defined the setup and draw functions but did not call them.

So, add the end of your code, add two function calls

setup() code()

As a side note, if you are using jQuery only for the document.ready event, you can consider using window.onload and DOMContentLoaded event. You can read more about these in this post and this answer

Javascript not working when in .ready function

2 Answers2