字幕表 動画を再生する
-
(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,
-
and I found this page, it's from a website
-
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 to start with a point back here,
-
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.
-
But what's interesting about this,
-
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.
-
Let's start without p-vectors
-
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,