Placeholder Image

字幕表 動画を再生する

  • (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,