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

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
– MMMagic, Commented Nov 16, 2018 at 12:56

a-d · Accepted Answer · 2018-11-16 12:52:57Z

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, 2018 at 12:52

a-d

10.9k2 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ekamwalia · Accepted Answer · 2018-11-16 13:23:50Z

0

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

answered Nov 16, 2018 at 13:23

ekamwalia

132 bronze badges

Collectives™ on Stack Overflow

Javascript not working when in .ready function

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related