This question already has answers here:
Loop (for each) over an array in JavaScript
(40 answers)
Closed 4 years ago.
So, i have the following code:
this.balls = [];
function setup() {
createCanvas(800, 800);
noStroke();
balls.push(new Ball(width / 2, height / 2, 20))
}
function draw() {
for (var ball in this.balls) {
ball.drawCircle();
}
}
this.Ball = function(x, y, r) {
console.log("Ball created");
this.x = x;
this.y = y;
this.r = r;
this.drawCircle = function (){
ellipse(x, y, r);
}
}
The problem is that i get the following error:
Uncaught TypeError: ball.drawCircle is not a function
at draw (sketch.js:12)
at e.d.redraw (p5.min.js:6)
at e.<anonymous> (p5.min.js:4)
at e.<anonymous> (p5.min.js:4)
at new e (p5.min.js:5)
at e (p5.min.js:4)
So it should call the drawcircle funtion for every ball in the balls array, however it says that drawCircle is not a function. The problem is that I just don't understand why. I have tried using var drawCircle instead of this.drawCirle, I also tried using funcion drawCircle.
Kind regards.
p.s. this code uses p5.js, the Ball created log is executed
Try using a class so you don't have issues with this context:
function Ball(x, y, r) {
console.log("Ball created");
this.x = x;
this.y = y;
this.r = r;
}
Ball.prototype.drawCircle = function() {
ellipse(x, y, r);
};
Or in ES6:
class Ball {
constructor(x, y, r) {
console.log("Ball created");
this.x = x;
this.y = y;
this.r = r;
}
drawCircle() {
ellipse(x, y, r);
}
}
Related
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) {};
Hey i'am writing a little object :
function Point(x, y) {
this.x = x;
this.y = y;
this.angle = Math.sqrt(x * x + y * y);
this.radius = Math.atan(y / x);
};
Point.prototype = {
constructor: Point,
calculateRadius: function(x, y) {
return Math.sqrt(x * x + y * y);
},
calculateAngle: function(x, y) {
return Math.atan(y / x);
},
cartToRad: function(x, y) {
this.radius = calculateRadius(x, y);
this.angle = calculateAngle(x, y);
}
};
var coords = new Point(0, 0);
coords.cartToRad(5, 0.523);
And that throw an error:
ReferenceError: calculateRadius is not defined.
Is it possible to use prototype functions in other prototype functions?
You need to reference them as properties of this, just like any other property.
I've been playing around with javascript for years, but I'm trying to get serious now. Studying, and into Objects.
I want to create a base object, and use it to create 2 other objects that are slightly different.
I thought this would work :
function movingObject(x, y, z){
this.x = x;
this.y = y;
this.z = z;
}
var positiveMover = new movingObject(x, y, z);
positiveMover.prototype.move = function(a, b){
yadda yadda
}
var negativeMover = new movingObject(x, y, z);
negativeMover.prototype.move = function(b, a){
adday adday
}
var pic = postiveMover(1, 2, 3);
pic.move(20, 10);
I get a undefined error on the move.....pretty sure I've got the wrong idea. Any advice would be appreciated - links to information, or the right keywords to google
I think it is more like two classes, that you want to build :
function movingObject(x, y, z){
this.x = x; this.y = y; this.z = z;
}
// positive mover : child class of movingObject
function positiveMover (x, y, z) {
// use parent class's constructor.
movingObject.apply(this,arguments);
};
// inherit parent's class.
positiveMover.prototype = Object.create(movingObject.prototype);
positiveMover.prototype.move = function(a, b){ yadda yadda }
However, if you seek a per-instance choice of a method, you could do :
function movingObject(x, y, z, movingMethod){
this.x = x; this.y = y; this.z = z;
this.move = movingMethod;
}
Or just set the move property of a moving object, thus overriding the default prototype :
function movingObject(x, y, z){
this.x = x; this.y = y; this.z = z;
}
movingObject.prototype.move= function(a,b) { /*some default code*/}
var oneMover = new movingObject(0,0,0);
oneMover.move = function(a,b) { /* some specific code */ };
Consider the following code:
function Coord(x, y) {
this.x = x;
this.y = y;
}
function Ellipse() {
this.Text = Text;
this.Cx = Cx;
this.Cy = Cy;
this.Rx = Rx;
this.Ry = Ry;
}
Now in the function Ellipseinstead of using Cx, Cy etc. I want to instantiate the function Coord for each pair to achieve something as follows:
function Coord(x, y) {
this.x = x;
this.y = y;
}
function Ellipse() {
this.Text = Text;
Coord C = new C(); // where C has its own properties x and y
Coord R = new R(); // where R has its own properties x and y
}
Try this:
function Coord(x, y) {
this.x = x;
this.y = y;
}
function Ellipse(text, cx, cy, rx, ry) {
this.text = text;
var c = new Coord(cx, cy);
var r = new Coord(rx, ry);
}
I don't know how you thought of Coord C = new C() but it's absolutely wrong. JavaScript variables have no types.
Also from where are you getting Text, Cx, Cy, etc? Shouldn't they be passed as arguments to the constructor?