## 字幕表 動画を再生する

• (rings bell)

• (blows flute)

• Hello, and welcome to a 2018

• holiday coding challenge, snowflakes!

• So, I was perusing the internet last night,

• and I found this page, I think my search term was like,

• Brownian motion snowflake fractal,

• called Code Golf that has a lot of different

• coding challenges on it.

• I think the idea of the challenge is to write

• the shortest amount of code to create this kind of effect.

• I am not going to attempt that,

• I'm probably going to write the longest amount of code

• to make this kind of effect, but my goal

• is to try to make a snowflake pattern like this.

• Now, if you read over this webpage, and there's a

• few diff, this is an example that was made in Mathematica,

• which I don't understand at all.

• But the algorithm that's described here is, you can,

• here that it's a Brownian tree on an integer lattice,

• that sounds so fancy!

• The idea is, if you just think about a number line,

• or the x-axis of any coordinate system,

• and I were just to allow that point

• to, like, randomly move around,

• do a random walk, so to speak,

• random walk,

• and at some point I would have to tell it to stop.

• So maybe, maybe what I would do,

• is I would tell it to stop if it got to, like, over here.

• (laughter)

• The path, maybe this is the 0, 0 coordinate.

• If it got to here it should stop.

• And then I'm going to start another one.

• And I'm going to let that one do a random walk.

• Now, it's going to stop also if it gets to

• either past here, or if it touches another previous,

• I'll call these particles.

• And this, by the way, is basically an algorithm called

• Diffusion Limited Aggregation.

• And this is actually something that

• I have done previously in a coding challenge.

• I'll pull up that page right here.

• You can, I'm mostly going to implement the exact same thing.

• But you can see you'll get this branching pattern.

• So here, the dot, there's one dot

• that starts at the center

• and everything kind of branches out from there.

• And we could use a recursive tree structure.

• There's all sorts of kinds of way

• we could create this branching pattern.

• how can we make a snowflake?

• Well, I don't really know.

• I'm not, no expert on the actual science of snowflakes,

• but if you've looked at most snowflakes' designs,

• they are in a hexagonal pattern.

• We can think of that as a bunch of,

• like, triangular slices.

• Slices of a pizza pie right here, right.

• So if I were to kind of constrain

• this branching to within this sort of

• half of this slice, like right here,

• then what I could do is I could take this,

• I could reflect it on the other side,

• which would give it some symmetry,

• and then rotate it also around six times,

• and I think, I'm pretty sure, that's what that is happening

• in that animation that I showed in the beginning.

• So this is what I'm going to attempt to do.

• I'm sure, I'm not sure, but I expect

• there are lots of creative possibilities

• with color, and improving the algorithm,

• and size, and rendering that you could do

• from watching this.

• So my hope is that we will now be filled

• with a world of code made snowflakes.

• But let's start this and see.

• It's similar to probably also to, like,

• what you would do to make a kaleidoscope program I think.

• So let's start trying to do this.

• I'm going to do this in Processing,

• which is a Java based programming environment.

• This is, by the way, being recorded during a fundraiser.

• You can go to processingfoundation.org/support

• to make a donation to the non-profit Processing.

• And I will also release a JavaScript version

• in p5.js that you can also use

• to make this thing happen in the browser.

• Alright, so the first thing that I want to do

• is I just want to make a particle.

• Oh I guess I need to have a class.

• (laughter)

• So let's make a class called particle.

• Do I dare use p-vectors?

• Let's try to be simple for a little bit

• here for a second.

• and let's just make the particle have

• an x and a y,

• and I'm going to say the particle

• is going to start at some other x and y,

• so this is a, this is a class

• from which I'm going to make particle objects,

• and this is the class's constructor

• that is going to receive an x and a y

• and create the particle there.

• I probably actually don't,

• I could've just used a single vector actually,

• but that's fine.

• Let's make a particle class.

• And then what I'm going to do is

• I'm going to write a function called,

• like, update

• and I'm going to say x equals,

• so I'm going to do a really simple random walk,

• which it's all, I'm going to make the particle,

• I'm going to start it this way.

• I probably want to, like, start the particle

• somewhere around here,

• and then have it randomly walk in this direction

• to stay within the slice,

• but just for simplicity's sake,

• let's start it right here right now

• and have it randomly go this way.

• I'm going to say x equals,

• x minus equals one,

• y plus equals some random number

• between negative one and one, alright.

• So let's do that.

• And then let's make a particle.

• I'm going to call it current.

• And let's say size 600 600 for the window,

• and I'm going to make a new particle,

• which is going to start at 600 comma zero,

• and I'm going to say background zero.

• Current dot update.

• And then let's also write a function like show.

• So, I'm going to write a function called show

• and let's just draw this as, it'll be white

• with a white outline

• and this should probably have a size too.

• Let's give it a radius

• and then I can just set that

• always to be, like, three.

• I don't know, I'm making this up.

• Ellipse, x comma y

• r times two

• r times two

• because the radius is, the diameter is the radius times two.

• Alright, so now if I were to say,

• oh, this should be good.

• Oh there it is.

• There it is, it's wandering around up there.

• Okay, so one thing I want to do

• is I really, this is going to work much better,

• if everything can be relative to the center.

• So I'm going to translate zero zero to the center.

• Let's do that.

• Translate width divided by two,

• height divided by two.

• And then the particle should actually start

• at width divided by two

• 'cause it's that far out.

• It could start further out, but,

• and now we can see, there it is.

• There's my particle.

• Go, go particle.

• You can do it.

• You can make it to the center.

• Okay, it's just going to keep going,

• so there's, I need some way of telling it to stop.

• (laughter)

• So, let's say if current dot finished,

• then what I want is I want to have a big array,

• I mean, I could just not erase the,

• I could render it to, like,

• a separate graphics object or something,

• but let's, this'll be the less efficient way,

• but let's make an array list

• that is full of particles.

• Let's call this the snowflake.

• Snowflake equals new, what was I saying,

• array list.

• New array list of particles,

• and then if it's finished

• I'm going to say snowflake dot add

• the current particle,

• and then I should remake the current particle again,

• like I should make a new current particle.

• And then I also should for every particle p in snowflake,

• I should show them all.

• So the idea here is that I have this particle wandering.

• As soon as it's done it gets added to the list

• and a new one starts wandering.

• So I need to implement this finished function.

• As you can see this read squiggly is like

• I don't know what that is.

• What does it mean for a particle to be finished?

• And I can say boolean finished

• 'cause I want this function to return a boolean variable.

• I mean, yeah, a boolean value, true or false.

• Return x is less than zero.

• So it's finished when x is less than zero.

• Obviously I'm going to have to get

• more sophisticated than that,

• but that will be a good start.

• So let's see here.

• Go particle, go.

• Go particle, go.

• Go particle, go, stop.

• Go particle, go.

• Go particle, go.

• Go particle, go.

• Go particle, stop.

• Okay, so that's good.

• This is kind of working.

• I actually, I really kind of want to reflect,

• do the kaleidoscope thing now so we always see that.

• Oh that'll be so fun.

• So the particle is finished

• if also, if it's, if it's past zero

• or if intersects another particle.

• So, I guess I could say, if current is finished

• or current intersects snowflake, the existing.

• So now I need to write also

• another function called boolean intersects

• and does it intersect,

• the snowflake is just an array list, right.

• (groans)

• A particular snowflake.

• And then let's just put a return false here for a second,

• make sure this is still working.

• So it's still working, it's never going to stop.

• But now it will also, if, okay,

• I'm thinking, I'm thinking,

• it's so hard to talk and code.

• If it intersects itself, like,

• I have to just check every other snowflake against it

• and current is not currently in the snowflake array

• so I don't have to check it against itself.

• So, I'm going to assume a result,

• I'm going to assume it's not intersecting anything.

• Then I'm going to check everything

• for particle s in snowflake

• if, and then I just need to get the distance

• between s x, s y, and this x, and this dot y.

• By the way, I should mention I have this thing

• (upbeat music)

• where I always forget the this dot, this dot,

• but actually in Java, the this dot is assumed,