0
143
ViewsMostrando un punto en p5.js usando parámetros
En mi función 'mostrar' tengo este comando: point(this.position.x, this.position.y);
Esto no hace que aparezca un punto, tenga en cuenta que he intentado imprimir estos valores directamente antes de esta llamada de punto (...) y existen y están dentro del marco. También intenté analizarlos en un int y pasar, pero no tuve suerte.
Sin embargo:
- Al pasar, por ejemplo, 100, 100 a esta función, aparece el punto
- Establecer this.position.x y this.position.y en, por ejemplo, 100 antes de llamar al punto (...) hace que el punto aparezca
- Pasando, por ejemplo, 100, 100 a una nueva partícula (al azar (ancho), alto); en lugar de usar ancho y alto también funciona
- Asignar nuevas variables a los valores de this.position.x y this.position.y respectivamente y luego pasarlos al punto tampoco muestra el punto
Encuentre a continuación mi código, no tengo idea de cuál es el problema
var firework; function setup() { createCanvas(500, 400); stroke('purple'); strokeWeight(10); firework = new Particle(random(width), height); } function draw() { background(51); firework.update(); firework.show(); } function Particle(x, y) { this.position = createVector(x, y); this.velocity = createVector(0, 0); this.acceleration = createVector(0, 0); this.applyForce = function(force) { this.acceleration.add(force); } this.update = function() { this.position.add(this.velocity); this.velocity.add(this.acceleration); this.acceleration.mult(0); }; this.show = function() { point(this.position.x, this.position.y); }; }1 answers
Answer question0
El punto en realidad se está dibujando en el lienzo, simplemente no parece obvio. Esto se debe a que está configurando su valor y en height , lo que simplemente lo colocará en la parte inferior del lienzo. Los colores también dificultan ver dónde se dibuja el punto. La siguiente imagen muestra el punto que se dibuja en (310,399).
Para resolver esto, cambie el valor de y para que esté entre 0 y height . Una forma de lograr esto es aleatorizar el valor de y como lo hizo con random(width) para x . En mi solución a continuación, también cambié el fondo para dibujarlo con el valor de color 151 en lugar de 51 para un mejor contraste.
var firework; function setup() { createCanvas(500, 400); stroke("purple"); strokeWeight(10); firework = new Particle(random(width), random(height)); } function draw() { background(151); firework.update(); firework.show(); } function Particle(x, y) { this.position = createVector(x, y); this.velocity = createVector(0, 0); this.acceleration = createVector(0, 0); this.applyForce = function(force) { this.acceleration.add(force); }; this.update = function() { this.position.add(this.velocity); this.velocity.add(this.acceleration); this.acceleration.mult(0); }; this.show = function() { point(this.position.x, this.position.y); }; } <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>