So far, I've created a class which generates a circle. I'm trying to make this circle move/vibrate constantly but I'm not sure what is the best way to add a move function with OOP. Also, when I create the 'face' object in the draw function my page crashes.

function setup() {
  createCanvas(350, 350, WEBGL);
  background('white')
  let face = new Face();
}

class Face {
  constructor() {
    this.basicFace(100, random(10,30),0,0);
  }


  basicFace(radius, steps, centerX, centerY) {
  var xValues = [];
  var yValues = [];
  for (var i = 0; i < steps; i  ) {
    let rad = radius   random(-radius / 50, radius / 50) 
    xValues[i] = (centerX   rad * cos(2 * PI * i / steps));
    yValues[i] = (centerY   rad * sin(2 * PI * i / steps));
  }
  beginShape();
  strokeWeight(4)
    for (let i = 0; i < xValues.length; i  ) {
      curveVertex(xValues[i], yValues[i]);
    }
  endShape(CLOSE);

}
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

CodePudding user response：

First off, one reason why creating new Face instances in your draw() function might cause the page to hang would be because the draw() function runs many times per second, and in JavaScript large numbers of allocations (such as creating new instances of a class) can be bad for performance. However, simply allocating one class instance per call to draw() wouldn't normally cause a problem. If you are adding those instances to a data structure such as an array on the other hand, that could cause you page to use an excessive amount of memory and eventually hang. Without seeing the exact code that is causing the hang it is hard to say.

If you want to implement the above sketch in an Object Oriented way, then you should take the following steps:

1. Give your class some constructor parameters that define it's properties, such as location and size, and store those as instance fields.
2. Separate your class behaviors from the constructor (i.e. give it a method that causes it to be displayed.
3. Instantiate it once and then call that instance method in draw() so that it is displayed each frame.

let face;

function setup() {
  createCanvas(350, 350, WEBGL);
  face = new Face(100, random(10, 30), 0, 0);
}

function draw() {
  background('white');
  face.show();
}

class Face {
  constructor(radius, steps, centerX, centerY) {
    this.radius = radius;
    this.steps = steps;
    this.centerX = centerX;
    this.centerY = centerY;
  }

  show() {
    var xValues = [];
    var yValues = [];
    for (var i = 0; i < this.steps; i  ) {
      let rad = this.radius   random(-this.radius / 50, this.radius / 50)
      xValues[i] = (this.centerX   rad * cos(2 * PI * i / this.steps));
      yValues[i] = (this.centerY   rad * sin(2 * PI * i / this.steps));
    }
    
    strokeWeight(4);
    beginShape();
    for (let i = 0; i < xValues.length; i  ) {
      curveVertex(xValues[i], yValues[i]);
    }
    
    endShape(CLOSE);
  }
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

Additionally, when you are displaying your curve, it is not necessary to create arrays for the x and y values in one loop and then call curveVertex() in a separate loop. Instead you can combine these loops and avoid unnecessary array allocations.

      show() {
        strokeWeight(4);
        beginShape();
        for (let i = 0; i < this.steps; i  ) {
          let rad = this.radius   random(-this.radius / 50, this.radius / 50);
          curveVertex(
            this.centerX   rad * cos(2 * PI * i / this.steps),
            this.centerY   rad * sin(2 * PI * i / this.steps)
          );
        }
        
        endShape(CLOSE);
      }