- Yes! It's another snowflake coding challenge.

This is my third holiday snowflake challenge,

and in this one I'm going to, once again,

make an algorithmic snowflake and I'm going to

render in processing of the Koch snowflake,

otherwise known as the Koch curve, Koch star, Koch island.

It's a mathematical curve and one of the earliest

fractal curves to have been described.

I'm just reading the Wikipedia page

by this Swedish mathematician Helge von Koch.

And I think I'm pronouncing that correctly.

All right, so how does it work?

I'm going to just show you over on the white board.

So the idea of the Koch snowflake,

and this is a recursive pattern that we're going to apply

over and over again on a line,

and actually there's something really kind of

crazy about this that I do want to talk about,

maybe towards the end, the property of this curve is insane.

So if I have any line, right,

the rule that I'm going to do is I'm going to take this line

and divide it into thirds, okay?

So I take the line and I divide it into thirds.

Then the idea is to erase the middle section

and, as if there were an equilateral triangle here,

render these two sides of the equilateral triangle.

And you get this, the idea being that

we've gone from this line to this,

which we would then go to, we would do that again

to each of these line segments

and again and again and again.

So this is will be like a Koch line or curve.

But if we start with this pattern

that you might want to, after watching this video,

make your own version and try starting

with different patterns, and there's all sorts

of variations on this that you can do,

we'll end up with something that has

a quality like a snowflake, yay!

Okay, so let's get started.

And you can see this described right here.

And in theory, if we do this correctly,

we're going to end up with something that looks like this.

All right, so I'm going to use processing.

I will also create a JavaScript with p5.js version of this.

The code for both of those should be

in this video description linked

whenever you're watching this.

But right you'll have to (mumbles)

I made an example for this many, many years ago.

I'm sort of figuring it out.

So I think what I want to is I think I want a class,

and I want to call the class a Segment.

And I'm definitely going to make heavy use here

of I think of the PVector object in processing.

It's all called p5.vector in p5.

It's an object that holds an x and a y value,

also a z value and a lot of mathematical operations

that you might typically do with vectors,

and you can find in my other videos

about what is a vector if you're so interested.

Okay, so in the segment constructor,

I'm going to give it a start and an end.

I think I want to call these a and b.

So it's going to have a PVector a and PVector b.

Who's to say what's the start and the end of a line?

Is this the start, this the end;

or this start or is this end?

So really a and b, and I'm just going to use

as the arguments a_ in b_ as what gets passed in.

I don't know if that makes sense.

I'm also going to be very careful and make sure

I copy the object because I think

that might become necessary.

So basically the segment is just this thing.

So what I need to do then, if I have a line segment,

I need a function that takes one segment

and makes it into four.

So I don't know what to call that.

Generate maybe?

Let's call this generate,

and it's going to generate an array of segments.

So this is now a function that returns in theory,

I'm just going to put return null at the end

so it doesn't give me an error,

this function should return an array.

I'll call those the children segments.

I don't know if that makes sense, but generated or new.

Let's just call it Segments.

Let's call it children as a new array

with four spots in it.

Right? So the idea here is that

each one, a segment has a starting point

and an end point, and then it should generate four sub ones.

So let's go to the main program for a second.

And what are we doing?

I guess I could make a snowflake class,

but ultimately what I want is an array list of segments.

Segments equals a new ArrayList full of segments.

And then I'm going to say background zero, stroke 255,

and I'm just going to draw them all.

So for every Segment s in segments, say s.show.

And this is the really easy part

because if I have a function called show, oops,

to show a segment is just to draw a line

from a.x, a.y to b.x, b.y, okay?

So this is the idea.

A segment is two end points of a line.

It could draw that line, and then somehow I'm going to have

to generate the sub lines that I haven't figured out yet.

So now if we do this, oh, well let's add a segment.

So I can call this like, I can say segments push,

and I'm going to say...

No, not push.

Push is the name for adding something

to an array in JavaScript.

I'm getting very confused.

Add, so let's make two PVectors,

and I'll make them somewhat arbitrary.

So I'm going to say like zero comma 300

and PVector b is a new PVector that's at a 300 comma,

oh no, 600 comma 300.

So if I create a new segment between a and b,

then I should see it.

There we go!

So there's my segment.

So now what I should do is I need to somehow,

let's actually put this in a...

Let's put this in a variable called start

because I'm curious.

What I want to do is I want to just test out my algorithm.

So I'm going to say segment children equals start.generate.

So I just want to test out my algorithm once.

So I make that starting segment,

I add it to the array list and now I just want to

generate before child.

It's a little bit silly to call them children.

It's kind of like a parent-child relationship

in the sense that the segment gives birth

to four new segments.

So okay, so now I can start doing this work.

So I really just need to figure out the math

for like if I label these,

if I label these like A, B, C and D.

Let's do A and D first.

That must be the easiest, right?

So let's do segment A.

So one thing I could do is I could represent

this line segment as a vector.

So as a vector that points from A from B.

Because if I do that, I could divide the magnitude

of the vector by three and then move that distance

from A and move that distance from B,

and now I have, I should label these like one, sorry, two.

And I probably should have counted from zero

to three and four, right?

This is A and this is B starting out, right?

So if I can get that vector, shrink it

and then move from here, that gives me a new segment

between this A and this new point,

and I can also take it this point to the end.

So that's going to be easy.

So first what I want to do is I want to make a vector,

which is the difference between b and a.

Then what I want to do is divide that vector by three.

So I want to just shrink that.

I could divide it by three.

And then for segment one, I need a new point,

a new point like so, b1 I'll just call it.

The naming here, I've really got to think about that.

And obviously... ♪ I will refactor this later ♪

♪ You know I will refactor this later ♪

Is...

♪ I will refactor this later ♪ adding to a that v.

And then children zero is a new segment

that goes between a and b1, right?

Again, this is really weird what I'm doing here,

but I'm calling this point now b1, okay?

And maybe this point is now going to be a1,

because I'm going to use it to make a line segment to this.

By the way, you might not realize watching this,

but I've been live streaming for well over three hours

and things aren't making as much sense to me

as they typically look.

So now let me do segment number four,

which is really taking b and subtracting v, right?

Subtract v from b.

B minus v, I think that's right.

And I'll call this A1,

and this should really be segment zero and segment three,

because I'm putting it in this array

so let's remember those.

So now I want to make a segment between a1 and b.

So again, this is zero, one, two and three.

And I've called this b1, called this A1,

let's just call this, let's call this c.

Okay, so now what I need to do is figure out that point

and then I'm done.

That shouldn't be too hard, right?

So how do I figure out c?

So c is actually, ah, I got an idea.

We can rotate, right?

What is this?

An equilateral triangle.

This angle is 60 degrees or pi over, pi is 180.

So that's like 1/3.

Pi divided by three, is that right?

That's 60 degrees. (chuckles)

Sorry.

Yes, okay.

So this is 60 degrees.

So if I can take this vector, which is doing this,

rotate it 60 degrees, add it to b1, I'll have c.

So I should be able to say v rotate pi divided by three.

And I might have to do negative

because the whole coordinate system is flipped

in computer graphics.

And then I'm going to say PVector c equals PVector add.

What did I call that, b1, b1 plus v.

So now, segment two is,

children two is a new segment

that goes between b1 and c,

and then I need one that goes between c and a1.

That goes between b1, b1 and c.

And segment three goes between c and A1.

And again, I might want to rethink the naming here.

And maybe some of you have good suggestions for that

and then I can say return children.

Okay, so first let's just see if this doesn't

give me any errors.

Let's just see if like I run this

and I'm going to just say like println and children.

It's not going to show me anything here because...

But okay, so that's good, I didn't get any errors

and I'm getting this sort of console log.

So this is a nice place of using JavaScript.

Ooh, why did I get null there?

So one of them was null.

I got to check that.

But this is the nice thing about using JavaScript,

is if I console log that array,

I'd be able to actually look at the object

and see what all the properties are.

It's a little trickier to do that in Java,

but why was one of them null?

Children zero, children three.

Oh, this is one.

Sorry, this should be one.

Okay, so now if I do that again,