I am struggling with the error of which throw me once I am trying to recursively change a colour. The error is: “Uncaught TypeError Cannot read property ‘map’ of undefined (sketch: line 18)” and reference to this piece of code: this.color.levels.map(x => x * 0.9).
I supposed that’s because of a recursive and problem with “this” context. The “right” function which I’ve created executing just one time until above error is thrown.
Any ideas how to make this work or how to recursively change the colour referencing to the same object which I’ve been created?
class Branch {
constructor(begin, end, strokeW, color, angle) {
this.begin = begin;
this.end = end;
this.angle = angle;
this.strokeW = strokeW;
this.color = color;
}
display() {
stroke(this.color);
strokeWeight(this.strokeW);
line(this.begin.x, this.begin.y, this.end.x, this.end.y);
}
right(angle) {
let direction = p5.Vector.sub(this.end, this.begin);
direction.rotate(angle);
let nextPoint = p5.Vector.add(direction, this.end);
let right = new Branch(this.end, nextPoint, this.strokeW*0.7, this.color.levels.map(x => x * 0.9)); //this line of code throw an error once I am trying to manipulate on the array
return right;
}
}
let tree = [];
let trunk;
let something; //just for check how looks like a p5.color object
function setup() {
createCanvas(400, 400);
background(20);
something = color(100, 230, 100);
console.log(something);
let x = createVector(width/2, height);
let y = createVector(width/2, height-100);
trunk = new Branch(x,y, 7, color(255,100, 100));
tree[0] = trunk;
tree.push(trunk);
}
function draw() {
for(let i = 0; i < tree.length; i++) {
tree[i].display();
}
}
function mousePressed(e) {
for(let i = tree.length-1; i >= 0; i--) {
tree.push(tree[i].right(Math.PI/4, 0.66));
}
}
Thanks a lot! Your pieces of advice are always very helpful. I am learning a lot. I was looking for a mistake in a completely different place.
If you don’t mind I have one more question regarding the same project. I am trying to use bezier curve instead of line in display function (I expect behaviour exactly the same), but when the right function rotates the bezier curve, then It’s changing the shape of bezier. It starts rotating from the different point (it should rotate from the same point what line was rotated). I don’t know that cause this behaviour. I thought that the middle points of bezier function will not affect on rotate function. How to cope with it?
This is a display function after replacing the line into bezier:
Thanks.
Unfortunately, the problem with the bezier is quite different. I didn’t explain this well.
Once I call the right function each step changing the shape of bezier (the curve is stronger).
This lines of code cause it: > direction.mult(length);
direction.rotate(angle);
I’ve tried to normalize the vector and after that multiply and rotate it but It dosesn’t work. I don’t know how to rid of this undesirable behaviour. This is a code:
There is a “hide” status on the one that is still greyed-out one, but no moderation history or edit history – I don’t see any attempts to delete or reversions – unlike the later post.
There isn’t even a system log, so I’m not sure what is going on, but I’m “unhiding” it.