Moving Fractal Tree Space colonisation according to hand position (posenet)

Hello! So I have this sketch that modifies Daniel Shiffman’s p5.js [Coding Challenge #17: Fractal Trees - Space Colonization ]. Using posenet, the leaves are generated by my left hand, and the root of the tree is generated on the right ( I eventually want to turn this into my right hand) The root grows to get the leaves.

Here is my sketch with a single tree.
https://editor.p5js.org/yuinjann/sketches/HAW1EsQrO

However, I want it so the whole tree, moves in the direction of the leaves (my hand), and the leaves are not stationary. ie, after the root reaches the leaves, it still can move. so the root value is constantly updating and can bend towards the position of the leaves, which is also updating and, which my left hand is controlling.

Here is an example of how it is right now: (so sorry for the bad drawing)

you can see the leaves generated by the hand at one end, and the root starting at the other. once the root reaches a leaf, it stops moving. However, I want the tree to be able to keep bending and move according to where the red hand and thus red leaves, are.

How might I do that? Is it changing the parent position each time? because a new branch is generated each time and stops when it reaches a leaf.

I made a version where the tree generates from my right hand,
https://editor.p5js.org/yuinjann/sketches/qPX57sbTC
but the past positions of the leaves are logged into an array, so its positions are not constantly updated, so it cant the direction of the whole tree.

I eventually want the tree to be generated from my right hand and the left hand controls the leaves and hence position of the roots of the trees. Let me know what I can do, thank you! Sorry if it’s so confusing.

1 Like

If I am understanding you right, I think that you want to update your tree branch locations using a reach / follow mechanic.

Look at these sketches for examples:

https://p5js.org/examples/interaction-follow-2.html
https://p5js.org/examples/interaction-follow-3.html
https://p5js.org/examples/interaction-reach-2.html
https://p5js.org/examples/interaction-reach-3.html

There you will see all the segments in the array updating.

ah perfect! thank you! :smiley: