Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

104
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda