Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

94
Vistas
How to make a Object in a class physically move using JS and p5.js

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

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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/p5@1.4.0/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);
      }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda