Changing stroke colour using recursion

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?

My code: https://editor.p5js.org/grzegorz.kuguar@gmail.com/sketches/Syc1qQmnQ

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));
      }
      
}

The expression this.color.levels.map(x => x * 0.9) in Branch::right() evaluates as a new Array and not as a p5.Color: :roll_eyes:

p5js.org/reference/#/p5.Color

Seems to me you’re attempting to give the new derived Branch a new p5.Color based on the current Branch::color, right? :thinking:

So you should call color() passing the new Array returned by Array::map() as its argument: :nerd_face:

color( this.color.levels.map(x => x * 0.9) )

Since function color() is overloaded to accept an Array parameter too: :wink:

p5js.org/reference/#/p5/color

values Number[]: an array containing the red,green,blue & and alpha components of the color

1 Like

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:

display(angle) {
         stroke(this.color);
         strokeWeight(this.strokeW);
         noFill();
        beginShape();
            vertex();
                  bezierVertex( this.begin.x, this.begin.y, this.begin.x+15, this.begin.y/1.2, this.end.x-15, this.end.y/1.2, this.end.x, this.end.y);
 	      endShape();
      }

Seems like the new Branch instance is sharing the same p5.Vector object as the current Branch::end. :no_mouth:

BtW, we can clone a p5.Vector via its copy() method: p5js.org/reference/#/p5.Vector/copy

const right = new Branch(this.end.copy(), nextPoint,

1 Like

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:
https://editor.p5js.org/grzegorz.kuguar@gmail.com/sketches/Syc1qQmnQ

Sorry, not good at trig stuff. =(

Why have the posts in this thread been deleted?

If you’re going to post your question on multiple sites, please link between crossposts. This question has also been asked here:

2 Likes

@Kevin Does this explain why @greg500 posts are greyed out?

@dan850 Honestly I’m not sure. My guess is that @greg500 is trying to delete his own posts?

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.