Coding Challenge #15: Fractal Trees - Object Oriented The Coding Train English Spanish

Coding Challenge #15: Fractal Trees - Object OrientedYouTube↗ IA↗(long shot)
Education 169.2K views 2.8K likes 23 dislikes 30 May 2016

The Coding Train 1.8M subscribers United States YouTube↗

Hello welcome to another coding challenge

Hola y bienvenidos a otro reto de programación.

this one is a follow up on a Previous the previous fractal tree coding challenge one of the first things that people often ask me when they first see a fractal tree is

Esta es la continuación de un reto de programación anterior (Coding challange #14 Fractal trees – recursive). Una de las primeras cosas que me pregunta la gente cuando ven por la primera vez un árbol fractal es

oh I want it to grow from the bottom so how do you have it grow from the bottom this is also the same question as

¡Oh! Me gustaría hacerlo crecer desde abajo. ¿Y cómo podemos hacerlo que crezca desde la base?

Oh, I want to put leaves on it, and then have the leaves fall

También me dicen: me gustaría ponerle hojas, y después me gustaría hacerlas caer.

So while the fractal demonstration I did in the previous video is a good demonstration and a useful technique

Mientras que el árbol fractal del video anterior es una buena demostración, y una técnica útil,

you might need a different way of creating the tree to be able to do more types of animation like things with it and

es posible que necesiten una manera diferente de crear este árbol para poder crear varios tipos de animaciones.

that the way of doing that is [to] Rather than draw the tree all at once in a recursive function is to actually build the tree out of objects so what I need

I la manera de hacerlo es, en lugar de dibujar el árbol todo de una vez, utilizando una función recursiva, es utilizando objetos. Así que lo que necesito . . .

In the tree [that's] over here. I'll just use this as my reference is I want to create an object

voy a utilizar esto como referencia,

That's a branch object and the branch object only needs two things It needs a start point and an end point and a display function that just draws itself there

quiero crear un objeto que es una rama (branch). Y el objeto Branch necesita solo dos cosas: un punto inicial y un punto final, y una función que dibuje la rama.

So let's look and I'm going to build from the previous code and I'm going to just from scratch take the previous code which draws

Así que vamos a ver . . . voy a utilizar el código del ejemplo anterior, y desde cero,

This fractal tree and change it into something that uses an object object branch objects and an array

voy a coger este código que dibuja este árbol fractal, y lo voy a trasformar en algo que utiliza objetos, objetos rama y un array.

okay, so let me go back to the code and

Je, je, je . . . OK. Déjenme volver al código, y aquí estamos,

Here we are and the one of the first things. I'm going to do actually is just create a new Javascript file

y una de las primeras cosas que voy a hacer, voy a crear un nuevo archivo JavaScript.

I'm using the atom editor with the p5.js Javascript framework, but there's lots of different ways you could program this

Estoy utilizando el editor Atom y la librería p5.js, pero hay muchísimas maneras de programar esto.

And I'm going to say new file, and I'm going to call this new file Branch

Así que voy a "new file" (nuevo archivo) y voy a llamar este nuevo archivo branch.js

Dot [J/S]. And then I'm going to go into Index dot html and make sure I include a reference to

y a continuación voy a ir a index.html para añadir una referencia hacia branch.js.

Branch [J/S]. So now I have two Javascript files

Así que ahora tengo dos archivos JavaScript con los cuales trabajamos.

I can work with and what I'm going to do in branch is is I'm going to write a constructor function

Y en branch.js, voy a escribir una función constructora llamada Branch (rama).

Called Branch, and what Branch needs is when you create a branch. It needs a start and an end

Y cuando creamos una nueva rama (branch) necesitamos un punto de partida y un punto final.

There's actually different ways of doing this which we'll see later

De hecho hay varias maneras de hacerlo y lo vamos a ver un poco más tarde.

And I'm just going to call on I'm going to say this dot start equals start and this dot end equals end

Ahora solo voy a decir: this.start = start; (punto de partida) this.end = end; (punto donde acaba la rama).

So the first thing I need to do now start so one of the things that often happens which one of these is colored weirdly

Así que la primera cosa que voy a hacer a continuación ¡Uy! Esto pasa a menudo . . . ¿Cuál de estas tiene el color equivocado?

Start is so it looks like start is maybe a [keyword] in Javascript for something else

Parece que "start" es una palabra clave en JavaScript.

It shouldn't really here, but I'm just going to call this then beginning

Y aunque no debería importar, le voy a cambiar el nombre, y voy a decirle "begin" (inicio)

Begin and end just to kind of get get away from that okay

Begin (inicio) y end (final). Solo para dejar de preocuparnos por esto. Ok.

So that's the branch a branch object, and I know I could use like a some you were like watching this doing [oh], maybe you should use a [javascript] object literal and I could do that, too

Así que este es el objeto Branch. Ya se que algunos de vosotros que estáis mirando dicen: para tan poca cosa podrías haber utilizado un objeto literal.

But I'm kind of using this constructor function because I'm going to add more to it. You'll see hopefully later

Y sí, podría haberlo hecho, pero quiero utilizar esta función constructora, porque voy a añadir más cosas, y ya lo veréis más tarde,

well that's kind of a what another way of doing it that could be useful [so] I'm going to go back to the code and right here when I first call this branch function

y también porque es otra manera de hacer las cosas que podría ser útil. Así que voy a volver al código (sketch.js) y exactamente aquí, donde llamo la función branch

What happened in the in the first program is I translate to the bottom call the branch function which draws a line, but instead?

Lo que pasa en el primer programa es que traslada (el contexto) a la base y después llama la función branch, que dibuja una línea.

What I want to do is say

Pero ahora, en lugar de esto quiero . . .

I'm going to make a I'm going to make something called or I'm going to make a variable [called] root

voy a hacer una nueva variable llamada root,

Which is the root of the tree and I'm going to say it's a new branch which goes from where?

que representa la raíz del árbol, y voy a escribir: var root = new Branch(

the center of the screen with divided by two to

y esta nueva rama ( la raíz) va desde el centro de la pantalla: width/2,

Where like the width divided by two height? [oh], so?

¿hasta donde? . . . (width/2, height). . .

So I'm doing stuff and just programming and like I got lost in my thoughts for a second. You know what I really need is

¡Oh! Así que estoy haciendo cosas y estoy programando, y parece que me he perdido en mis propios pensamientos, y de hecho lo que realmente necesito es . . .

Interestingly enough let's go back and look at this

curiosamente . . . Volvamos al código (branch.js) y miren . . . Dije que . . .

I said oh, there's just two things involved in this branch a beginning and an end

¡Oh! Hay solo dos cosas en este objeto: un inicio (begin) y un final (end).

but what are those things the beginning and the end those things are points with an x and a [y] and

¿Pero que son estas cosas? Estas dos cosas son puntos con un x y un y

One way that [I] can store a point in A in P5.js is using a vector

y una manera de guardar un punto en p5.js es

Object a P5 vector object which is an object that has its own x and a y

utilizando un vector. Los vectores en p5.js son objetos que tienen sus coordenadas en x e y.

So what I'm actually going to do is I'm going to say I'm going to be very long-winded About this just to be quite explicit and say a equals create vector, and I'm going to make a vector That's at the bottom of the window

Así que voy a ser tortuoso e interminable, solo para ser explicito Y voy a decir: var a = createVector(width/2, height), y esto crea un vector a la base de la ventana.

With divided by 2 comma height and then I'm going to say B Is a vector that?

width/2, height Y después var b = createVector(width/2, height - 100)

is also in the middle but not at the bottom it's at the bottom [minus] this length, or [100-100] and then I'm going to make a branch Which is goes from a to b?

crea otro vector, también en el medio, pero no a la base, sino a la base menos esta longitud (100). Y después voy a crear una nueva rama que va desde a hasta b [ var root = new Branch(a,b); ]

And then what I want to do actually don't need this whole recursive function anymore

y después . . . de hecho ya no necesito esta función recursiva,

And oh this should be in [setup] by the way, and I'm going to I'm going to get rid of this slider We can come using a slider later

y por cierto tengo que poner esta cosa en setup(), y voy a deshacerme del slider (control deslizante), aunque podría volver a utilizar un slider más tarde. . .

Because I'm starting from scratch and in draw. I'm Gonna say root

porque estoy empezando desde cero. Y en la función draw voy a poner root.show(),

Dot show what I want to do is take that. Oh, and this should [this] needs to be a global variable

y lo que quiero hacer es tomar aquella . . . . ¡Oh! Y esto (var root) tiene que ser una variable global.

So what I'm trying to demonstrate right now is I can make a single branch object

Así que lo que quiero demostrar en este momento es como hacer un solo objeto branch (rama),

which is just the root of the tree and I can display that root and so I need a function called show and

que en este caso es la raíz del árbol, y poder dibujarla. Así que necesito una función llamada show (mostrar),

So I'm going to add a function called show and all that show does is

y voy a añadir esta función (a la constructora Branch). La función show dibuja una línea (line) de color blanco ( stroke(255))

stroke 255 draw a line from this stop beginning dot x this stuff beginning dot y to this end x This N

desde this.begin.x, this.begin.y hasta this.end.x, this.end.y.

Dot y, so you're going to see here that a branch Sorry a branch is just an object that has a beginning and an end point

Así que podéis ver que una rama no es nada más que un objeto que tiene un punto inicial y un punto final,

And it's displayed as a line between those two points so now if I come back to [here] and run this again

y aparece dibujada como una línea entre los dos puntos. Así que vuelvo aquí y lo ejecuto de nuevo,

You can see there's our first print. So we kind of double back. We're doing the same thing We did before but in a different way, [okay]?

ya lo podéis ver: aquí está nuestra primera rama. Así que volvemos hacia atrás para hacer la misma cosa que antes, sólo que de manera diferente.

So let's think about now now. Here's the thing what I need is For every Branch to spawn two branch objects attached to it hmm

OK Pensemos un poco . . . La cosa está así: para cada rama necesito generar dos ramas más que salen de esta.

How are we going to do that so one thing?

¿Y cómo vamos a hacerlo?

I need actually is I going to have more than one branch

Así que una cosa que voy a necesitar . . . voy a tener más de una rama, así que voy a necesitar un array.

So I need an array so I can what what the tree essentially is I? Don't need this root anymore. I'm going to say I'm going to make a variable [called] tree and tree is just an Array, so it's an empty array, and then this root is

Porque básicamente el árbol es un array. Y ya no necesito esta variable root (raíz) aquí, y voy a hacer otra variable llamada tree (árbol), y var tree es un array, o sea, un array vacío.

the first thing that goes in the tree and then

Y después esta raíz (root) es el primer elemento del array tree, y después . . .

And I know that camera just went off while in the middle of my typing. I'm going to put it back on

ya lo se, aquella cámara se ha apagado, mientras que yo aquí estoy tecleando . . . y la voy a poner de nuevo en marcha

in the middle of what I'm going to do is then draw All of the trees so now my structure is I have an empty array. I create the root of the tree I

Voy a dibujar todos (los elementos del) array tree. En este momento esta es la estructura base: tengo un array vacío, he creado la raíz del árbol,

Put the root in the array, and then I display the array and once again. Oh, but by missing a curly bracket

y la he puesto en el array, y después dibujo todos los elementos del array, y de nuevo . . . ¡Ah! Me he olvidado una llave ( { )

Once again, [I] still have that one root now

. . . y de nuevo . . . tengo la raíz dibujada.

Now comes the time where I can attach to that root two more branches, so how can I do that?

Ahora ha llegado el momento de ramificar la raíz y crear dos ramas más. ¿Y cómo puedo hacerlo?

Well one way that I could do that would be to add a function this branch object What is this branch object how to function within itself that would new where its end is and new how to spawn two more? Branches from that end so let's look at that, so I'm going to go back to this branch object

Un modo de hacerlo es añadir una función dentro del objeto Branch que supiera donde acaba la rama y ramificarla. Veamos esto con mas detalle. Así que voy a volver aquí donde tengo el objeto Branch

And I'm going to write a function called And I'm actually just going to call it a branch [I]

y voy a escribir una función llamada . . . la voy a llamar branch.

Don't know if I have a naming conflict anywhere

Y espero que no haya ningún conflicto de nombres.

I'm going to write a function called Branch and what that function is going to do is it is going to create? two additional branch objects attached to this branch object so how do I do that so

Así que voy a escribir una función llamada branch, y esta función va a crear otras dos ramas que salen de esta rama. ¿Y cómo puedo hacerlo?

So I'm going to call it the right branch is a new branch I

La rama de la derecha var right = new Branch(this.begin

hear voices [somebody] might be coming Who knows? There's something there. [I] don't know I lost my I started think about west side story one of my favorite musicals

. . . Escucho voces . . . "Algo que viene, no se lo que es. . ." Es algo de West Side Story – uno de mis musicales favoritos.

Simply people here hurt and I lost my train of thought okay. I need to make a branch ah so where does the Let's think about. I need a diagram. Let me come over here okay, so if I erase this diagram

He escuchado voces y he perdido el hilo. . . ¡Ok! necesito hacer una rama. Donde está . . . ¡Pensémoslo! Necesito una diagrama. Vengan aquí. Así que si borro esto . . .

How am I doing this I have?

Veamos cómo hacerlo. . . Tengo esta rama . . .

This branch this is begin

Este es el punto donde empieza (begin) y este es el punto donde acaba (end).

This is end. Now. I need a new branch, so this new Branch [its] begin point is the previous end point and

Ahora necesito una nueva rama. Y esta nueva rama empieza (su punto begin) donde acaba la rama anterior (su punto end).

Now and then I need to calculate. Where is it new? [where] is its new end point and the way that I might do [that] is by? Rotating this line, so I'm going to need to use some trigonometry in math for that, okay. We're going to get there

Y necesito calcular el punto end de esta nueva rama. Y una manera de hacerlo es girando esta línea, así que necesito utilizar algo de trigonometría y matemática. ¡Ya llegaremos allí! ¡Ya llegaremos allí!

We're gonna get there boy. This is hard to do without having just done it You know like just to do this from scratch on the fly okay, [okay]? So let's see new Branch

Esto es algo difícil de hacer, sin haberlo preparado. Hacerlo así desde cero. Ok, vamos a ver. Así que nueva rama (new Branch).

so what I want to do is the new branch is going to start at the previous branches end and

La nueva rama empieza donde acaba la anterior.

Now I need to fill in where it ends. So how can I do that?

Y ahora tengo que decir donde acaba.

well one thing I can do is I can make [a] vector that [is] the direction of This particular branch right? I need it. What if I have a vector that? points

¿Y cómo puedo hacerlo? Una cosa que puedo hacer es crear un vector que representa la dirección de esta segunda rama. Imaginemos un vector que va de aquí allá.

From here to there a vector being an arrow That points from here to there and the way that I can make that vector is by taking this point and subtracting this point

El vector siendo esta flecha que va de aquí allá Y una manera de crear este vector es restando este punto de este punto.

So I want to create a direction vector and say [P5] dot vector. Dot subtract. I want to

Conque quiero crear un vector dir (dirección) var dir = p5.Vector.sub()

subtract the [end] from the beginning

y quiero restar el punto end del punto begin. [ var dir = p5.Vector.sub(this.end,this.begin);]

so now I have a vector that points from the bottom to the top of that branch and

Así que ahora tengo un vector que va desde el inicio hasta el final de esta rama.

One of the nice things about vectors is they actually have a rotate function built it to them

Y una de las cosas agradables acerca de los vectores, es que son objetos que tienen una función rotate (girar)

So what if I were to [rotate] that vector by some angle like? 45 Degrees or Pi Divided by 4 and

Así que podría girarlo unos 45º o sea PI / 4,

Then what if I were to? create a new Endpoint new end, and I would say the new end point is where it is add

y después puedo crear un nuevo punto final: var newEnd, Y ¿en donde pongo este newEnd? Lo puedo crear sumando (add) el punto final (end) del vector anterior con la dirección (dir).

the Endpoint of the Previous vector with the Direction

So in other words what I'm saying is we come back over here again [is] I?

Así que en otras palabras lo que estoy diciendo es . . . Volvamos de nuevo aquí.

Now have this vector wrong wrong side of this pen

Tengo este vector . . . ¡el lado equivocado del rotulador !

[I] now have this vector ok and then what I want to do is take this vector and rotate it By 45 degrees and then I want to add this vector here

Así que ahora tengo este vector ¿Vale? Y a continuación lo estoy girando 45º. Y ahora lo quiero sumar aquí.

So this is the new [endpoint], so this is the beginning and this is the [endpoint] and that's my branch so now I Can say the new Branch goes from this dot end to the new end. That's to the right?

Así que este es el nuevo punto final newEnd. Este de aquí es el inicio, y este el final, y esta es mi rama. Así que ahora puedo escribir var right = new Branch(this.end, newEnd). Esta es la rama que va hacia la derecha.

Okay, so let's see how this works, so let me now go back to the main program, and I'm going [to] say I'm going [to] say a new branch equals root, Branch [oh]

Veamos cómo funciona. Dejadme volver a sketch.js, y voy a añadir: var newBranch = root.branch();

What am I I need to do something? So once I have that?

Pero antes necesito hacer algo más (en branch.js).

new Branch [I] need to return [it], so [I] need to return [it] so that I can get it and

Una vez creada esta nueva rama (var right) tengo que devolverla (return), para que sea accesible.

And then what I can do is say tree index 1

I después (de nuevo en sketch.js) puedo decir tree[1] = newBranch;

equals New Branch so the zero index of the array is the root and then the next spot in the array is this new Branch that came out of the root

Recapitulemos: tree[0] es la raíz (root) y después la siguiente posición en el array es esta nueva rama que sale de la raíz.

Perfect look now. I have both of those now. I could probably cleverly Create both of them in this function, and then return both of them as an array and then add both of them

¡Perfecto! Ahora tengo dos ramas. Probablemente habría podido ingeniosamente crear dos ramas en esta función, después devolver las dos ramas como un array . . .

But I'm actually just going to do. I'm just going to call this function branch a

en cambio lo que voy a hacer, voy a llamar este función branchA,

I'm gonna do something kind of lazy and just make a function Branch B

y voy a hacer una cosa de vagos y voy a crear otra función branchB

And rotate the other direction, and you know I'm just going to call this v or b

que gira en el sentido contrario (-45º) Y voy a llamar esto v o mejor b.

this is to the right and

Esta va hacia la derecha . . y esta otra hacia la izquierda.

This is to the left, so I'm just going to have to again. You know good programming exercise for you It is like how can you combine this into one function?

Así que voy a tener dos. . . Un ejercicio de programación para vosotros sería probar a combinar estas dos funciones en una sola

Maybe you just pass in the angle, but just to be lazy and explicit for a second I'm just going to have these duplicate functions

a lo mejor utilizando el ángulo como argumento. Pero por pereza y claridad voy a tener estas dos funciones,

the only thing is different is one is rotating to the right one is rotating to the [left] and

con la única diferencia que una gira hacia la derecha, y la otra hacia la izquierda.

I can go back. Sorry I can go back to the main program and

Ahora volviendo al programa principal (sketch.js),

I can say branch a and

voy a cambiar esto por branchA.

I'm actually just going to combine this a tree index one is branch a and

De hecho voy a combinarlos y voy a poner tree[1] = root.branchA();

Tree Index 2 is Root Branch B

tree[2] = root.branchB();

So now you can see this particular branch has two branches attached to it. Okay things are going well now

Y ahora podéis ver que esta rama tiene dos ramas. ¡Fantástico! Todo va de maravilla.

Now one thing that I want to do is remember. I want to shrink the branches each time they're attached

Otra cosa que quiero hacer, si os recordáis, quiero reducir el tamaño de las ramas en cada nuevo nivel.

So let's go back into this function here

Así que voy a ir aquí, en esta función.

this Direction vector should also be multiplied by 0.67 in

Y voy a multiplicar el vector dir (dirección) por 0.67

Order to Shrink it a little bit

para hacerlo más pequeño

And now you can see that it is now Shrunk

Y ahora podéis ver que estas dos ramas son más pequeñas.

So what I have now [is] I create a single branch object and it spawns to other branches

Lo que tengo en este momento es una única rama (objeto branch) que tiene dos ramas vinculadas.

I need a mechanism for then having those two other branches spawn two more branches and two more branches

Ahora lo que necesito es un mecanismo para que estas dos ramas tengan, a su turno, dos ramas más, y dos más

And maybe what I'll do is every time [I] click the mouse

Y creo que lo que haré . . haré que cada vez que hago clic con el ratón,

I add two more branches, so let's figure out how we would do that

de cada rama surjan dos ramas más. Así que ¡averigüemos cómo hacerlo!

So let me go to sketch, and I'm going to take this out, and I'm just going to say Function mousepressed global and and put this here so in mouse press them and add those two branches

Déjenme volver a sketch.js y voy a cortar todo esto. Y voy a crear una nueva función mousePressed() y voy a pegar esto aquí.

Conque pongo las dos ramas en mousePressed().

So now two branches click the mouse [o] root is not defined

Así que si hago clic con el ratón ¡Oh! "root is not defined" (la variable root no está definida).

So I'm going to say tree the thing that's global is the array

Así que aquí voy a poner tree[0] porque root no es una variable global; tree sí que lo es.

Tree Index 0 tree index 0 so I'm going to add those two branches

tree[0], tree[0] así que voy a añadir las dos ramas.

And now I'm Gonna Click the mouse

Y ahora si hago clic con el ratón . . . dos ramas más.

Two branches there we go [ok] so I'm getting somewhere. I'm getting somewhere now

¡Allí vamos! Realmente ¡estamos avanzando!

I have this ability to take an existing element of the array and add to it

En este momento tengo la posibilidad de tomar un elemento del array y añadir dos elementos más.

So what I really want to do is not do it manually like this, but what I want to say is hey Anything that's in [the] array

Pero lo que realmente quiero hacer es en lugar de hacerlo así a mano, quiero decir ¡oiga! Para cada elemento del array . . .

There are some number of branches in the array

hay un cierto numero de ramas en el array (tree.length)

What I want to do for everything that's in the array I want to tree at so one way to add something to raise with the push function. I want to add Tree Index Index I branch a

y lo que quiero hacer es para cada cosa que hay en el array, quiero añadir . . y una forma de añadir elementos a un array es utilizando el método push: [ tree.push() ] Quiero añadir tree.push( tree[ i ].branchA() );

and Tree Index I branch B. So this is now an

y tree.push( tree[ i ].branchB() ); y ya tengo un método automático de decir

automatic way of saying whatever is in the array currently go through everything in the array and add to the array with branches from the

que fuera lo que fuera dentro del array, para cada elemento del array, y añada dos elementos más al array.

Things that are the [Iraq] now there are some problems here problem number one is

Ahora bien, aquí hay unas cuantas problemas. El problema no 1 es:

If [I'm] trying to loop through an array like I'm looping here

mientras que estoy recorriendo el array . . .

So here's the beginning of the right here's the event end of the array and I'm looping through it

digamos que aquí empieza y aquí acaba el array Y lo estoy recorriendo, y estoy añadiendo cosas (al final del array).

And I'm adding things to it so as I'm going through the array the array is growing

Así que mientras que lo estoy recorriendo, el array está creciendo,

I'm never going to get to the end

y no voy a llegar nunca al final.

so one way to solve this would be to say to actually start from the end of the array and

Y una manera de solucionarlo sería empezar desde el final del array

go down to 0

y retroceder hacia (el elemento índex) 0

This way I can add things to the like I'm going backwards through the array and new things can get added to the end that

De esta manera puedo añadir cosas porque voy hacia atrás mientras que estoy incorporando nuevos elementos al final del array

Will then get ignored so this should actually work and I'm going to run this

y por lo tanto estos elementos serán ignorados. Así que esto tendría que funcionar.

you can see I can click and then I can click and then I can click and then I can click so that's

Voy a ejecutarlo y podéis ver que puedo hacer clic y hacer clic y hacer clic.

Actually happening now each time I click

Esto ya pasa cada vez que hago clic,

Everything that's in the array gets two extra branches, but one thing that you might not be noticing here

todos los elementos que hay en el array generan dos ramas más. Pero hay algo más y es posible que no lo habéis notado

is that This particular [root] has been there every single cycle

y esto es que esta raíz estuvo en el array en todas y cada una de estas etapas.

So every time I go through that or [right] it gets to new branches

Así que cada vez que vuelvo a recorrer el array la raíz genera dos ramas más.

So there are multiple multiple new branches being added over and over again in the same spot

Así que hay múltiples ramas que salen continuamente del mismo punto,

Which is very unnecessary [so] one thing that I [think] would be useful to do is in the branch object I?

y esto es totalmente innecesario. Así que podemos hacer una cosa: en el objeto Branch

Could add a variable like I'm Gonna call it grown or finish

puedo añadir una variable this.grown

I'll just call it finished, and it's going to finish it's going to be false [and]

o mejor la llamo this.finished (acabado) y this.finished = false

In the branched function you know let's say. I'm just [going] to say this dot finished

Y dentro de las funciones branch voy a poner this.finished = true;

equals true, so whenever And you know maybe I'm going to actually I since I have this branch a and Branch B

Y ¿sabes que? Como que tengo branchA y branchB voy a ponerlo aquí fuera (en mousePressed).

I'm just going to do it out [here], so I'm going to say a tree index. I dot finished equals true

Así que voy a decir tree[ i ].finished = true;

So [what] I'm going to do is every time a tree? Branches I'm going to say finished is true, and then I want to make [sure] if it's if tree index [I've] finished Only if tree Index the tree is not finished Should I actually add those branches so now?

O sea: cada vez que se ramifica voy a decir tree[ i ].finished = true; Y después, solo si no esta acabada [ if(!tree[i].finished) ], voy a añadir aquellas dos ramas más. Y ahora podéis ver que cada vez que hago clic con el ratón estoy añadiendo nuevas ramas.

You can see every time [I] click the mouse. I'm adding branches now this might [not] seem very exciting to you

Ahora bien, esto puede no pareceros tan emocionante,

Because ultimately [all] [I] have here is exactly what I had before

porque en definitiva lo que tengo aquí es exactamente lo que tuve antes.

But [the] difference is I actually have an array of objects and all of those objects Store their location dynamically where they are so there's no reason why I couldn't do weird things like

Pero la diferencia es que ahora tengo un array de objetos. Y todos aquello objetos tienen almacenada su posición de manera dinámica. Así que no existe razón alguna que me impida hacer cosas insólitas como . . .

In the branch function in in in branch. I could say I'm going to write a function called Jitter and

En la función Branch puedo crear una función llamada jitter (temblor)

I'm going to say this dot n. Dot x plus equal Random Negative 1 1 this n. Dot y plus equal random negative 1

y voy a decir: this.end.x +=random(-1,1); this.end.y +=random(-1,1);

one one so one thing I'm going to do is I'm going to add this jitter function in Draw and

Y ahora puedo llamar la función jitter en draw().

I'm going to say tree show and Tree Index eye jitter

Y después de tree[i].show() voy a poner tree[i].jitter();

So now if I run this you can see look at this. It's animating and as I click Those are all animating and shaking and doing weird random things, so I'm not suggesting. This is like a great result

Y ahora si vuelvo a ejecutarlo, ¡fíjense! Se esta moviendo. Y mientras que estoy haciendo clic las ramas se mueven y se agitan al azar. No quiero sugerir que este es un gran resultado.

Because I don't know what I have here. I have this random shaking weird tree

Porque no se lo que tengo aquí. Este no es nada mas que un árbol raro que se agita y se mueve al azar.

But you could imagine what if you did something a bit more thoughtful?

Pero imaginados: podéis pensarlo más y venir con algo más sesudo,

You were changing colors based on some logic, or maybe you were swaying with perlin noise

por ejemplo podéis cambiar colores en base a una cierta lógica, o podéis moverlo con ruido Perlin,

Or you applied some spring forces or a physics based system to the tree boy?

o podéis utilizar fuerzas elásticas u otro tipo de fuerzas.

I really wanted somebody remind me [someday]

¡Madre mia! Realmente me gustaría que alguien me lo recordara algún día,

To do a video where we take this tree and actually attach spring forces to all of it

que haga un video donde cojo este árbol y lo conecto con resortes,

So it can you could sort of like pull on it and just goes blue

y si tiro de una branca, todo empieza a temblar,

You know all [Springy] back into place or something that's always a nice [demonstration]

para que después vuelva de nuevo en su sitio, o cosas por el estilo.

So this opens up a lot of possibilities it also opens up one last possibility that I want to show you in this particular video

Y esto abre un montón de posibilidades, y una en particular que me gustaría demostrar a continuación.

So I'm going to turn off the jittering and what I'm going to do is I am going to say I'm going to keep track of a counter and I'm going to just every time I'm Going to say a count plus plus and what I want to do is say if count

Así que voy a comentar lo de jitter (temblor) y lo que voy a hacer voy a poner en marcha un contador [ var count = 0; ] y cada vez que el ratón es presionado (la función mousePressed) voy a decir count ++;

Equals equals five so if I've generated five generations of the tree what I want to do is say for

y si count es igual a 5 [ if(count ===5)], o sea: si ya he generado 5 niveles en el árbol lo que quiero hacer . . .

Var I equals zero I is less than tree length I plus plus

for( var i = 0, i < tree.length; i++){

What I want to do is I'm going to make a I'm going to make leaf objects, so I want to create an array called leaves and

lo que voy a hacer, voy a hacer objetos hojas. Y voy a crear un array llamado leaves (hojas)

then what I'm going to do is say for all of those last branches if

Y lo que voy a decir es: para todas las ramas del último nivel, [ count === 5 ],

The and when I get to five any branch that hasn't branches at the end what I want to do is

en cuanto llego a 5 si las ramas no están ramificadas [ if (!tree[ i ].finished)] quiero crear una hoja (var leaf).

Make a leaf

var leaf = createVector()

Where do I want to make that leaf? [I] want to make the leaf at that [branch's] end? point

¿Y donde quiero poner aquella hoja? Quiero ponerla al final de cada rama [ tree[ i ].end ].

[and] You know what? I don't even need to say create vector because it is a vector tree index. I dot and

¿Y sabes que? Ni tan solo no necesito crear un vector porque ya lo es. var leaf = tree[ i ].end.copy();

Dot copy so I want to go and grab that end point of that branch and make a copy of it

así que aprovecho el punto final de aquella rama, y hago una copia

And then [I'm] going to say leaves dot push that leaf

Y después voy a decir leaves.push(leaf).

So now in draw I can also Loop through all [of] the leaves

Y ahora en draw puedo recorrer el array de la hojas (leaves),

and I can say now I could make [loot]. I should make the leafs an object the leaves the [leat]. I'm going to make some purplish

y tendría que haber hecho un objeto hoja. Así que voy a hacer unas hojas moradas

leaves And I'm going to just make them circles. You can be more creative [Top] y

y las voy a dibujar como círculos [ ellipse(leaves[i].x, leaves[i].y, 8, 8); ]. Vosotros podéis ser más creativos. [ ellipse(leaves[i].x, leaves[i].y, 8, 8); ]

So we should get now let's run this

Y creo que ya lo tenemos. Vamos a ejecutarlo

Everyone to like zero [weight] one two three four five so you see [like]

0, 1, 2, 3, 4, 5 . . ja, ja, ja.

So let's do a couple things

Hagamos algo más.

One is let's make that angle where did I decide what the angle is the [angle] is right here?

Aquel ángulo . . . ¿Donde habré decidido el valor de aquel ángulo?

It's kind of like hard-coded in so this by the way would be nice to make a variable

El ángulo está aquí. Y es de codificación fija. Esto sería interesante transformarlo en una variable, y podría ser ligeramente aleatoria,

Maybe it could be slightly random that could be the thing that's changing, but oh

, y esta podría ser aquella cosa que cambia.

and I did something interesting so I for some reason I'm going a different angle to each side which is kind of nice and

¡Oh! Acabo de hacer algo interesante. Por alguna razón tengo un ángulo diferente de un lado y de otro, que es una cosa algo así como simpática. . .

Let's go in sketch. Let's actually go up to six levels and

En sketch.js podemos generar hasta 6 niveles [ count === 6 ],

let's Let's say no stroke for the leaves and give it some alpha also

y vamos a poner noStroke (sin trazado) y dar algo de transparencia (alpha) a las hojas.

So you can see I now have little leaves at the end of the tree and what's exciting about

Y ahora podeis ver que tengo hojitas a las puntas del árbol,

This is they aren't just circles on the screen those are all vector objects and what I could actually do if you go look at

y lo más interesante es que no son solo círculos en la pantalla, sino vectores objetos. Y lo que puedo hacer

Any of my other nature of code tutorials?

si miráis cualquier otro de mis tutoriales de "Nature of Code"

I could treat those as particles that would fall with the wind or something like that and just to sort of show very very briefly What I could do right now

podría tratarlas como si fueran partículas, que se caen con el viento, o algo así. Y os lo puedo enseñar en una sola línea de código

Is I could move all the leaves by some random amount in

puedo mover todas las hojas dándolas una velocidad aleatoria en el y.

the Y-Direction So once I get up to six you can see they're falling now again

Así que en cuanto llegamos a 6, las hojas se caen

I have made a really trivial Whoops this is a trivial result

Ahora bien, este es un ejemplo banal y con un resultado trivial.

You know I don't I don't like necessarily that that That doesn't look like a very nice Glowing beautiful physics movement, but you in thinking about color and thinking about motion all sorts of possibilities

Esta no es una demostración maravillosa y brillante, Pero vosotros podéis pensar en términos de color o de movimiento, y hay muchísimas posibilidades

You could have the branches be swaying you could have a gust of wind some of the leaves fall some don't what if you have?

podéis hacer que las ramas tengan un movimiento, o podéis simular una ráfaga de viento, algunas de las hojas se caen y otras no

A program where you shake the tree and the leaves fall off

o podéis escribir un programa en el cual estáis sacudiendo el árbol,

And they don't all fall off at the same time all

y las hojas se caen, pero no en el mismo momento.

The possibilities are now open to you because the the fractal wasn't drawn through a single recursive function

Todas las posibilidades están abiertas porque el fractal no fue dibujado utilizando una única función recursiva

But rather was drawn as a set of objects with position vectors so all of those things could be manipulated after the fact

sino como un conjunto de objetos, y utilizando vectores de posición , y de esta manera todas aquellas cosas pueden ser manipuladas ulteriormente.

Thanks for watching this video. If you make something with this, please let me know and I'll [see] you in the next one

Gracias por mirar este video, y si hacéis algo con esto os ruego que me lo hagáis saber, y os veo en el siguiente video.