# Changing stroke colour using recursion

**URL:** <https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951>\
**Category:** Coding Questions\
**Created:** [October 28, 2018, 1:09pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951 "2018-10-28T13:09:42Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![greg500](https://avatars.discourse-cdn.com/v4/letter/g/ed655f/32.png) [@greg500](https://discourse.processing.org/u/greg500)\
**Post date:** [October 28, 2018, 1:09pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/1 "2018-10-28T13:09:42Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 28, 2018, 3:20pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/2 "2018-10-28T15:20:33Z")

</div>

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

> **[reference | p5.js](https://p5js.org/reference/#/p5.Color)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> **[Array.prototype.map() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Return_value)**
>
> The map() method of Array instances creates
> a new array populated with the results of calling a provided function on
> every element in the calling array.

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

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

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

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

> **[reference | p5.js](https://p5js.org/reference/#/p5/color)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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

---

<div class="post-metadata">

**Author:** ![greg500](https://avatars.discourse-cdn.com/v4/letter/g/ed655f/32.png) [@greg500](https://discourse.processing.org/u/greg500)\
**Post date:** [October 28, 2018, 4:43pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/3 "2018-10-28T16:43:17Z")

</div>

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:

```auto
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();
      }

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 28, 2018, 6:20pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/4 "2018-10-28T18:20:51Z")

</div>

> [@greg500](#):
>
> `let right = new Branch(this.end, nextPoint,`

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

BtW, we can clone a p5.Vector via its **copy()** method: [reference | p5.js](http://p5js.org/reference/#/p5.Vector/copy)

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

---

<div class="post-metadata">

**Author:** ![greg500](https://avatars.discourse-cdn.com/v4/letter/g/ed655f/32.png) [@greg500](https://discourse.processing.org/u/greg500)\
**Post date:** [October 29, 2018, 1:43pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/5 "2018-10-29T13:43:08Z")

</div>

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:

> **[p5.js Web Editor](https://editor.p5js.org/grzegorz.kuguar@gmail.com/sketches/Syc1qQmnQ)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 29, 2018, 1:44pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/6 "2018-10-29T13:44:52Z")

</div>

Sorry, not good at trig stuff. =(

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [October 29, 2018, 11:26pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/7 "2018-10-29T23:26:38Z")

</div>

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:

> <https://stackoverflow.com/questions/53032145/changing-stroke-colour-using-recursion>

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [October 30, 2018, 5:23am UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/8 "2018-10-30T05:23:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [October 30, 2018, 4:48pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/9 "2018-10-30T16:48:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 1, 2018, 10:51pm UTC](https://discourse.processing.org/t/changing-stroke-colour-using-recursion/4951/10 "2018-11-01T22:51:38Z")

</div>

> [@dan850](#):
>
> @Kevin Does this explain why @greg500 posts are greyed out?

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.