I am attempting to create a JavaScript Text Animation but i am getting particleArray is undefined
i am not sure how to resolve the issue i have tried moving the code from the mounted method since it would load before being defined but same results.
export default {
data : function (){
return {
particleArray: null,
x:null,
y:null,
radius: 150,
vuedata: null,
}
},
class Particle{
constructor(x, y){
this.x = x + 100;
this.y = y;
this.size = 3;
this.baseX = this.x;
this.baseY = this.y;
this.density = (Math.random() *30) + 1;
}
draw(){
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.ard(this.x, this.y, this.size,0,Math.PI * 2);
ctx.closePath();
ctx.fill();
}
}
function init(){
this.particleArray = [];
particleArray.push(new Particle(50,50));
}
The answer is this.particleArray.push(new Particle(50,50));
this.particleArray = []; assigns the data property particleArray the value [].
particleArray.push(new Particle(50,50)); attempts a method on a local variable that does not exist.
Related
Hello I'm am getting the above error message when trying to run this code and I can't for the life of me figure out what's wrong with it, help would be very appreciated. Excuse any rookie mistakes you may see. I've created a ball and I am trying to move it.
class Ball{
constructor(x,y,xSpeed,ySpeed,r){
this.x =x;
this.y=y;
this.xSpeed=xSpeed;
this.ySpeed=ySpeed;
this.r= r;
}
draw(){
ctx.clearRect(0,0, 500, 200);
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.stroke();
}
move()
{
this.x+=this.xSpeed; //error is here
this.y+=this.ySpeed;
if (this.x==0)
{
this.xSpeed=2;
}
else if(this.x==500)
{
this.xSpeed=-2;
}
if (this.y==200)
{
this.ySpeed=-1;
}
else if (this.y==0)
{
this.ySpeed=1;
}
window.requestAnimationFrame(this.move);
}
}
var canvas = document.getElementById("canvas-for-ball");
var ctx = canvas.getContext("2d")
let balls=new Ball (10,10,2,1,5);
balls.draw();
balls.move();
The problem is that when you call requestAnimationFrame and pass it a reference to move as its callback, the this binding to your Ball instance is lost when the callback is executed. Instead, you must pass move in such a way that this is still bound to your Ball instance. You can do this by passing the function reference using the .bind() method, which takes an argument that specifies what the this binding will be when the callback function runs.
class Ball {
constructor(x,y,xSpeed,ySpeed,r){
this.x = x;
this.y = y;
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.r = r;
}
draw(){
ctx.clearRect(0,0, 500, 200);
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.stroke();
}
move(){
this.x += this.xSpeed;
this.y += this.ySpeed;
if (this.x == 0) {
this.xSpeed = 2;
} else if(this.x == 500) {
this.xSpeed =- 2;
}
if (this.y == 200) {
this.ySpeed =- 1;
} else if (this.y == 0) {
this.ySpeed = 1;
}
window.requestAnimationFrame(this.move.bind(this));
}
}
var canvas = document.getElementById("canvas-for-ball");
var ctx = canvas.getContext("2d")
let balls = new Ball(10,10,2,1,5);
balls.draw();
balls.move();
<canvas id="canvas-for-ball"></canvas>
Not sure if i'm getting the scope wrong but iv'e tried moving the function around a bit but it just gives me that is not a function error.
let bubbles = [];
function setup() {
createCanvas(400, 400);
for (let i = 0; i < 10; i++){
bubbles[i] = new Bubble(200, 200, 40)
}
}
function draw() {
background(0);
for (i = 0; i < bubbles.length; i++){
bubbles[i].show();
}}
function show() {
stroke(20);
strokeWeight(2);
fill(random(255), 0, random(255))
ellipse(this.x, this.y, this.r * 2)
}
class Bubble {
constuctor(x, y, r){
this.x = x;
this.y = y;
this.r = r;
}}
As said in the comments by Rabbid76, your main problem is that you are calling a function within the Bubble object which doesn't exist. So you should pop that into the Bubble class:
class Bubble {
constructor(x, y, r){
this.x = x;
this.y = y;
this.r = r;
}
show() {
stroke(20);
strokeWeight(2);
fill(random(255), 0, random(255))
ellipse(this.x, this.y, this.r * 2)
}
}
Also, just so you know you misspelt constructor and if you're using the p5 online editor it doesn't flag it as an error, it thinks you've defined a new function called constuctor it is completely valid syntax.
One more thing, you are passing in the x and y location of each bubble as 200, 200, which basically means each bubble is going to be on top of each other, I'm assuming you'd want them to be spread out around the screen:
bubbles[i] = new Bubble(random(width), random(height), 20);
Oh and also, you may want to store the r,g,b colours in the Bubble object so it doesn't choose a new colour each frame!
I am trying to make a graphics library in JavaScript. I want to make a Rectangle class, but I don't want to have it in the global scope, as all of my functions etc. are in an object called L2D.
This is my code:
// "primitive" objects
L2D.Vec2 = (x, y) => {
this.x = x;
this.y = y;
}
// interfaces
L2D.Drawable = () => {
this.fillColor = '#FFF';
this.outlineColor = '#000';
}
L2D.Transformable = () => {
this.position = L2D.Vec2(0, 0);
}
L2D.Shape = () => {
L2D.Drawable(); L2D.Transformable();
this.vertices = [];
this.draw = (context) => {
context.beginPath();
for (let i in this.vertices) {
let v = this.vertices[vert]
if (i == 0) context.moveTo(v.x, v.y);
else context.lineTo(v.x, v.y);
}
context.closePath();
if (this.fillColor) {
context.fillStyle = this.fillColor;
context.fill();
}
if (this.outlineColor) {
context.strokeStyle = this.outlineColor;
context.fill();
}
}
}
// classes
L2D.Rectangle = (x, y, w, h) => {
L2D.Shape();
this.vertices = [
L2D.Vec2(x, y),
L2D.Vec2(x + w, y),
L2D.Vec2(x + w, y + h),
L2D.Vec2(x, y + h)
]
}
The problem is, I cannot call new L2D.Rectangle(x, y, w, h). I get an error:
Uncaught TypeError: L2D.Rectangle is not a constructor
I have tried doing function L2D.Rectangle and class L2D.Rectangle, but both result in an error (complaining about that dot).
How can I achieve what I'm trying to do?
Arrow functions cannot rebind the this context. The this is already bound to the lexical scope. For new to work, you should have plain functions.
L2D.Rectangle = function(x, y, w, h) {};
here is the code for my project:
'_' is a selector method.
'update' is run on an interval of 0.1
'init' creates the
'Ball' is the object I'm trying to create
'ball.set()' is the method that is not working.
var width = window.innerWidth/3;
var height = window.innerHeight-60;
var balls = [];
var id;
function rand(min, max) {
return (Math.random() * (max - min)) + min;
}
function run(){
init();
}
function init(){
document.write("<div style='width:"+width+"px;height:"+height+"px;' id='container'></div>");
new Ball(width/2-12.5, height/2-12.5, rand(-2, 2), rand(-2, 2), 1);
id = setInterval(update, 0.1);
}
function _(elem){
return document.getElementById(elem);
}
function update(){
for(var b in balls){
b.set();
}
}
function Ball(x, y, vx, vy, ind){
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.ind = ind;
balls[this.ind] = this;
_("container").innerHTML+=("<div style='top:"+y+"px;left:"+x+"px;' class='ball' id='ball"+this.ind+"'></div>");
this.deleteBall = function () {
_('ball'+this.ind).outerHTML = "";
balls[this.ind] = null;
};
this.set = function(){
this.x += this.vx;
this.y += this.vy;
var elem = _("ball"+this.ind);
elem.style.left = this.x + 'px';
elem.style.top = this.y + 'px';
};
}
run();
I'm trying to make a Ball object for a JS game I'm making. The only problem is Google Chrome is giving me an error:
Uncaught TypeError: b.set is not a function
at update (ballgame.js:29)
update # ballgame.js:29
What am I doing wrong?
I don't know the complete requirement, but I found the cause for this issue.The problem is with the line
balls[this.ind] = this;
Assume for the first time the constructor is called with 'ind' value of 5. This will set balls[5]=this object. Now 'balls' array length becomes 6 and balls[0] through balls[4] will contain value as 'undefined'.
Now in 'update' method, when you iterate through balls array, as balls[0] through balls[4] are undefined, you get the error
Uncaught TypeError: b.set is not a function
Im trying to get a very simple inheritance pattern for my Project going, extending from a base class into a specialized class. However, my specialized class's attributes are being overwritten by the parent's attributes.
Why is that and how can i fix it ?
thanks,
function Ship(className, x, y){
this.className = className;
this.x = x;
this.y = y;
this.speed = 0;
}
function Corvette(className, x, y){
this.className = className;
this.x = x;
this.y = y;
this.speed = 100;
Ship.call(this, className, x, y)
}
Corvette.prototype = Object.create(Ship.prototype);
var ship = new Ship("Biggie", 50, 50);
var corvette = new Corvette("Smallish", 50, 50);
console.log(Corvette.className) // "Smallish" - correct via parameter.
console.log(Corvette.speed) // should be 100, is 0 - not correct, "static" from parent attribute
console.log(Corvette.constructor.name) // Ship
Why you have the same properties in the child object which are already in the parent's?
I suggest you to do
function Ship(className, x, y, speed = 0) {
this.className = className;
this.x = x;
this.y = y;
this.speed = speed;
}
function Corvette(className, x, y, speed = 100) {
Ship.call(this, className, x, y, speed);
}
Corvette.prototype = Object.create(Ship.prototype);
Corvette.prototype.constructor = Corvette;
var ship = new Ship("Biggie", 50, 50);
var corvette = new Corvette("Smallish", 50, 50);
console.log(corvette.className) // "Smallish" - correct via parameter.
console.log(corvette.speed) // should be 100, is 0 - not correct, "static" from parent attribute
console.log(corvette.constructor.name) // Ship
and if your browser supports some features of ES6 use this feature ES6 classes.
class Ship { // And also Ship is an abstractionm so you can use `abstract` keyword with it
constructor(className, x, y, speed = 0) {
this.className = className;
this.x = x;
this.y = y;
this.speed = speed;
}
}
class Corvette extends Ship {
constructor(className, x, y, speed = 100) {
super(className, x, y, speed);
}
}
var ship = new Ship("Biggie", 50, 50);
var corvette = new Corvette("Smallish", 50, 50);
console.log(corvette.className) // "Smallish" - correct via parameter.
console.log(corvette.speed) // should be 100, is 0 - not correct, "static" from parent attribute
console.log(corvette.constructor.name) // Ship
You only need to move Ship.call(this, className, x, y) at the start of Corvette function.
Also, next time, before posting code, check it is correct, you wrote console.log(Corvette) instead of console.log(corvette)
Another thing: you do not need to repeat params you do not want to overwrite
function Ship(className, x, y){
this.className = className;
this.x = x;
this.y = y;
this.speed = 0;
}
function Corvette(className, x, y){
Ship.call(this, className, x, y)
this.speed = 100;
}
Corvette.prototype = Object.create(Ship.prototype);
var ship = new Ship("Biggie", 50, 50);
var corvette = new Corvette("Smallish", 50, 50);
console.log(corvette.className)
console.log(corvette.speed)
console.log(corvette.constructor.name)
You should invoke the parentclass contructor first and then override the properties, this way the properties set by Corvette will not be changed by the parent class i.e.:
function Corvette(className, x, y){
Ship.call(this, className, x, y)
this.speed = 100;
}