Coding Challenge #14: Fractal Trees - Recursive The Coding Train Spanish English

Coding Challenge #14: Fractal Trees - RecursiveYouTube↗ IA↗(long shot)
Education 793.5K views 14.7K likes 205 dislikes 30 May 2016 Show Contributors 1

The Coding Train 1.8M subscribers United States YouTube↗

Contributed subtitles

English TechJockeyHD

Click to Play Video

Hola y bienvenidos a un nuevo reto de programación.

Hello welcome to another coding challenge in this coding challenge

En este reto de programación voy a construir partiendo desde cero, en JavaScript un árbol fractal,

[I] am going to build from Scratch in Javascript a fractal tree

y lo voy hacer, ya sabéis,. . . una vez lo hemos programado esto, una vez acabado este vídeo,

And I'm gonna do kind of you know you can see once we've made once this video is over

una vez que hayamos hecho un primer ejemplo,

And I've made one example of it

podéis ver aquí toda una variedad de imágenes de cosas que podréis crear.

You can see sort of variety of images here of things you might be able to make from it

También vais a ver que hay varios vídeos a continuación de este, que enseñan otras técnicas para generar árboles, pero de manera distinta.

And you'll also see that there are [a] few different follow up videos after this one that show other techniques for generating trees in different

Empecemos, pero primero déjenme dibujar una diagrama, para que podamos entender lo que pasa.

ways but let's just get started first by let me just draw you a diagram to sort of so that we can kind of understand what's

La idea central de un árbol es una definición recursiva.

Going on so the core idea of a fractal tree is we have a recursive definition

Pero ¿que es una definición recursiva? Una definición recursiva es algo definido en base a su propia definición.

So what is a recursive definition a recursive definition is something that's defined in terms of itself

De hecho en matemática hay una función conocida cómo función factorial.

And actually [there's] a math function which is known as

Cuatro factorial ( 4! ) es igual a 4 * 3 * 2 * 1; 10! = 10 * 9 * 8 * 7 * 6 * 5 * 4 * 3 * 2 * 1;

Factorial 4 Factorial Equals 4 times 3 times 2 times 1 you know 10 factorial equals 10 times 9 times 8 times 7 times 6 times 5 times?

Tres factorial ( 3! ) es igual a 3 * 2 * 1; O sea: podemos decir que 4! = 4 * 3!

4 feet I 1 now 3 factorial is equal to 3 Times 2 times 1 so you could actually say that 4 factorial is equal to 4 times 3 factorial or

O que cualquier número factorial n! = n * ( n – 1 )! Y esta es una definición recursiva.

That any number n. Factorial is equal to itself times n minus 1 factorial and this is a recursive definition

Estoy definiendo factorial en base a su propia definición. Parece algo que no debería estar permitido, pero lo es. De hecho se nos anima a hacerlo.

I'm defining factorial in terms of itself which seems like something you shouldn't be allowed to do but it is something you are allowed to do in fact you're encouraged to do and all even though you might send us get a

I aunque esto nos puede dar un terrible dolor de cabeza, toda clase de cosas maravillosas, bonitas, elegantes, pueden surgir de estas definiciones recursivas. Entre las cuales son los árboles fractales.

Headache all Sorts of wonderful, beautiful, elegant things can arise out of recursive definitions one of which being

Ok, de vuelta aquí. Esto fue completamente innecesario, pero lo he hecho de toda manera.

Fractal Trees [ok] back over here that was completely unnecessary, but I did it anyway, [so] what is the recursive depth?

Así que ¿qué es una definición recursiva? Estas son cosas de matemática y unos cuantos números, pero

This is like some math stuff and some numbers

¿qué quiere decir tener algo que es visualmente definido de manera recursiva? Bueno, tenemos este concepto de rama.

[look], what does it mean to have something that's visual defined recursively. [well] we have this idea of a branch

Voy a decir que una rama tiene un punto inicial y un punto final, y por definición tiene dos ramas.

So I'm going to say a branch is a beginning and end point and it is defined as having two branches attached

Probablemente no lo podéis leer, pero no tiene importancia. Dice: una rama se define como una línea que tiene dos ramas.

You probably can't read [that] doesn't really matter this says branch is defined as a line that has two branches attached

Así. Déjenme que lo dibuje aquí. Esta es una rama y tiene dos ramas.

Like this, so let me draw that over here. This is a branch and as two branches attached

¡Oh! Pero estas también son ramas y cada una tiene dos ramas.

Oh, but these are also branches, so they have two branches attached

¡Oh! Pero estas también son ramas y cada una tiene dos ramas.

[oh], and these are all also branches, so they have two branches attached

¡Oh! Pero estas también son ramas y cada una tiene dos ramas.

[oh], oh, and these are all also branches and they have to rent ETc, ETc, Etc

Etcétera, etcétera, etcétera. . . O sea: una rama tiene dos ramas, que tienen dos ramas, que tienen dos ramas . . y esto se conoce como recursividad. Estaréis pensando ¿en donde se acaba todo esto?

So a branch is defined as something that has two branches and those have branches This is known as recursion now one thing you might be thinking about is where does this end so in the

En un mundo teorético, mágico, de fantasía, esto no acaba nunca. Y estas ramas se están haciendo más cortas y más cortas, hasta llegar a ser infinitamente pequeñas.

Theoretical magical world of fantasy this would go on forever and these branches are getting shorter and shorter and they would get infinitely small

Pero en un mundo de píxeles y programación,

but in the world of pixels and programming

tenemos que parar de alguna manera. Así que necesitamos un mecanismo (una condición) de salida. Y este mecanismo lo podemos ver aquí, aunque no lo he indicado explícitamente. En cuanto el valor llega a 1, acaba la cuenta atrás en esta multiplicación factorial.

We have to stop somehow so we need an exit condition and actually that's built into this up here I just didn't explicitly state it whenever you get to one you stop counting down in this

La misma cosa pasa aquí.

multiplication for a factorial and the same thing is true here we could say

Cada rama se bifurca en dos ramas, hasta que llega atener una longitud menor que un número de píxeles dado.

[continued] branching each branch has two branches attached to it until it is less than some number of pixels long

Esta es la idea general, y la manera de escribirlo en el código es . . . si tenemos un función . . . ¡Ay! No es así como se escribe "función" . . .

So this is the idea and the way that this ends up happening in code is if you have a function Whoops that's not how you spell function? in

En el código si escribimos una función y la llamamos algo como branch (rama) . . .

code if you write a function, and you call it something [like] branch a

una función recursiva que se define a si misma, quiere decir una función que, en alguna parte en el código, se llama a si misma. O sea vuelve a llamarse a si misma desde dentro y esto resulta en un tipo de bucle (loop):

Recursive function in code is defined according to itself meaning somewhere in that function You're going [to] actually call itself. So you're calling the function you're defining from within the function and it results in this word loop

llamo la función branch, que llama la función branch, que llama la función branch, y finalmente para en algún momento.

[I'm] gonna call Branch which calls branch which calls branch which calls branch and eventually stops at some point

Conque este es el concepto de recursión y cómo lo implementamos en el código. Ahora vamos a escribir este código en concreto.

So this is the idea of recursion and how it's implemented in code let's go and actually write this code now

Me atrevo a decir que esto me da un poco de miedo, pero ya veremos qué pasará. Ok, conque lo que tengo aquí es una plantilla p5.js. p5.js es una framework de JavaScript

dare I say I'm a little bit afraid to do this, but let's see what happens [okay], so Okay, so what I have here is a p5.js sketch. P5.js is a Javascript framework

y hay un enlace en la descripción de este vídeo donde puede encontrarla e iniciarse con ella.

Links in the video description of where you can get it and get started with it and the only thing that's going on right now

La única cosa que pasa en este momento es que un elemento canvas de HTML5 ha sido creado

Is that HTML5 Canvas has been created?

y tiene un fondo (background) gris.

And I'm drawing a gray background there, so I just want you to be able to see that

Quiero que lo podáis ver así que voy a volver atrás aquí, donde se está ejecutando,

I'm going to go back [to] over here where I'm running it and you can see what?

y ya lo podéis ver: este es mi background (canvas) de 400px por 400px

You can see there's my 400 by 400 pixel background

No tengo el tronco del árbol para empezar. Así que para ponerlo en marcha vamos a dibujar una línea

So I [won't] have the trunk of the tree to start with so just to kind of get that going let's draw a line that

que empieza desde el centro - 200, y desde la base [ height ]

[goes] from the Center 200 and the bottom two

y acaba en el centro y la base menos una cierta longitud [ height - len ].

To the center and the bottom [minus] some length

Así que voy a hacer una variable (para la longitud) que empieza desde 100. [ var len = 100;]

So I'm going to make a length variable which starts at A 100

Y ahora quiero que esta línea sea blanca.

and now and this line I want it to be white and

Y ahora si lo ejecuto de nuevo podéis ver . . . Ok, ya tengo una línea en la parte inferior. Así que tengo el tronco.

So now if I run this again, you can see okay. [I've] got a lines about so I have the trunk

Así que lo que quiero hacer ahora,

so what I want to do now is

quiero poner todo este código que genera el tronco, en una función; y la quiero llamar branch ( rama ), Y branch va a dibujar el tronco.

Actually put that code That's drawing the trunk into a function so I want to call branch and branch is actually going to draw that line

Así que vamos a hacer esto. Conque el siguiente paso es escribir esta función,

So let's do that. So the next thing. I'm going to do is rake this a function and

y una cosa que quiero hacer con esta función, quiero darle un argumento,

One thing I want to do with this function is I want to give this function an argument and that argument is

y este argumento es la longitud de la rama. Y voy a poner esto aquí en la función: Y después voy a escribir: line (200, height, 200, height - len ) donde len es la longitud.

How long to draw that branch so I'm actually going to put that variable here in the function, [and] then I'm going to say line 200 height to 100 height minus length

Así que aquí de hecho. . . escribo stroke(255) ( trazado blanco ), y a continuación branch (100).

so ups So now here. I actually want and I'll just say stroke 255 here now what I want to do is say Branch [I] forgot what I was doing 100

Así que podéis ver: la idea es

So you can see here that the idea here

obtener el mismo resultado solo que ahora estoy llamando la función branch, y el valor del argumento es 100. Aquí está la clave: tengo que explicaros cómo va a funcionar todo esto . . . De hecho no quiero que . . . Pasemos a la pizarra.

Same same result is that now I'm calling this function Branch, and I'm giving it the value 100 now. Here's the thing The way that this is going to work is I don't actually want to only come over here, so I want I want to do

Lo que quiero hacer es en lugar de dibujar el árbol desde la base,

is actually instead [of] drawing the the trees starting at this bottom location which is

o sea (200, height), quiero mover el origen (del canvas) desde aquí arriba, aquí abajo,

200 comma height I want to move the origin which is here all the way down to here

porque quiero dibujar las ramas relativamente al origen,

I always want to be drawing the branches relative to the origin by using the

y para esto voy a utilizar la función translate de p5.js, que mueve el origen (0,0) de un punto a otro.

Translate P5 function which sort of moves that [zero] zero point around and

Una vez que hayamos empezado a hacerlo, ya veréis porque esto tiene sentido.

Once we start doing a little bit [more] of this you'll see why that makes a lot of sense

Déjenme volver aquí al código, y lo que voy a hacer es . . . aquí mismo voy a escribir translate(200, height); branch(100);

So let me come back over to the code and what I'm going to do is right here. I'm going to say translate to 200 comma [hight] Branch

Y ahora esto se convierte en line(0,0,0,-len); Ahora si lo ejecuto de nuevo voy a tener el mismo resultado. Así que empezamos con algo muy sencillo.

100 and now this becomes draw a line from 0 a 0 to 0 comma negative length So now if I run this program same exact result so we [have] a very simple beginning

Trasladamos el origen abajo, y después dibujamos una rama desde la base derecha hacia arriba.

We are translating to the bottom. We are drawing a branch from the bottom straight up

¿Qué quiero hacer a continuación?

So what do I want to do next?

Ahora que ya he dibujado una rama desde abajo hacia arriba,

[I] have drawn a branch from the bottom straight up will guess what I want to do

quiero girar ( rotate ) y dibujar otra rama hacia la derecha.

I want to rotate and draw a branch to the right

Así que ahora, quiero girar ( rotate ) unos . . .

So what I want to do is now, say let me rotate by like I don't know

vamos a decir 45º, o sea PI / 4.

45 degrees let's start with 45 degrees is Pi divided by 4 and

Y ahora déjenme dibujar otra rama: line(0,0,0,-len). Y ¿sabéis que? También tengo que trasladar (el contexto) Estoy aquí abajo y he dibujado la línea de esta manera.

Then let me draw another branch 0 0 0 negative length, [oh] You know what [I] [also] need to translate [ah] so before I write. I I'm down here and I drew

Y ahora quiero empezar a dibujar desde aquí.

The branch like this and now I want to start drawing from here, so after I [finish] drawing the branch

Así que después de dibujar la rama tengo que trasladar de nuevo aquí.

I need to translate back up to here

Así que antes de girar (rotate) tengo que trasladar: translate(0,-len). Así que dibujamos una línea desde abajo, trasladamos al extremo superior de esta línea, giramos y dibujamos otra línea. A ver que aspecto tiene. ¡Ahí va! Una segunda rama.

Ok so before. I rotate now. I need to translate up 0 comma negative length, so we're drawing that bottom line, we're translating up to the top We're rotating and drawing another line. Let's see what that looks like there we go

Quiero que esta segunda rama sea más corta, así que voy hacerla 2 / 3 de su tamaño y para esto la voy a multiplicar por 0.67

second Branch now I Want that second branch to be a little bit shorter. So maybe I'll make it 2/3 of its size so multiply it by 0.67

Así que ya podéis ver, Ahora está un poco más corta. Pero hasta ahora ¿hice algo que sea recursivo?

So you can see now. It's a little bit shorter, but have I done anything recursive here yet

¿Tendré que dibujar todas estas brancas una a una? ¡No!

So am I really going to go and draw every single line of the tree is a separate line function

Lo que realmente quiero hacer es llamar la función branch de nuevo para dibujar una rama ligeramente más corta.

No, what do I actually want to do? I just want to call branch again and what I want to call branch with a slightly shorter

Me tienta ejecutarlo, y podría hacerlo, pero si lo ejecuto el navegador se queda colgado. ¡Probémoslo! ¡Vivamos peligrosamente!

Branch now. I'm tempted to run this and I could run this but if I run this I browser is going to crash [most] [likely] let's just try it danger danger. Let's live dangerously

Así que voy a ejecutarlo. ¡Ah! Y podéis ver que tengo un error: "maximum call stack size exceeded" (tamaño máximo de pila de llamada superado).

[I'm] going to run this So you can see I would we got an error Maxximum call stack size exceeded. So what happened here

¿Qué pasó aquí? Podeis ver que empiezó haciéndolo, pero como que decidió que ya no podía hacerlo.

You can see it started doing it, but it's just like decided it couldn't do it anymore

¿Qué pasó? Está llamando branch dentro de branch y esto es un bucle (loop) infinito: branch llama branch llama branch . . .

What happened? It's calling branch from within Branch and that's an infinite loop branch calls Branch calls Branch calls Branch Cross Branch

Así que tengo que decirle que en algún momento tiene que parar. Cada vez que llamo (la función) branch, la longitud (len) disminuie.

So I need to say at some point don't call branch anymore. What every time I call branch length is

Así que podría decir algo como: solo si la longitud es mayor que 4px puedo llamar la función branch de nuevo. Así que ahora podéis ver:

Shrinking so I could actually just say something like only if length is greater than like four pixels should [I] actually bother calling branch again. So now You can see here

estoy dibujando la primera línea y después llamo branch de nuevo, y giro, y llamo branch de nuevo, y giro, y podéis ver que continuamente . . . Puedo hacer aquel ángulo de rotación una variable. Dije que era PI / 4.

I'm drawing the first line And then I'm calling branch again and rotating calling branch again and rotating so and we could see here I could Continuously, I could I could make that angle of rotation a variable so I said it was Pi divided by [four] and

Y puedo girar por un ángulo . . . lo llamaré "angle". (var angle = PI / 4 )

I could rotate by I'm going to call that angle actually by an Angle and

Y otra cosa que puedo hacer puedo poner un slider (un control deslizante; un input type="range"), y déjenme que lo haga rápido aquí.

One thing I could do just so you see is I can I can make a slider. Let's just do this really quickly

En la librería DOM de p5.js,

Slut but there is a P5 in the P5 dom library I can make things like a slider

podemos hacer cosas como un slider, y quiero un slider (con valores) desde 0 hasta 2 * PI. ¡Ay que no puedo deletrear TWO_PI . . .

And I want to have a slider from [zero] to 2PI Oops, I can't spell [spell]

Y quiero que empiece desde PI / 4 (slider.value).

[2pi], and I [want] [it] to start it. Maybe pi divided by four and then

Y lo que quiero en draw() es hacer angle = slider.value.

[what] [I] want to do is say in draw angle equals slider dot value so what I what I'm doing

Así que lo que hago ahorra, si ejecuto esto,

Now is if I run this

¡Uy! . . . ¡A! Así que "createSlider is not defined" ( la función createSlider no está definida ) Probablemente por que tengo que referenciar primero la librería DOM en el index.

Yep, ah so create slider is not defined probably because I need to actually reference the Dom library in the Index file

Así que ahora podéis ver ¡Hala!

so now [you] can see

¡Fíjense en esto!

Whew oh look at this, so one thing by the way

Esto funciona pero el slider se mueve de uno en uno.

It's working but notice how the slider it can only move up by units of one

Una cosa que me he olvidado es un argumento.

So one thing that I forgot is there's an argument

La función createSlider tiene un cuarto argumento que es el tamaño del paso (step).

[there's] an there's a fourth argument Which is the step size for the slider?

Así que quiero poder moverlo en pequeños incrementos y ya podéis ver que ahora puedo jugar con aquel ángulo,

So [I] want to move it up by like lower increments, and you can see here now I can sort of play with that angle and I can turn

y puedo girar ( las ramas ) en, fuera lo que fuera, el valor de aquel ángulo. Pero tengo solo las ramas de la derecha. Y hay un par de problemas.

What that angle of rotate is for this tree thing, but I've only branched to the right now. There's a couple issues

¿Qué es esto de "PI is not defined" (PI no está definido)? en sketch.js:1 Esta es una de aquellas cositas raras.

One is this butter if this pie is not defined error on sketch line one. You know what Sort of strange as [looks]? [looks] is that actually this is sort of a

PI es una variable de p5, que puede ser encontrada en la librería DOM de p5 . . . perdone . . . hace parte de la librería p5,

Little weird thing but pie is a built-in variable part of the P5 Dom library of the P5 library not the Dom Library and the P5

y el problema es que no está disponible todavía en setup().

Library none of its stuff is available in [setup]. Just yet

Pero no tiene importancia, porque puedo tener este valor desde el slider.

But it doesn't really matter because I'm getting it from the slider

Así que vamos a cambiar esto a 0. [var angle = 0;]. Y puedo volver hacia atrás y podemos ver . . .

So let's change that to zero so I can go back and we can see okay

Ok, ahora tengo este slider y puedo cambiar el valor del ángulo ( de rotación ) con el slider desde 0 y hasta 2 * PI.

So now I have this tree that [I] can change the angle with this slider You can see all the way from [zero] to 2PI

Y es posible que quiera hacerlo desde 0 a PI / 2. ¡Ya veremos!

And I probably actually just want to make it from zero to Pi divided by two or whatever

Pero podemos cambiarlo más tarde.

But we can change that range later now

( El problema es que ) se ramifica solo hacia la derecha. ¿Que pasa si después de ramificarlo hacia la derecha, lo giro por el negativo del ángulo para ramificarlo hacia la izquierda? [ rotate ( – angle ); branch ( len * 0. 67) ]

That's only branching to the right so what if after [I] branch to the right I? also, then rotate by negative Angle and Branch to the left

Lo que quiero hacer es poner esta sentencia if ( if statement) alrededor de todo esto.

Now really what I want to do is actually have this if statement around all of that

Así que la idea aquí es que para cada rama . . . aquí tenemos la definición recursiva de una rama . . .

So the idea [here] is [that] for every branch. Here's the recursive definition of a branch?

dibujamos una línea, y después,

draw a line and

mientras que todavía estamos dibujando, giramos hacia la derecha y dibujamos otra línea, giramos hacia la izquierda y dibujamos otra línea,

Then as long as it's still long rotate to the right and draw another line rotate to the left and draw another line and do

y hacemos esto con todas las ramas. Vamos a ejecutarlo y no va a funcionar, y vamos a averiguar porque.

That for every single branch let's run this it's not going to work, and we'll figure out why

¡Oh! Hemos hecho algo . . . diría que interesante y loco. ¡Mirad esto! Y lo más curioso es que todo está conectado. La cosa va así:

It did something kind of interesting and crazy look at this crazy thing now. Do you see what's happening? Everything is connected everything is connected. It's like this

¿Como lo he hecho?

What did I do I went like this?

¡Oh! El lado equivocado del rotulador.

He dibujado esto así, y después lo he ramificado hacia la derecha, y después lo he ramificado hacia la izquierda, y después hacia la derecha de esta . . .

[this] pen [I] went like this and then I branched to the right and then I branched to the left and then I branched to the

No se bien bien lo que he hecho. Pero siempre he partido desde donde lo he dejado.

Right of that until I don't know what I did But [I've] always going whatever that recursive order is I'm always going from where I left off

Pero en realidad lo que quiero hacer es ramificar desde aquí hacia la derecha

But actually what I want to do is I want to go to here and branch to the right and then they need to come

y después tengo que volver aquí antes de ramificar hacia la izquierda. Y después esto se ramifica hacia la derecha y vuelvo aquí antes de ramificarlo ( de nuevo ) hacia la izquierda.

Back here before [I] branch to the left and then this branch is to the right and then come [back] here before [I] branch to

La manera de volver hacia atrases utilizando las funciones push y pop de p5.js

The left so the way that I can come back is by using the push and pop functions in P5

Porque push es una función que guarda (save) el estado de la trasformación. Así que si muevo . . . si traslado desde aquí – aquí y después llamo push, estoy guardando ( el estado de la trasformación ).

Because push is a function that says save the transformation state, so if I move from I translate from here to there And then I say push

Después puedo dibujar esto hacia la derecha, y después llamo pop para restaurar (restore) y dibujar esto hacia la izquierda.

I save I can draw this to the right then I can say pop to restore and then draw this to the left

Así que si vuelvo al código todo lo que necesito hacer es añadir push exactamente aquí antes de girar y ramificar, y pop justo después. También hago lo mismo aquí.

So if I come back to the code you will see that all I need to do is add a push Right here before I rotate and branch and then also [Anna] pop right after and also around here

Así que la idea es que para cada rama . . . Cada rama se define como una línea,

so the idea here is that for every single branch every single branch is defined as a line and

y después cuando llego al final de aquella línea guardo (save) el punto donde estoy y la ramifico hacia la derecha.

Then when you get to the end of that line you save where you are and branch off to the right restore

Vuelvo al punto donde estaba y lo ramifico hacia la izquierda. El orden de las cosas no es exactamente este.

Where you were and branch off to the left now the way the order of things happen is not

Llamamos branch y después vamos al siguiente, y al siguiente, y yendo y volviendo.

Exactly that because once you call branch you're then into the next [one] and then you're the next one then you start popping back all

Os animo simular este proceso y probar a dibujarlo. Probad ser el ordenador siguiendo toda esta lógica de guardar (push) y restaurar (pop).

the way I encourage you to try to like do some sort of Acted out physical demonstration or drawing like try to be the computer following all the pushes and pops

Pero ahora si lo ejecuto pienso que va a funcionar,

but you'll see now if I run this I believe it will work and

y podéis ver que ahora tenemos este precioso árbol fractal, y puedo cambiar el ángulo.

You can see now we have this lovely fractal tree, and I can sort of like change the angle now

Ahora. . . esto ya está acabado, pero de hecho apenas hemos empezado con este asunto.

You know this is only so this is really finished. I've only really scratched the surface here

Y hay un montón de cosas que os animo a probar. Por ejemplo ¿podéis saber en que nivel del árbol estáis y cambiar el grosor de línea de acuerdo con esto?

There's a bunch of things that I might encourage you to think about doing number one is can you keep track of? Which level your of the tree you're on and draw the branch with a different thickness using stroke weight, so that's an interesting problem

Esta es una cosa interesante y me encantaría venir con una solución en algún momento.

I'd be happy to demonstrate a solution at some point to that you might think [about] well

También podéis probar que el ángulo no sea lo mismo para todas las ramas.

What if the angle isn't the same with all of those branches?

Además podéis variar el número de brancas para que no sean siempre dos, y siempre con el mismo ángulo. Si buscáis en Google imágenes de arboles fractales,

What if there is a variable of branches instead of always - always with equal angles Angles and you can see that in this? Google image search for a fractal tree

podéis encontrar la manera de dibujar diferentes tipos de árboles, caóticos con un aspecto más realístico, orgánico, en lugar de estos árboles fractales perfectamente simétricos.

You'll see that you can you know with various other ways of kind of doing this you might be able to get to start to Get different types of more chaotic or out in Some ways organic looking qualities rather than than this very exact perfectly symmetrical

Con esto acaba esta parte donde estoy realizando este árbol fractal básico,

Fractal so this concludes this part of just doing this basic fractal tree

y voy a hacer esto de nuevo en el siguiente vídeo, pero en lugar de utilizar push y pop y translate,

I'm going to do this again in the next video in another video, but instead of using push and pop and translate

voy a utilizar seno y coseno y algo de matemática

I'm actually going to use sine and cosine of some math

Y veréis que haciéndolo de esta manera nos permite hacer algo un poco diferente, que puede interesaros,

And you'll see what doing it that way allows you to do something a little bit different which might interest you

ya que nos permite modificar el árbol ulteriormente. Ok, gracias por mirar y nos veremos en otro video . . .

Based on how you could then modify the tree at a later point, okay? Thanks for watching and I'll see you in another video

. tal vez . . . o tal vez no.

[maybe] or maybe not

Similar videos:

Coding Challenge #15: Fractal Trees - Object Oriented
The Coding Train
169.2K views 2.8K likes 23 dislikes 30 May 201657% match

Coding Challenge #10.3: Maze Generator with p5.js - Part 3
The Coding Train
80K views 1K likes 7 dislikes 02 May 201635% match

Coding Challenge #16: Fractal Trees - L-System
The Coding Train
141.9K views 2.3K likes 23 dislikes 31 May 201635% match

Coding Challenge #10.1: Maze Generator with p5.js - Part 1
The Coding Train
306.7K views 4.1K likes 49 dislikes 02 May 201633% match

Coding Challenge #28: Metaballs
The Coding Train
100.9K views 1.9K likes 20 dislikes 15 Jul 201631% match

The Coding Train!
The Coding Train
362.9K views 3.8K likes 194 dislikes 22 Sep 201728% match

Coding Challenge #155: Kaleidoscope Snowflake Design
The Coding Train
53.7K views 1.9K likes 13 dislikes 25 Dec 201928% match

2.1: How to use Processing - Processing Tutorial
The Coding Train
238.4K views 3.8K likes 47 dislikes 14 Jul 201527% match

1.3: Basics of drawing - p5.js Tutorial
The Coding Train
245K views 3.1K likes 58 dislikes 01 Sep 201527% match

The Coding Train!
The Coding Train
248.4K views 3.6K likes 95 dislikes 03 Nov 201627% match

1.3: Graphing with Chart.js - Working With Data & APIs in JavaScript
The Coding Train
296.9K views 5.9K likes 81 dislikes 23 May 201926% match

2.2: Variables in p5.js (Make your own) - p5.js Tutorial
The Coding Train
96.1K views 1.4K likes 14 dislikes 04 Sep 201526% match

Coding Challenge #4: Purple Rain in Processing
The Coding Train
1.8M views 39.3K likes 1.2K dislikes 25 Apr 201626% match

Coding Challenge #152: RDP Line Simplification Algorithm
The Coding Train
42K views 1.1K likes 9 dislikes 23 Oct 201926% match

3.4 Polar Coordinates - The Nature of Code
The Coding Train
16.3K views 886 likes 2 dislikes 06 Feb 202126% match

3.7: Additive Waves - The Nature of Code
The Coding Train
26.9K views 894 likes 2 dislikes 16 Feb 202126% match

Coding Challenge #128: Sketch-RNN Snowflakes with ml5.js
The Coding Train
33.5K views 881 likes 17 dislikes 26 Dec 201826% match

Code! Programming with p5.js for Beginners Trailer
The Coding Train
293.7K views 4.6K likes 111 dislikes 12 Apr 201925% match

Coding Challenge #129: Koch Fractal Snowflake
The Coding Train
45.1K views 1.2K likes 8 dislikes 30 Dec 201825% match

Coding Challenge #1: Starfield in Processing
The Coding Train
1.1M views 23.8K likes 321 dislikes 12 Apr 201624% match

Coding Challenge #3: The Snake Game
The Coding Train
3.1M views 60.4K likes 1.8K dislikes 20 Apr 201624% match

2.3: JavaScript Objects - p5.js Tutorial
The Coding Train
123.9K views 2K likes 16 dislikes 04 Sep 201524% match

Coding Challenge #124: Flocking Simulation
The Coding Train
223.8K views 4.5K likes 56 dislikes 11 Dec 201824% match

Coding Challenge #32.1: Agar.io - Part 1 (Basic Game Mechanics)
The Coding Train
277.1K views 4.1K likes 57 dislikes 16 Aug 201622% match

8.1: What is Object-Oriented Programming (OOP)? - Processing Tutorial
The Coding Train
464.8K views 5.4K likes 254 dislikes 24 Jul 201522% match

Workflow: Visual Studio Code
The Coding Train
191.1K views 2.6K likes 469 dislikes 18 Sep 201822% match

Coding Challenge #142.1: Rubik's Cube Part 1
The Coding Train
314.4K views 6.6K likes 73 dislikes 01 Apr 201921% match

Coding Challenge #71: Minesweeper
The Coding Train
366.3K views 5.7K likes 104 dislikes 18 May 201721% match

Coding Challenge #139: Calculating Digits of Pi with Collisions
The Coding Train
332.9K views 9.9K likes 144 dislikes 14 Mar 201921% match

Coding Challenge #31: Flappy Bird
The Coding Train
1.1M views 19.5K likes 537 dislikes 10 Aug 201620% match

Settings Privacy About Contact Donate