En primer lugar, una de las razones por las que la creación de nuevas instancias de Face en su función draw() podría hacer que la página se bloquee sería porque la función draw() se ejecuta muchas veces por segundo, y en JavaScript, una gran cantidad de asignaciones (como la creación de nuevas instancias de una clase) puede ser malo para el rendimiento. Sin embargo, simplemente asignar una instancia de clase por llamada a draw() normalmente no causaría ningún problema. Si está agregando esas instancias a una estructura de datos como una matriz, por otro lado, eso podría hacer que su página use una cantidad excesiva de memoria y eventualmente se cuelgue. Sin ver el código exacto que está causando el bloqueo, es difícil saberlo.

Si desea implementar el boceto anterior de una manera orientada a objetos, debe seguir los siguientes pasos:

1. Proporcione a su clase algunos parámetros de constructor que definan sus propiedades, como la ubicación y el tamaño, y guárdelos como campos de instancia.
2. Separe los comportamientos de su clase del constructor (es decir, dele un método que haga que se muestre).
3. Crea una instancia una vez y luego llama a ese método de instancia en draw() para que se muestre en cada cuadro.

 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/p5@1.4.0/lib/p5.js"></script>

Además, cuando está mostrando su curva, no es necesario crear matrices para los valores x e y en un ciclo y luego llamar a curveVertex() en un ciclo separado. En su lugar, puede combinar estos bucles y evitar asignaciones de matrices innecesarias.

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